Intercom

Log in to Intercom and navigate to Settings (bottom-left gear icon). Go to Integrations → Developer Hub → New App. Name the app something like 'FlutterFlow Mobile App'. Once created, you will see several credential types — collect three of them for this integration. First, your App ID: found in Settings → General under 'App ID'. This is a short string like `abc1defg` and is not a secret — it identifies your Intercom workspace in the SDK initialization call and can be embedded in the app. Second, your Access Token: in Developer Hub, click on your app and go to Authentication → Access Token. This is a Bearer secret (a long string starting with `dG9r...`) that grants read/write access to your Intercom data. It must live in your backend proxy — never in a FlutterFlow API Call header or Custom Action Dart code. Third, your Identity Verification Secret Key: navigate to Settings → Security → Identity Verification and enable it. Once enabled, you will see your secret key. This key is used to compute an HMAC hash for each user to prevent impersonation. It is also a server-only secret — never in Dart code. Write down your App ID, Access Token, and Identity Verification Secret in a secure notes file. You will need the App ID in your Flutter Custom Action code, and the other two in your Cloud Function environment variables.

The Identity Verification HMAC is a cryptographic hash computed from the user's identifier (email or user ID) using your Identity Verification Secret as the signing key. It proves to Intercom that the user was authenticated by your server — not self-reported by the client app. If you skip this step and call Intercom without a valid HMAC, any user can open the Messenger claiming to be any other user. Deploy a Cloud Function (Firebase) or Edge Function (Supabase) that accepts the logged-in user's identifier (email or user ID) and returns the HMAC hash. Store your Identity Verification Secret in the function's environment variables — never in the source code. For Firebase: create a new HTTPS function that receives a POST with `{ user_id: '...' }` or `{ email: '...' }`, computes `HMAC-SHA256(user_identifier, identity_verification_secret)`, and returns `{ user_hash: '...' }`. In FlutterFlow, call this function from a Custom Action during the login flow, store the returned hash in a local state variable, and pass it into the Intercom initialization call. For Supabase: create a Deno Edge Function that does the same computation using the built-in `crypto.subtle.sign()` API. Store the secret in Supabase Secrets (Settings → Edge Functions → Secrets) as `INTERCOM_IDENTITY_SECRET`. This function should be called once per login session, immediately after authentication succeeds, before initializing the Intercom SDK. The returned `user_hash` is not itself a secret — it is specific to this user and changes each time the user logs in with a different session.

1// Firebase Cloud Function: generate Intercom Identity Verification hash
2const functions = require('firebase-functions');
3const crypto = require('crypto');
4
5exports.intercomUserHash = functions.https.onRequest(async (req, res) => {
6  res.set('Access-Control-Allow-Origin', '*');
7  res.set('Access-Control-Allow-Methods', 'POST');
8  res.set('Access-Control-Allow-Headers', 'Content-Type');
9  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
10
11  const IDENTITY_SECRET = process.env.INTERCOM_IDENTITY_SECRET;
12  const { user_identifier } = req.body; // email or user ID
13
14  if (!user_identifier) {
15    res.status(400).json({ error: 'user_identifier is required' });
16    return;
17  }
18
19  try {
20    const hash = crypto
21      .createHmac('sha256', IDENTITY_SECRET)
22      .update(user_identifier)
23      .digest('hex');
24
25    res.status(200).json({ user_hash: hash });
26  } catch (err) {
27    res.status(500).json({ error: err.message });
28  }
29});

With the HMAC function deployed, you can now build the FlutterFlow Custom Action that initializes Intercom and registers the current user's identity. This is the step that links the Messenger conversations to real user accounts in your Intercom dashboard. In FlutterFlow, click Custom Code in the left navigation. Click + Add → Action. Name it 'InitializeIntercom'. In the Dependencies field, add `intercom_flutter` — FlutterFlow will resolve the latest compatible version from pub.dev automatically. Set the return type to void (this action has no return value). Add three parameters to the action: `appId` (String — your Intercom App ID), `userId` (String — the logged-in user's identifier, either email or your system's user ID), and `userHash` (String — the HMAC value returned by your Cloud Function in Step 2). In the Dart code area, write the initialization and user registration calls. The action must: call `await Intercom.instance.initialize(appId, iosBundleId: 'com.your.bundle', androidPackageName: 'com.your.package')` then call `await Intercom.instance.loginIdentifiedUser(userId: userId, userHash: userHash)`. If your identifier is an email, use `loginIdentifiedUser(email: email, userHash: userHash)` instead. IMPORTANT: this Custom Action will NOT run in FlutterFlow's web preview canvas or Run Mode on the browser. Native SDK calls only work in actual device builds. In FlutterFlow, go to Settings → Run & Test and either use a real device connected via Run or generate an APK (Android) or TestFlight build (iOS) to test. Do not spend time trying to debug why it 'does not work' in the browser preview — it is expected behavior. Call this Custom Action in the Action Flow immediately after your login action succeeds (after the Supabase or Firebase Auth sign-in action completes), passing the user's ID/email and the HMAC hash you fetched in the previous step.

