Smooch (now Zendesk Sunshine Conversations)

Log in to your Zendesk account and navigate to the Sunshine Conversations dashboard (app.smooch.io or the Zendesk admin panel under 'Channels'). Click 'Create App' and give it a name matching your FlutterFlow project. Once created, you'll see your **App ID** in the dashboard — copy it. This is a public identifier used in every API endpoint path. Next, generate API credentials: go to the App Settings → API Keys (or 'Credentials' section) and click 'Create Key'. Give it a name like 'FlutterFlow Cloud Function'. Copy the **Key ID** and **Key Secret** immediately — the Key Secret is shown only once (treat it like a password). Store both somewhere secure like a password manager. Note your data region: Sunshine Conversations runs on two regions. US accounts use `api.smooch.io` as the base URL; EU accounts use `api.eu-1.smooch.io`. Check your Zendesk data residency settings to determine which base URL to use. Using the wrong region returns 401 or 404 errors even with correct credentials. If you plan to receive inbound messages from channels like WhatsApp or SMS, you'll also need to configure those channel connectors in the dashboard — go to App → Integrations → select the channel (e.g., WhatsApp Business) and follow the connection wizard. Channel configuration is done entirely in the Sunshine dashboard, not in FlutterFlow.

You need two Firebase Cloud Functions: one for outbound messages (signs a JWT per request, calls the Sunshine API) and one for inbound webhooks (receives Sunshine events, writes to Firestore). **Function 1: `sendSunshineMessage`** — accepts a POST from FlutterFlow with `{conversationId, messageText}`, signs a JWT using your Key ID and Key Secret (using the `jsonwebtoken` npm package), and calls `POST https://api.smooch.io/v2/apps/{appId}/conversations/{id}/messages` with a `{author: {type: 'business'}, content: {type: 'text', text: '...'}}` body. **Function 2: `sunshineWebhook`** — receives POST events from Sunshine (message:appUser events), extracts the conversation ID, message text, sender info, and timestamp, then writes a document to Firestore at `/conversations/{conversationId}/messages/{messageId}`. This is the Firestore document your FlutterFlow app will stream in real-time. After deploying, go to your Sunshine Conversations App dashboard → Webhooks → Create Webhook. Set the target URL to your `sunshineWebhook` function URL and check the `message:appUser` trigger (fires when a customer sends a message). Sunshine will send a POST to your function each time a customer replies. Set Firebase environment config: `firebase functions:config:set sunshine.app_id='YOUR_APP_ID' sunshine.key_id='YOUR_KEY_ID' sunshine.key_secret='YOUR_KEY_SECRET' sunshine.region='us'`

