How to Integrate Lovable with Freshdesk

Freshdesk API authentication uses an API key associated with your agent account. Each agent has their own API key visible in their profile settings. To get your API key: log in to Freshdesk and click your profile picture in the top-right corner. Select 'Profile Settings' from the dropdown. Scroll to the bottom of the Profile Settings page to find the 'Your API Key' section. The API key is displayed (click the eye icon to show it). Copy the key. Your Freshdesk subdomain is the company name in your Freshdesk URL. When logged in, your URL looks like yourcompany.freshdesk.com. The subdomain is 'yourcompany'. This is required for constructing all API base URLs: https://yourcompany.freshdesk.com/api/v2/. Freshdesk's API authentication uses HTTP Basic Auth with a specific convention: the username is your API key, and the password is the literal string 'X' (just the letter X — it is not a typo; this is Freshdesk's API authentication convention). You base64-encode the combined string 'apiKey:X' and send it as the Authorization header. So the Authorization header value is: Basic base64(YOUR_API_KEY + ':X') In the Edge Function, this is: btoa(apiKey + ':X') Freshdesk also supports email + password authentication, but API key authentication is recommended for server-to-server integrations as it does not change when the user's password changes and can be revoked independently.

Add Freshdesk credentials to Lovable's Cloud Secrets panel. In Lovable, click '+' → Cloud panel → Secrets tab. Add two secrets: - FRESHDESK_API_KEY — your agent API key from Freshdesk Profile Settings - FRESHDESK_SUBDOMAIN — your Freshdesk subdomain (just 'yourcompany', not the full URL) The Edge Function constructs the full API URL as: https://${FRESHDESK_SUBDOMAIN}.freshdesk.com/api/v2/ And the authorization header as: Basic ${btoa(FRESHDESK_API_KEY + ':X')} Store only the subdomain portion without protocol, dots, or the .freshdesk.com suffix. For yourcompany.freshdesk.com, the secret value is simply 'yourcompany'. For Freshdesk ticket priority values, the API uses numeric IDs: - 1 = Low - 2 = Medium (default) - 3 = High - 4 = Urgent For ticket status values: - 2 = Open - 3 = Pending - 4 = Resolved - 5 = Closed Store any Freshdesk agent IDs you want to use for auto-assignment as additional secrets (FRESHDESK_DEFAULT_AGENT_ID). Agent IDs are numeric and found in Freshdesk → Admin → Agents → click an agent to see their ID in the URL.

Build the Edge Function that handles Freshdesk operations. The function constructs the Base64 Basic Auth header from the stored credentials and proxies requests to the appropriate Freshdesk API endpoints. Freshdesk API v2 endpoints follow REST conventions. Key endpoints: - GET /api/v2/tickets — list tickets, supports filters: email, status, priority, assigned_to - GET /api/v2/tickets/{id} — get ticket with details - POST /api/v2/tickets — create ticket - PUT /api/v2/tickets/{id} — update ticket (status, priority, assignee) - GET /api/v2/tickets/{id}/conversations — get ticket conversation thread - POST /api/v2/tickets/{id}/reply — add reply to ticket - GET /api/v2/contacts — list contacts (for finding users by email) - POST /api/v2/contacts — create contact For filtering tickets by requester email: GET /api/v2/tickets?email=user@example.com. This returns all tickets where the requester's email matches. For creating tickets, the minimum required fields are: subject, description, email (requester's email), priority (numeric), and status (numeric). Setting status to 2 (Open) and priority to 2 (Medium) is a good default. Ticket creation accepts HTML in the description field for rich formatting, but plain text works for most use cases. Store the requester's email and name in the ticket's requester_id (by looking up or creating the Freshdesk contact first) or pass email and name directly — Freshdesk creates the contact automatically if it does not exist.