1// FlutterFlow Custom Action: initialize Intercom and register user
2// Dependencies: intercom_flutter
3import 'package:intercom_flutter/intercom_flutter.dart';
4
5Future initializeIntercom(
6  String appId,
7  String userId,
8  String userHash,
9) async {
10  // Initialize the Intercom SDK with your app credentials
11  await Intercom.instance.initialize(
12    appId,
13    iosApiKey: 'ios_sdk_key_from_intercom', // from Intercom Settings → Install
14    androidApiKey: 'android_sdk_key_from_intercom', // from Intercom Settings → Install
15  );
16
17  // Register the identified user with Identity Verification
18  // Use loginIdentifiedUser(email: email, ...) if you identify by email instead
19  await Intercom.instance.loginIdentifiedUser(
20    userId: userId,
21    userHash: userHash,
22  );
23
24  // Optionally set user attributes
25  await Intercom.instance.updateUser(
26    IntercomStatusCallback(
27      onSuccess: () => print('Intercom user updated'),
28      onFailure: (error) => print('Intercom update error: $error'),
29    ),
30  );
31}

Once Intercom is initialized and the user is registered, displaying the Messenger is a single SDK call. Create a second Custom Action to open the chat window when the user taps a help or support button. In FlutterFlow, click Custom Code → + Add → Action. Name it 'OpenIntercomMessenger'. Add the same `intercom_flutter` dependency (FlutterFlow will reuse the already-added package). The Dart code is minimal: `await Intercom.instance.displayMessenger();`. Set the return type to void. Now wire this action to a widget in your app. Navigate to any screen where you want the help button — the home screen, a navigation bar, a floating action button, or a specific support screen. Add an icon button or FAB widget. In the widget's Actions panel, click + Add Action → Custom Action → OpenIntercomMessenger. You can also open specific parts of the Intercom interface with other SDK calls: `Intercom.instance.displayHelpCenter()` opens the Help Center article browser, `Intercom.instance.displayMessageComposer(message)` opens the composer pre-filled with a message, and `Intercom.instance.displayConversationsList()` shows all past conversations. Create separate Custom Actions for each of these if your UX requires it. To close the Messenger programmatically (for example, after a certain flow completes), call `Intercom.instance.hideMessenger()` in another Custom Action. This is useful if you want to return the user to a specific screen after they resolve a support conversation. Note: push notification support for Messenger chat replies requires additional native configuration — you must add push notification handling in the iOS AppDelegate and Android Manifest, and register the device token with Intercom via `Intercom.instance.sendTokenToIntercom(token)`. This additional setup is what makes this integration Advanced-rated.

1// FlutterFlow Custom Action: open Intercom Messenger
2// Dependencies: intercom_flutter (already added in previous action)
3import 'package:intercom_flutter/intercom_flutter.dart';
4
5Future openIntercomMessenger() async {
6  await Intercom.instance.displayMessenger();
7}
8
9// Alternative: open the Help Center instead
10Future openIntercomHelpCenter() async {
11  await Intercom.instance.displayHelpCenter();
12}
13
14// Alternative: open with a pre-filled message
15Future openIntercomWithMessage(String message) async {
16  await Intercom.instance.displayMessageComposer(message);
17}

