How to Integrate Lovable with Sunshine Conversations (formerly Smooch)

Sunshine Conversations uses app-based architecture — each integration creates its own app with isolated credentials. Each app has an App ID and can have multiple API key pairs (Key ID + Key Secret), which are used to generate JWT tokens for authentication. Access the Sunshine Conversations Dashboard. If you have a Zendesk account with Sunshine Conversations, go to Zendesk Admin Center → Channels → Sunshine Conversations, then click 'Open Dashboard'. Alternatively, log in directly at app.smooch.io. In the dashboard, click 'Create new app' (or select an existing app if you already have one set up). Give the app a name like 'Lovable Integration'. After creation, you will see the App ID — a long alphanumeric string like 'acme_5f3a2...' — copy this. Next, generate API key credentials. In the app settings, go to the 'Settings' tab and find the 'API Keys' section. Click 'Create new API key'. Give it a name like 'Lovable Edge Function'. The dashboard shows a Key ID and Key Secret. Copy both immediately — the Key Secret is shown only once and cannot be retrieved after closing the dialog. The credentials you need are: - App ID: identifies which app you are connecting to - Key ID: the JWT 'kid' header value - Key Secret: used to sign the JWT JWT tokens for Sunshine Conversations are generated with scope 'app' for full access or 'appUser' for user-specific access. For server-side Edge Function calls (full app access), always use scope 'app'.

Add the three Sunshine Conversations credentials to Lovable's Cloud Secrets panel. In Lovable, click '+' → Cloud panel → Secrets. Add: - SUNSHINE_APP_ID — the App ID from the Sunshine Conversations Dashboard - SUNSHINE_KEY_ID — the API Key ID (starts with 'app_') - SUNSHINE_KEY_SECRET — the API Key Secret Sunshine Conversations uses JWT tokens for API authentication, which differs from most APIs that use static tokens. Each API request requires a freshly-signed JWT. The JWT payload includes: - scope: 'app' (for full app-level access) - Optional: sub (user ID for user-scoped tokens) The JWT is signed with HMAC-SHA256 using the Key Secret. The JWT header includes 'alg: HS256' and 'kid: YOUR_KEY_ID'. In Deno, you can use the djwt library or manually construct the JWT using the WebCrypto API. For the Edge Function, import the djwt library from deno.land/x to simplify JWT generation. The signed JWT is included as a Bearer token in the Authorization header of all API requests: Authorization: Bearer YOUR_JWT. API base URL: https://api.smooch.io — this is consistent regardless of which Zendesk data center hosts your account. Sunshine Conversations API v2 paths: /v2/apps/{appId}/conversations, /v2/apps/{appId}/users, /v2/apps/{appId}/conversations/{conversationId}/messages.

Build the Edge Function that generates JWTs and proxies calls to the Sunshine Conversations API. The JWT generation is the most technically distinct part of this integration compared to other CRM APIs. The JWT structure for Sunshine Conversations: - Header: { alg: 'HS256', typ: 'JWT', kid: KEY_ID } - Payload: { scope: 'app', iat: now, exp: now + 60 } - Signature: HMAC-SHA256 of header.payload using KEY_SECRET Deno has built-in WebCrypto for HMAC signing. Alternatively, import djwt from deno.land/x/djwt@v3.0.0. The Sunshine Conversations API v2 has a clean REST structure. Key operations: list conversations (GET /v2/apps/{appId}/conversations), get conversation messages (GET /v2/apps/{appId}/conversations/{conversationId}/messages), create/update user profiles (POST /v2/apps/{appId}/users, PATCH /v2/apps/{appId}/users/{userId}), send message (POST /v2/apps/{appId}/conversations/{conversationId}/messages). Message objects have a 'content' field with type and text: { type: 'text', text: 'Hello' }. For richer messages (image, file, carousel), the content object structure varies by type — check the Sunshine Conversations API documentation for each type. For the send message endpoint, also specify the 'author' field: { type: 'business' } for messages sent by your app, or { type: 'user', userId: id } for user-initiated messages.

