How to Integrate Freshdesk with V0

Start by prompting V0 to generate the customer-facing or internal support interface. The most common starting point is a support contact form that customers can fill out to submit issues. Think carefully about what fields you need — Freshdesk tickets require at minimum a subject, description, email, and priority. Additional fields like ticket type, product category, or custom fields can also be created if you have configured custom ticket fields in your Freshdesk account. V0 generates excellent form UIs with validation, loading states, and success messages. Be specific about the form fields and their types: text inputs, dropdowns for enumerations like priority and type, and a multi-line textarea for the issue description. Also specify the desired behavior on submit — show a spinner during the request, display the returned ticket ID in a success banner, and handle error states gracefully. For an internal agent dashboard, describe the table layout V0 should generate: ticket ID, customer name, subject, status with colored badges, priority, and assigned agent. Include pagination if you expect many tickets, or a scroll container for the table. Ask V0 to add filter controls for status and priority so agents can narrow down their queue. V0 will likely generate fetch calls to your API routes using useEffect or React Query patterns. Check that the API endpoint paths in the generated code match what you plan to create in the next step.

Create your Next.js API routes to handle Freshdesk operations. Freshdesk uses basic HTTP authentication — you pass your API key as the username and the string 'X' as the password, encoded in Base64. The base URL for all requests is https://{YOUR_DOMAIN}.freshdesk.com/api/v2/. The ticket creation route at app/api/freshdesk/tickets/route.ts handles POST requests. It reads the form data from the request body, constructs a Freshdesk ticket payload, and sends a POST request to Freshdesk's tickets endpoint. The payload requires at minimum: email (requester's email), subject, description, and status (2 = Open). Priority is optional but recommended: 1 = Low, 2 = Medium, 3 = High, 4 = Urgent. For listing tickets, create a GET handler at app/api/freshdesk/list/route.ts that calls Freshdesk's GET /api/v2/tickets endpoint with filtering parameters. You can filter by requester_id, email, or custom fields. The API returns paginated results — include the page query parameter to support pagination. For an internal dashboard, add a route that fetches tickets with filter=open and sorts by created_at. Map the response to the fields your V0 UI expects. Important: Freshdesk rate limits the free Sprout plan to 1000 API calls per hour. For high-traffic forms, consider caching list results with a short TTL using Vercel's fetch caching or Upstash Redis, and only bypass cache for write operations.

1// app/api/freshdesk/tickets/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const FRESHDESK_BASE_URL = `https://${process.env.FRESHDESK_DOMAIN}.freshdesk.com/api/v2`;
5
6function getAuthHeader() {
7  const credentials = Buffer.from(`${process.env.FRESHDESK_API_KEY}:X`).toString('base64');
8  return `Basic ${credentials}`;
9}
10
11const PRIORITY_MAP: Record<string, number> = {
12  low: 1,
13  normal: 2,
14  medium: 2,
15  high: 3,
16  urgent: 4,
17};
18
19export async function POST(request: NextRequest) {
20  try {
21    const { name, email, subject, type, priority, message } = await request.json();
22
23    if (!email || !subject || !message) {
24      return NextResponse.json(
25        { error: 'email, subject, and message are required' },
26        { status: 400 }
27      );
28    }
29
30    const ticketPayload = {
31      name,
32      email,
33      subject,
34      description: message,
35      status: 2, // Open
36      priority: PRIORITY_MAP[priority?.toLowerCase()] ?? 2,
37      type: type || 'Question',
38    };
39
40    const response = await fetch(`${FRESHDESK_BASE_URL}/tickets`, {
41      method: 'POST',
42      headers: {
43        'Content-Type': 'application/json',
44        Authorization: getAuthHeader(),
45      },
46      body: JSON.stringify(ticketPayload),
47    });
48
49    if (!response.ok) {
50      const error = await response.json();
51      return NextResponse.json(
52        { error: 'Failed to create ticket', details: error },
53        { status: response.status }
54      );
55    }
56
57    const ticket = await response.json();
58    return NextResponse.json({ id: ticket.id, displayId: ticket.display_id });
59  } catch (error) {
60    return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
61  }
62}