1// index.js (Firebase Cloud Functions)
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4const axios = require('axios');
5const jwt = require('jsonwebtoken');
6
7admin.initializeApp();
8const db = admin.firestore();
9
10const APP_ID = functions.config().sunshine.app_id;
11const KEY_ID = functions.config().sunshine.key_id;
12const KEY_SECRET = functions.config().sunshine.key_secret;
13const REGION = functions.config().sunshine.region || 'us';
14const BASE_URL = REGION === 'eu'
15  ? 'https://api.eu-1.smooch.io/v2'
16  : 'https://api.smooch.io/v2';
17
18function makeJwt() {
19  return jwt.sign({ scope: 'app' }, KEY_SECRET, {
20    header: { kid: KEY_ID },
21    expiresIn: '60s'
22  });
23}
24
25// Outbound: FF calls this to send a message
26exports.sendSunshineMessage = functions.https.onRequest(async (req, res) => {
27  res.set('Access-Control-Allow-Origin', '*');
28  if (req.method === 'OPTIONS') {
29    res.set('Access-Control-Allow-Methods', 'POST');
30    res.set('Access-Control-Allow-Headers', 'Content-Type');
31    return res.status(204).send('');
32  }
33  const { conversationId, messageText } = req.body;
34  if (!conversationId || !messageText) {
35    return res.status(400).json({ error: 'conversationId and messageText required' });
36  }
37  try {
38    const token = makeJwt();
39    const { data } = await axios.post(
40      `${BASE_URL}/apps/${APP_ID}/conversations/${conversationId}/messages`,
41      { author: { type: 'business' }, content: { type: 'text', text: messageText } },
42      { headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' } }
43    );
44    return res.status(200).json({ messageId: data.message?.id });
45  } catch (e) {
46    return res.status(e.response?.status || 500).json({ error: e.message });
47  }
48});
49
50// Inbound: Sunshine webhook → Firestore
51exports.sunshineWebhook = functions.https.onRequest(async (req, res) => {
52  const event = req.body;
53  const messages = event?.events?.[0]?.payload?.messages || [];
54  const convId = event?.events?.[0]?.payload?.conversation?.id;
55  for (const msg of messages) {
56    if (msg.author?.type === 'user' && convId) {
57      await db.collection('conversations').doc(convId)
58        .collection('messages').add({
59          text: msg.content?.text || '',
60          author: msg.author?.userId || 'customer',
61          timestamp: admin.firestore.FieldValue.serverTimestamp(),
62          direction: 'inbound'
63        });
64    }
65  }
66  return res.status(200).send('ok');
67});

Your FlutterFlow app needs a Firestore collection structure to store conversation messages. Open your Firebase console → Firestore → create a collection called `conversations`. Inside it, each document will be a conversation (keyed by Sunshine conversation ID), containing a sub-collection called `messages`. Each message document has: `text` (String), `author` (String), `timestamp` (Timestamp), `direction` (String — 'inbound' or 'outbound'). In FlutterFlow, go to **Settings & Integrations → Firebase** (if not already connected, follow the setup wizard to connect your Firebase project). Once connected, go to **Firestore** in the left nav → click **Import from Firestore** to import your schema. FlutterFlow will detect the `conversations` and `messages` collections. On your chat screen in FlutterFlow, add a **ListView** widget. In its backend settings, set the data source to **Firestore Collection** → `conversations/{conversationId}/messages`, ordered by `timestamp` ascending. Enable 'Listen for Real Time Updates' (the streaming icon next to the query) — this is the key that makes messages appear instantly without polling. Bind each list tile's Text widget to the `text` field, a secondary text to `author`, and a timestamp Text to `timestamp`. Add a visual distinction for inbound vs outbound messages by checking the `direction` field: align inbound messages left, outbound right, with different background colors.

Click **API Calls** in the FlutterFlow left nav, then **+ Add** → **Create API Group**. Name it 'Sunshine Proxy'. Set the Base URL to your `sendSunshineMessage` Cloud Function URL (e.g., `https://us-central1-your-project.cloudfunctions.net`). No shared headers needed — your Cloud Function handles JWT signing internally. Add an API Call inside the group: click **+ Add API Call**, name it 'Send Message'. Set method to **POST**, path to `/sendSunshineMessage`. In the Body section, type = JSON, with two fields: `conversationId` and `messageText`. Create matching variables in the Variables tab. Also create a second API Group named 'Sunshine Direct' pointed at the actual Sunshine base URL (`https://api.smooch.io/v2`) — you'll use this in future steps if you want to create conversations or list them. For now, the main send path goes through the Cloud Function. On the chat compose row (a TextField + Send button at the bottom of the screen), wire the Send button's Action Flow to: (1) API Request → 'Sunshine Proxy / Send Message', passing the current conversation ID (from Page State or passed as a page parameter) and the TextField value as `messageText`. (2) On success: add an outbound message document directly to Firestore via a **Firestore → Add Document** action (at `conversations/{convId}/messages`) with `text`, `author: 'business'`, `direction: 'outbound'`, `timestamp: currentTime`. (3) Clear the TextField. Adding the outbound message to Firestore locally makes it appear in the real-time ListView immediately without waiting for a round-trip through Sunshine.

1{
2  "group": "Sunshine Proxy",
3  "baseUrl": "https://us-central1-YOUR-PROJECT.cloudfunctions.net",
4  "calls": [
5    {
6      "name": "Send Message",
7      "method": "POST",
8      "path": "/sendSunshineMessage",
9      "bodyType": "JSON",
10      "body": {
11        "conversationId": "{{conversationId}}",
12        "messageText": "{{messageText}}"
13      },
14      "variables": [
15        { "name": "conversationId", "type": "String" },
16        { "name": "messageText", "type": "String" }
17      ]
18    }
19  ]
20}

With the sending and webhook relay working, connect your external channels in the Sunshine Conversations dashboard. Go to your App → Integrations → click 'Add Channel'. Available channels include WhatsApp Business (requires a Meta Business account), SMS (via Twilio or Sunshine's native SMS), Facebook Messenger (requires a Facebook Page), and Instagram Direct. For each channel, follow the in-dashboard connection wizard. WhatsApp requires a verified Meta Business account and phone number; SMS requires a Twilio account or purchasing a Sunshine SMS number; Facebook/Instagram require connecting your business pages. Note: configuring channels requires prerequisites outside this tutorial — see each channel's documentation. Channel configuration is done entirely in the Sunshine dashboard, not in FlutterFlow. To test the full round-trip: use Sunshine's built-in Web Messenger (available in App → Integrations → Web Messenger) to create a test conversation from a browser. Send a message via the Web Messenger — this triggers your `sunshineWebhook` Cloud Function. Verify that the message appears in Firestore, then in your FlutterFlow app's chat screen. Now send a reply from FlutterFlow — confirm it arrives in the Web Messenger browser window. For WhatsApp testing specifically, Sunshine's API lets you create a test conversation directly: call `POST /v2/apps/{appId}/conversations` via your Cloud Function or Postman, then send a message. WhatsApp has template message requirements for the first business-initiated contact outside of a 24-hour window — these templates are managed in the Meta Business Manager, not in FlutterFlow.