1import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
2
3const corsHeaders = {
4  'Access-Control-Allow-Origin': '*',
5  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
6}
7
8function fdHeaders() {
9  const key = Deno.env.get('FRESHDESK_API_KEY')
10  if (!key) throw new Error('FRESHDESK_API_KEY not configured')
11  return {
12    Authorization: `Basic ${btoa(key + ':X')}`,
13    'Content-Type': 'application/json',
14  }
15}
16
17function fdUrl(path: string) {
18  const sub = Deno.env.get('FRESHDESK_SUBDOMAIN')!
19  return `https://${sub}.freshdesk.com/api/v2${path}`
20}
21
22serve(async (req) => {
23  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders })
24
25  try {
26    const { action, params = {} } = await req.json()
27    const headers = fdHeaders()
28    let resp: Response
29
30    switch (action) {
31      case 'create_ticket':
32        resp = await fetch(fdUrl('/tickets'), {
33          method: 'POST',
34          headers,
35          body: JSON.stringify({
36            subject: params.subject,
37            description: params.description,
38            email: params.requesterEmail,
39            name: params.requesterName || '',
40            priority: params.priority || 2,
41            status: 2, // Open
42            tags: params.tags || [],
43          }),
44        })
45        break
46
47      case 'list_tickets':
48        resp = await fetch(fdUrl(`/tickets?email=${encodeURIComponent(params.email || '')}&per_page=${params.perPage || 20}&page=${params.page || 1}&include=description`), { headers })
49        break
50
51      case 'get_ticket':
52        resp = await fetch(fdUrl(`/tickets/${params.ticketId}?include=description,conversations`), { headers })
53        break
54
55      case 'get_conversations':
56        resp = await fetch(fdUrl(`/tickets/${params.ticketId}/conversations`), { headers })
57        break
58
59      case 'reply_to_ticket':
60        resp = await fetch(fdUrl(`/tickets/${params.ticketId}/reply`), {
61          method: 'POST',
62          headers,
63          body: JSON.stringify({
64            body: params.body,
65            user_id: params.userId,
66          }),
67        })
68        break
69
70      case 'update_ticket_status':
71        resp = await fetch(fdUrl(`/tickets/${params.ticketId}`), {
72          method: 'PUT',
73          headers,
74          body: JSON.stringify({ status: params.status }),
75        })
76        break
77
78      default:
79        return new Response(JSON.stringify({ error: 'Unknown action' }), {
80          status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
81        })
82    }
83
84    const data = await resp.json()
85    return new Response(JSON.stringify(data), {
86      status: resp.ok ? 200 : resp.status,
87      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
88    })
89  } catch (error) {
90    return new Response(JSON.stringify({ error: error.message }), {
91      status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
92    })
93  }
94})

With the Edge Function deployed, build the support portal UI using Lovable's chat. A complete customer support portal has three views: ticket submission form, ticket list, and ticket detail with conversation thread. For the ticket list, call list_tickets with the authenticated user's email on component mount. Freshdesk ticket statuses use numeric values in the API: convert them to labels in your React component (2 = 'Open', 3 = 'Pending', 4 = 'Resolved', 5 = 'Closed'). Color-code: open/pending in yellow-orange, resolved/closed in gray. For the ticket submission form, collect subject and description at minimum. If your app handles multiple product areas or issue types, add a category selector that maps to Freshdesk ticket tags or custom fields. On submission, call create_ticket and store the returned ticket ID in your Supabase database linked to the user's account. For the conversation thread view, call get_conversations with the selected ticket ID. Freshdesk returns conversations as an array where each item has a body (HTML), created_at, user_id, and from_email. Render as a chat-style thread. For customer-facing portals, filter out internal notes (is_note: true) to show only public replies. To allow users to reply to their tickets, use the reply_to_ticket action. Freshdesk requires the agent user ID for replies added via API — if you want users to add replies, set the user_id to your Freshdesk admin account ID (stored as FRESHDESK_BOT_AGENT_ID in secrets) and customize the reply body to include the user's name for context. RapidDev's team can help design production-grade support portal implementations with real-time updates via Freshdesk webhooks if you need ticket status changes to push to your app immediately.