Go to your Vercel Dashboard, open the project, click Settings in the top nav, and then click Environment Variables. You need to add two server-side variables for Freshdesk authentication. First, add FRESHDESK_API_KEY with your Freshdesk API key. To find this, log into Freshdesk, click on your profile picture in the top right corner, and select Profile Settings. Scroll to the bottom of the page to find the API Key section. Copy the key and paste it as the value. This variable must NOT have a NEXT_PUBLIC_ prefix — it is a server-only secret that grants full API access to your Freshdesk account. Second, add FRESHDESK_DOMAIN with just the subdomain part of your Freshdesk URL. If your Freshdesk URL is https://mycompany.freshdesk.com, add mycompany as the value. Do not include the protocol, the full domain, or any slashes. This value is not sensitive — it is part of your public Freshdesk URL — but storing it as an environment variable makes it easy to switch between accounts. For Preview deployments, you can use the same Freshdesk account as production since Freshdesk tickets from testing are easy to identify by subject prefix. Alternatively, create a test Freshdesk account with the free plan specifically for staging. After saving both variables, click Save and trigger a new deployment by pushing a commit. Check your Vercel function logs to confirm the API route executes without authentication errors.

Freshdesk can send webhook events to your app when ticket statuses change, when agents reply, or when tickets are resolved. This lets your V0 app reflect real-time ticket state changes without polling the API. Create a webhook handler at app/api/freshdesk/webhook/route.ts. This route accepts POST requests from Freshdesk and processes ticket events. Freshdesk webhooks can be configured to send when: ticket is created, ticket status changes, ticket is resolved, agent is assigned, or a note is added. To configure a webhook in Freshdesk, go to Admin → Automations → Ticket creation / Ticket updates → New rule. In the Actions section, choose Trigger webhook and enter your Vercel deployment URL (https://your-app.vercel.app/api/freshdesk/webhook) as the callback URL. Choose POST as the method and JSON as the encoding. Select which ticket fields to include in the payload. Important: Freshdesk does not send a signature header for webhook verification by default (unlike Stripe). To verify that incoming requests are genuinely from Freshdesk, you can use IP allowlisting (Freshdesk's webhook IPs are documented), add a secret token as a query parameter in your webhook URL, or check that the payload structure matches expected Freshdesk format. For production apps, implement at least the query-parameter secret check. In your webhook handler, update your database based on ticket status changes. For example, if a ticket status changes to 4 (Resolved), mark the corresponding record in your database as resolved so the customer-facing ticket tracker reflects the change.

1// app/api/freshdesk/webhook/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4export async function POST(request: NextRequest) {
5  try {
6    // Verify webhook secret from query param
7    const { searchParams } = new URL(request.url);
8    const secret = searchParams.get('secret');
9    if (secret !== process.env.FRESHDESK_WEBHOOK_SECRET) {
10      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
11    }
12
13    const payload = await request.json();
14    const ticket = payload.freshdesk_ticket;
15
16    if (!ticket) {
17      return NextResponse.json({ received: true });
18    }
19
20    console.log('Freshdesk webhook received:', {
21      ticketId: ticket.id,
22      status: ticket.status,
23      subject: ticket.subject,
24    });
25
26    // Handle status changes
27    // Status: 2=Open, 3=Pending, 4=Resolved, 5=Closed
28    if (ticket.status === 4 || ticket.status === 5) {
29      // Update your database here: mark ticket as resolved
30      // await db.tickets.update({ where: { freshdeskId: ticket.id }, data: { status: 'resolved' } });
31    }
32
33    return NextResponse.json({ received: true });
34  } catch (error) {
35    return NextResponse.json({ error: 'Webhook processing failed' }, { status: 500 });
36  }
37}