How to Integrate Lovable with Zendesk

Zendesk supports two authentication methods for API access: OAuth2 and API token. For Lovable Edge Function integrations, API token authentication is simpler and more appropriate — it uses HTTP Basic Auth with your email address and a token instead of requiring OAuth2 flows. To enable API tokens: log in to Zendesk and go to Admin Center (click the gear icon in the left sidebar, then 'Admin Center', or go directly to yourcompany.zendesk.com/admin). In Admin Center, navigate to Apps and Integrations → APIs → Zendesk API. Toggle 'Token access' to Enabled if it is not already. Click 'Add API token'. Give the token a description like 'Lovable Integration' so you can identify it later. Click 'Create'. Zendesk displays the token once — copy it immediately, as it will not be shown again after you close the dialog. The token is used alongside your Zendesk agent email address for authentication. The HTTP Basic Auth format for the Zendesk API is: username = your_email/token (literally with '/token' appended) and password = your_api_token_value. For example, if your email is admin@yourcompany.com and your token is abc123xyz, the authorization header is: Authorization: Basic base64(admin@yourcompany.com/token:abc123xyz) You do not need to calculate this base64 encoding manually — the Edge Function does it using Deno's built-in btoa() function. Also note your Zendesk subdomain: it is the 'yourcompany' in yourcompany.zendesk.com. All Zendesk API base URLs are https://yoursubdomain.zendesk.com/api/v2 — the subdomain is required for every API call.

Add all Zendesk credentials to Lovable's Cloud Secrets panel. Three values are required: your Zendesk agent email address, the API token you just created, and your Zendesk subdomain. In Lovable, click the '+' icon at the top of the editor to open the Cloud panel. Navigate to the Secrets tab. Add three secrets: - ZENDESK_EMAIL — your Zendesk agent email address (e.g., admin@yourcompany.com) - ZENDESK_API_TOKEN — the API token string you copied in the previous step - ZENDESK_SUBDOMAIN — just the subdomain part (e.g., 'yourcompany', not 'yourcompany.zendesk.com') The Edge Function will construct the Base64-encoded authorization header from these three values. The authentication string format is: btoa(email + '/token:' + apiToken) — note the '/token' suffix on the email, which tells Zendesk you are using API token auth rather than password auth. Store the subdomain without the protocol or .zendesk.com suffix — just the company name part. The Edge Function constructs the full API URL as https://${ZENDESK_SUBDOMAIN}.zendesk.com/api/v2/. If you operate multiple Zendesk instances (e.g., one for US customers, one for EU), you can add ZENDESK_SUBDOMAIN_EU as a separate secret and route requests to the appropriate instance based on the user's region.

Build the Edge Function that handles all Zendesk operations. The function constructs the Base64 auth header from the stored credentials and proxies requests to the appropriate Zendesk API endpoint. Zendesk's API v2 follows consistent REST conventions. Key endpoints: GET /tickets.json for all tickets, GET /tickets/{id}.json for a single ticket, POST /tickets.json to create a ticket, PUT /tickets/{id}.json to update a ticket, GET /search.json?query=requester:email@example.com to search tickets by requester. Ticket creation requires a 'ticket' wrapper object in the request body with nested 'comment' for the first message. The comment must include a 'body' field. Ticket fields include subject, description (via the first comment body), priority (urgent/high/normal/low), status (new/open/pending/solved/closed), and tags array. For user-facing support portals where users should only see their own tickets, use the search endpoint with a requester filter rather than fetching all tickets and filtering client-side — this is both more efficient and more secure. A useful pattern for linking Zendesk users to your Supabase users: store the Zendesk user ID in your Supabase users table after the first ticket creation. On subsequent interactions, pass the Zendesk user ID directly instead of searching by email.

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 getZendeskHeaders() {
9  const email = Deno.env.get('ZENDESK_EMAIL')!
10  const token = Deno.env.get('ZENDESK_API_TOKEN')!
11  if (!email || !token) throw new Error('Zendesk credentials not configured in secrets')
12  const encoded = btoa(`${email}/token:${token}`)
13  return {
14    Authorization: `Basic ${encoded}`,
15    'Content-Type': 'application/json',
16  }
17}
18
19function zdUrl(path: string) {
20  const subdomain = Deno.env.get('ZENDESK_SUBDOMAIN')!
21  return `https://${subdomain}.zendesk.com/api/v2${path}`
22}
23
24serve(async (req) => {
25  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders })
26
27  try {
28    const { action, params = {} } = await req.json()
29    const headers = getZendeskHeaders()
30    let resp: Response
31
32    switch (action) {
33      case 'create_ticket':
34        resp = await fetch(zdUrl('/tickets.json'), {
35          method: 'POST',
36          headers,
37          body: JSON.stringify({
38            ticket: {
39              subject: params.subject,
40              comment: { body: params.description },
41              requester: { name: params.requesterName, email: params.requesterEmail },
42              priority: params.priority || 'normal',
43              tags: params.tags || [],
44            },
45          }),
46        })
47        break
48
49      case 'get_ticket':
50        resp = await fetch(zdUrl(`/tickets/${params.ticketId}.json`), { headers })
51        break
52
53      case 'list_user_tickets':
54        resp = await fetch(zdUrl(`/search.json?query=type:ticket requester:${encodeURIComponent(params.email)}&sort_by=created_at&sort_order=desc`), { headers })
55        break
56
57      case 'update_ticket_status':
58        resp = await fetch(zdUrl(`/tickets/${params.ticketId}.json`), {
59          method: 'PUT',
60          headers,
61          body: JSON.stringify({ ticket: { status: params.status } }),
62        })
63        break
64
65      case 'add_comment':
66        resp = await fetch(zdUrl(`/tickets/${params.ticketId}.json`), {
67          method: 'PUT',
68          headers,
69          body: JSON.stringify({
70            ticket: {
71              comment: {
72                body: params.body,
73                public: params.public !== false,
74              },
75            },
76          }),
77        })
78        break
79
80      default:
81        return new Response(JSON.stringify({ error: 'Unknown action' }), {
82          status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
83        })
84    }
85
86    const data = await resp.json()
87    return new Response(JSON.stringify(data), {
88      status: resp.ok ? 200 : resp.status,
89      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
90    })
91  } catch (error) {
92    return new Response(JSON.stringify({ error: error.message }), {
93      status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
94    })
95  }
96})

With the Edge Function deployed, use Lovable's chat to build the support portal UI. A complete support portal has two main views: a ticket list showing the user's support history with status badges, and a ticket detail view showing the full conversation thread with a reply form. For the ticket list, call list_user_tickets with the authenticated user's email on component mount. Zendesk ticket statuses are: new (just created), open (being worked on), pending (waiting on customer), solved (agent marked solved), and closed (permanently closed). Color-code them: open/new in yellow, pending in blue, solved/closed in gray. For the ticket submission form, collect subject and description at minimum. Add a priority selector (Normal, High, Urgent) if appropriate for your use case. On submission, call create_ticket and store the returned ticket.id in your Supabase database linked to the user's account for future reference. For the ticket detail view, Zendesk returns ticket comments via a separate endpoint: GET /tickets/{id}/comments.json. Add a 'get_comments' action to your Edge Function to support this. Render comments as a chat bubble thread with timestamps, differentiating between public replies (visible to customer) and private agent notes (internal). For production support portals serving large volumes of customers, RapidDev's team can help implement Zendesk webhook integration for real-time ticket status updates that push to your app rather than requiring polling.