How to Integrate Lovable with Intercom

1// src/components/IntercomProvider.tsx
2import { useEffect } from 'react'
3import { useAuth } from '@/hooks/useAuth'
4
5declare global {
6  interface Window {
7    Intercom: (...args: unknown[]) => void
8    intercomSettings: Record<string, unknown>
9  }
10}
11
12export function IntercomProvider({ children }: { children: React.ReactNode }) {
13  const { user } = useAuth()
14  const appId = import.meta.env.VITE_INTERCOM_APP_ID
15
16  useEffect(() => {
17    if (!appId) return
18
19    // Load Intercom script
20    const script = document.createElement('script')
21    script.innerHTML = `
22      (function(){var w=window;var ic=w.Intercom;
23      if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}
24      else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};
25      w.Intercom=i;var l=function(){var s=d.createElement('script');
26      s.type='text/javascript';s.async=true;
27      s.src='https://widget.intercom.io/widget/${appId}';
28      var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};
29      if(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();
30    `
31    document.head.appendChild(script)
32
33    return () => { document.head.removeChild(script) }
34  }, [appId])
35
36  useEffect(() => {
37    if (!window.Intercom || !appId) return
38    if (user) {
39      window.Intercom('boot', {
40        app_id: appId,
41        user_id: user.id,
42        email: user.email,
43        name: user.user_metadata?.full_name || user.email,
44      })
45    } else {
46      window.Intercom('boot', { app_id: appId })
47    }
48  }, [user, appId])
49
50  return <>{children}</>
51}

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 INTERCOM_BASE = 'https://api.intercom.io'
9
10function intercomHeaders() {
11  const token = Deno.env.get('INTERCOM_ACCESS_TOKEN')
12  if (!token) throw new Error('INTERCOM_ACCESS_TOKEN not configured')
13  return {
14    Authorization: `Bearer ${token}`,
15    'Content-Type': 'application/json',
16    'Intercom-Version': '2.11',
17  }
18}
19
20serve(async (req) => {
21  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders })
22
23  try {
24    const { action, params = {} } = await req.json()
25    const headers = intercomHeaders()
26    let resp: Response
27
28    switch (action) {
29      case 'upsert_contact':
30        resp = await fetch(`${INTERCOM_BASE}/contacts`, {
31          method: 'POST',
32          headers,
33          body: JSON.stringify({
34            role: params.role || 'user',
35            external_id: params.userId,
36            email: params.email,
37            name: params.name,
38            custom_attributes: params.customAttributes || {},
39          }),
40        })
41        break
42
43      case 'get_contact':
44        resp = await fetch(`${INTERCOM_BASE}/contacts/${params.contactId}`, { headers })
45        break
46
47      case 'search_articles':
48        resp = await fetch(`${INTERCOM_BASE}/articles?phrase=${encodeURIComponent(params.query || '')}&state=published`, { headers })
49        break
50
51      case 'send_message':
52        resp = await fetch(`${INTERCOM_BASE}/messages`, {
53          method: 'POST',
54          headers,
55          body: JSON.stringify({
56            message_type: params.messageType || 'inapp',
57            subject: params.subject || '',
58            body: params.body,
59            template: 'plain',
60            from: { type: 'admin', id: params.adminId },
61            to: { type: 'user', id: params.contactId },
62          }),
63        })
64        break
65
66      case 'list_conversations':
67        resp = await fetch(`${INTERCOM_BASE}/conversations?contact_id=${params.contactId}&display_as=plaintext`, { headers })
68        break
69
70      default:
71        return new Response(JSON.stringify({ error: 'Unknown action' }), {
72          status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
73        })
74    }
75
76    const data = await resp.json()
77    return new Response(JSON.stringify(data), {
78      status: resp.ok ? 200 : resp.status,
79      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
80    })
81  } catch (error) {
82    return new Response(JSON.stringify({ error: error.message }), {
83      status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
84    })
85  }
86})