How to Integrate Lovable with LiveChat

LiveChat API authentication uses Personal Access Tokens generated through the LiveChat Developer Console. Go to developers.livechat.com and sign in with your LiveChat account. Click 'Create new app' in the top right. Give the app a name like 'Lovable Integration' and select 'Service account credentials' as the app type — this is appropriate for server-side Edge Function integrations. In the app's Authorization section, you will find the Client ID and Client Secret. However, for Lovable Edge Functions, a Personal Access Token is simpler. To generate one: go to developers.livechat.com → Your Apps → Build → Personal Access Tokens. Click 'Generate a new token'. Select the scopes you need: - chats--all:read — for reading chat archives and summaries - reports_read — for accessing analytics and reports - agents--all:read — for fetching agent information - customers:read — for accessing customer profiles Generate the token. Copy the token string — it starts with 'Bearer dal:...' or similar. This is your Personal Access Token for API calls. Also note your LiveChat License Number — found in LiveChat settings at my.livechatinc.com → Settings → Chat Widget → under 'LiveChat for developers', or visible in your LiveChat URL. The license number is a 5-8 digit number like '12345678'. You need it both for widget initialization and as the account ID for some API calls. For the chat widget on your Lovable frontend, you need the License Number (not the API token — the License Number is a public identifier safe for client-side code).

Add LiveChat API credentials to Lovable's Cloud Secrets panel. In Lovable, click '+' → Cloud panel → Secrets. Add two secrets: - LIVECHAT_ACCESS_TOKEN — your Personal Access Token from the Developer Console - LIVECHAT_ACCOUNT_ID — your LiveChat License Number (also used as account ID in API calls) For the widget (frontend), you also need the License Number as a build-time environment variable. In Lovable, this should be set as VITE_LIVECHAT_LICENSE_ID in your app's environment configuration — it is public and safe for the browser bundle. The LiveChat widget is a JavaScript snippet that initializes in the browser. The simplest implementation for React is to load the LiveChat script in your app's main component and initialize it with the license number. When a user is logged in, use the LiveChat JavaScript API to set their name and email: window.LiveChatWidget.call('set_customer_name', name) and window.LiveChatWidget.call('set_customer_email', email). LiveChat's JavaScript widget API also supports custom variables for passing plan tier, user ID, or any metadata to agents: window.LiveChatWidget.call('set_session_variables', { plan: 'pro', userId: user.id }). The LiveChat REST API base URL is https://api.livechatinc.com/ with version prefix v3.6 for most endpoints.

1// src/components/LiveChatWidget.tsx
2import { useEffect } from 'react'
3import { useAuth } from '@/hooks/useAuth'
4
5declare global {
6  interface Window {
7    LiveChatWidget: {
8      call: (method: string, ...args: unknown[]) => void
9      on: (event: string, callback: (data: unknown) => void) => void
10    }
11    __lc: { license: number; asyncInit: boolean }
12  }
13}
14
15export function LiveChatWidget() {
16  const { user } = useAuth()
17  const licenseId = import.meta.env.VITE_LIVECHAT_LICENSE_ID
18
19  useEffect(() => {
20    if (!licenseId) return
21
22    window.__lc = window.__lc || {}
23    window.__lc.license = parseInt(licenseId)
24    window.__lc.asyncInit = true
25
26    const script = document.createElement('script')
27    script.async = true
28    script.src = 'https://cdn.livechatinc.com/tracking.js'
29    document.head.appendChild(script)
30
31    return () => {
32      document.head.removeChild(script)
33    }
34  }, [licenseId])
35
36  useEffect(() => {
37    if (!window.LiveChatWidget || !user) return
38    window.LiveChatWidget.call('set_customer_email', user.email || '')
39    window.LiveChatWidget.call('set_customer_name', user.user_metadata?.full_name || user.email || '')
40    window.LiveChatWidget.call('set_session_variables', {
41      user_id: user.id,
42    })
43  }, [user])
44
45  return null
46}

Build the Edge Function that queries LiveChat's REST API for analytics, chat archives, and agent data. These operations require the access token and cannot be performed from the browser. LiveChat REST API v3.6 key endpoints: - GET /v3.6/configuration/agents — list all agents with availability status - GET /v3.6/reports/chats/total_chats — total chat count for a date range - GET /v3.6/reports/chats/agents — per-agent chat statistics - GET /v3.6/reports/chats/first_response_time — average response time - GET /v3.6/reports/ratings/chats_count — satisfaction ratings count - GET /v3.6/chats — list chat summaries (archives) - GET /v3.6/chats/{chat_id} — get full chat transcript Authentication: Bearer token in the Authorization header plus the X-Region header if your account is in the European data center (dal.eu region). Most accounts are in the default US region. Date parameters in LiveChat analytics endpoints use ISO 8601 format: from and to parameters as YYYY-MM-DDThh:mm:ssZ. The reports are paginated with page parameter starting at 1. The chat archive (GET /v3.6/chats) returns chat summaries with ID, timestamps, agent, and ratings. To get the full message transcript, call GET /v3.6/chats/{chatId} with the specific chat ID.

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
8const LC_BASE = 'https://api.livechatinc.com/v3.6'
9
10function livechatHeaders() {
11  const token = Deno.env.get('LIVECHAT_ACCESS_TOKEN')
12  if (!token) throw new Error('LIVECHAT_ACCESS_TOKEN not configured')
13  return {
14    Authorization: `Bearer ${token}`,
15    'Content-Type': 'application/json',
16  }
17}
18
19serve(async (req) => {
20  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders })
21
22  try {
23    const { action, params = {} } = await req.json()
24    const headers = livechatHeaders()
25    let resp: Response
26
27    switch (action) {
28      case 'list_agents':
29        resp = await fetch(`${LC_BASE}/configuration/agents`, { headers })
30        break
31
32      case 'get_chat_stats': {
33        const from = params.from || new Date(Date.now() - 30 * 86400000).toISOString().split('T')[0]
34        const to = params.to || new Date().toISOString().split('T')[0]
35        resp = await fetch(`${LC_BASE}/reports/chats/total_chats?from=${from}T00:00:00Z&to=${to}T23:59:59Z&distribution=day`, { headers })
36        break
37      }
38
39      case 'list_chat_archives':
40        resp = await fetch(`${LC_BASE}/chats?${new URLSearchParams({
41          page_id: params.pageId || '',
42          sort_order: 'desc',
43          ...(params.agentId && { filters: JSON.stringify({ agent_ids: [params.agentId] }) }),
44        }).toString()}`, { headers })
45        break
46
47      case 'get_chat_transcript':
48        resp = await fetch(`${LC_BASE}/chats/${params.chatId}`, { headers })
49        break
50
51      default:
52        return new Response(JSON.stringify({ error: 'Unknown action' }), {
53          status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
54        })
55    }
56
57    const data = await resp.json()
58    return new Response(JSON.stringify(data), {
59      status: resp.ok ? 200 : resp.status,
60      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
61    })
62  } catch (error) {
63    return new Response(JSON.stringify({ error: error.message }), {
64      status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
65    })
66  }
67})