1import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
2import { create, getNumericDate } from 'https://deno.land/x/djwt@v3.0.0/mod.ts'
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7}
8
9const SUNSHINE_BASE = 'https://api.smooch.io'
10
11async function generateJWT(): Promise<string> {
12  const keyId = Deno.env.get('SUNSHINE_KEY_ID')!
13  const keySecret = Deno.env.get('SUNSHINE_KEY_SECRET')!
14  if (!keyId || !keySecret) throw new Error('Sunshine Conversations credentials not configured')
15
16  const key = await crypto.subtle.importKey(
17    'raw',
18    new TextEncoder().encode(keySecret),
19    { name: 'HMAC', hash: 'SHA-256' },
20    false,
21    ['sign', 'verify']
22  )
23
24  return create(
25    { alg: 'HS256', typ: 'JWT', kid: keyId },
26    { scope: 'app', iat: getNumericDate(0), exp: getNumericDate(60) },
27    key
28  )
29}
30
31async function sunshineApi(path: string, method = 'GET', body?: unknown) {
32  const jwt = await generateJWT()
33  const resp = await fetch(`${SUNSHINE_BASE}${path}`, {
34    method,
35    headers: {
36      Authorization: `Bearer ${jwt}`,
37      'Content-Type': 'application/json',
38    },
39    body: body ? JSON.stringify(body) : undefined,
40  })
41  return resp.json()
42}
43
44serve(async (req) => {
45  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders })
46
47  try {
48    const { action, params = {} } = await req.json()
49    const appId = Deno.env.get('SUNSHINE_APP_ID')!
50    let result
51
52    switch (action) {
53      case 'list_conversations':
54        result = await sunshineApi(`/v2/apps/${appId}/conversations?page[size]=${params.pageSize || 25}`)
55        break
56
57      case 'get_messages':
58        result = await sunshineApi(`/v2/apps/${appId}/conversations/${params.conversationId}/messages`)
59        break
60
61      case 'send_message':
62        result = await sunshineApi(`/v2/apps/${appId}/conversations/${params.conversationId}/messages`, 'POST', {
63          author: { type: 'business' },
64          content: { type: 'text', text: params.text },
65        })
66        break
67
68      case 'create_user':
69        result = await sunshineApi(`/v2/apps/${appId}/users`, 'POST', {
70          externalId: params.externalId,
71          profile: {
72            displayName: params.displayName,
73            email: params.email,
74            avatarUrl: params.avatarUrl || '',
75          },
76        })
77        break
78
79      case 'get_user':
80        result = await sunshineApi(`/v2/apps/${appId}/users/${params.userId}`)
81        break
82
83      default:
84        return new Response(JSON.stringify({ error: 'Unknown action' }), {
85          status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
86        })
87    }
88
89    return new Response(JSON.stringify(result), {
90      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
91    })
92  } catch (error) {
93    return new Response(JSON.stringify({ error: error.message }), {
94      status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
95    })
96  }
97})

With the Edge Function deployed, use Lovable's chat to build the messaging inbox UI. The inbox consists of a conversation list panel and a message thread panel. For the conversation list, call list_conversations on mount. Each conversation object from Sunshine Conversations includes: id, displayName (the customer's name), lastMessage (preview), activeSwitchboardIntegration (which channel is active), and participants. Render each conversation as a list item with the channel icon, customer name, last message preview, and relative timestamp. For the message thread, call get_messages when a conversation is selected. Messages have a 'content' object with type and text, an 'author' object indicating business vs user, and a 'received' timestamp. Render as a chat bubble thread with user messages on the left and business messages on the right. For sending replies, use the send_message action with the selected conversation ID. After sending, append the new message to the local state immediately for optimistic UI, then refresh the message list to confirm. For real-time updates (new incoming messages appearing without page refresh), configure a Sunshine Conversations webhook pointing to a Lovable Edge Function that stores new messages in Supabase and broadcasts them via Supabase Realtime. This requires an additional webhook receiver Edge Function beyond the scope of this guide — RapidDev's team can help design the real-time webhook architecture for production messaging inboxes.