Beyond the Messenger SDK, you may want to sync user data from your app to Intercom (updating custom attributes, logging events) or read conversation data back into your app. Both require the Intercom REST API at `https://api.intercom.io`, accessed via a Bearer access token proxy — because the token is a server secret. Deploy a proxy function (or add routes to the HMAC function from Step 2) that accepts requests from FlutterFlow and forwards them to Intercom with the Bearer token injected. Common operations include: creating or updating contacts (`POST /contacts` or `PATCH /contacts/{id}`), logging custom events for user activity (`POST /events`), and reading conversations for an in-app history screen (`GET /conversations`). In FlutterFlow, create an API Group named 'Intercom REST' pointing to your proxy base URL. Create API Calls for each operation you need: 'Update Contact', 'Log Event', 'Get Conversations'. In the Variables tab, define the relevant fields (user email, event name, conversation ID). Set the Request Body to JSON matching your proxy's expected format. For reading conversations into a FlutterFlow screen, create a 'KlaviyoConversation' Data Type (rename to 'IntercomConversation') with fields: `id` (String), `created_at` (Integer), `subject` (String), `state` (String). In the API Call's Response & Test tab, paste a sample conversation list response from Intercom's API docs and generate JSON Paths. Map `$.conversations[*].id`, `$.conversations[*].created_at`, `$.conversations[*].subject`, and `$.conversations[*].state` to the Data Type fields. If you are building this for the first time and finding the native config (push notifications, HMAC setup, platform keys) overwhelming, RapidDev's team handles FlutterFlow + Intercom integrations including the full native setup, and offers a free scoping call at rapidevelopers.com/contact.

1// Firebase Cloud Function: Intercom REST API proxy
2// Add alongside the HMAC function
3const fetch = require('node-fetch');
4
5exports.intercomProxy = functions.https.onRequest(async (req, res) => {
6  res.set('Access-Control-Allow-Origin', '*');
7  res.set('Access-Control-Allow-Methods', 'GET, POST, PATCH');
8  res.set('Access-Control-Allow-Headers', 'Content-Type');
9  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
10
11  const INTERCOM_TOKEN = process.env.INTERCOM_ACCESS_TOKEN;
12  const { endpoint, method = 'GET', body } = req.body;
13
14  if (!endpoint) { res.status(400).json({ error: 'endpoint required' }); return; }
15
16  try {
17    const intercomRes = await fetch(`https://api.intercom.io${endpoint}`, {
18      method,
19      headers: {
20        'Authorization': `Bearer ${INTERCOM_TOKEN}`,
21        'Accept': 'application/json',
22        'Content-Type': 'application/json',
23        'Intercom-Version': '2.10',
24      },
25      body: body ? JSON.stringify(body) : undefined,
26    });
27    const data = await intercomRes.json();
28    res.status(intercomRes.status).json(data);
29  } catch (err) {
30    res.status(500).json({ error: err.message });
31  }
32});

Without push notifications, users will miss responses from support agents when they leave the Messenger view. Push notification setup for Intercom requires native configuration in both iOS and Android, making this the most complex step of the integration. For iOS, you need to enable Push Notifications in your Apple Developer account's app identifier, generate an APNs key or certificate, and upload it to Intercom (Settings → Integrations → Apple Push Certificate). In FlutterFlow, go to Settings → App Settings → Push Notifications and enable the iOS push notification capability. In your FlutterFlow login flow, after Intercom initializes, add a Custom Action that retrieves the device push token and registers it with Intercom: `await Intercom.instance.sendTokenToIntercom(token)` where `token` is the FCM or APNs token. For Android, Intercom integrates with Firebase Cloud Messaging (FCM). In Intercom Settings → Integrations → Google Firebase, add your FCM Server Key. In your FlutterFlow Firebase setup, ensure push notifications are enabled. Add a Custom Action that registers the FCM token with Intercom after login. For handling notification taps (opening the Messenger when a user taps an Intercom notification from the notification tray), you need additional native code in the iOS AppDelegate.swift and Android MainActivity to intercept the notification payload and call `Intercom.instance.handlePush(message)`. This typically requires FlutterFlow's Custom Files feature to modify the native entry points — a step that requires comfort with native iOS/Android project structure. Given the complexity of push notification setup, test the Messenger SDK and Identity Verification in Steps 1-4 first and confirm those work on device before attempting push notification configuration. The Messenger is fully functional for in-app conversations without push notifications — users who have the app open will see replies in real time via the SDK's WebSocket connection.

1// FlutterFlow Custom Action: register push token with Intercom
2// Call this after initializeIntercom() in your login flow
3// Dependencies: intercom_flutter, firebase_messaging (if using FCM)
4import 'package:intercom_flutter/intercom_flutter.dart';
5import 'package:firebase_messaging/firebase_messaging.dart';
6
7Future registerIntercomPushToken() async {
8  try {
9    // Get FCM token (for Android and iOS FCM path)
10    final fcmToken = await FirebaseMessaging.instance.getToken();
11    if (fcmToken != null) {
12      await Intercom.instance.sendTokenToIntercom(fcmToken);
13      print('Intercom push token registered: $fcmToken');
14    }
15  } catch (e) {
16    // Non-fatal — app still works without push notifications
17    print('Could not register Intercom push token: $e');
18  }
19}