Intercom Messenger

Log into your Intercom workspace and navigate to Settings → Installation. Choose Mobile and select your platform (iOS or Android). You will find three credentials you need: App ID (the same for both platforms), iOS API Key (labeled 'iOS SDK Key'), and Android API Key. Copy all three to a safe place. The iOS and Android API keys are client SDK keys designed to be embedded in mobile apps — they are not secret API keys in the same sense as a backend token, but you should still keep them in your Custom Action parameters rather than hardcoding them as plain strings scattered through your code. Next, open your FlutterFlow project and navigate to the left sidebar. Click Custom Code, then look for the Dependencies section (or go to Settings → App Settings → Pub Dependencies depending on your FlutterFlow version). Click + Add Dependency and type `intercom_flutter`. Enter the latest stable version number — check pub.dev/packages/intercom_flutter for the current version (for example, `4.2.1`). Click Save. FlutterFlow will register this dependency; it will be included in the pubspec.yaml when the project is compiled. You do not need to run `flutter pub get` manually — FlutterFlow handles that during the build process.

1// pubspec.yaml dependency (FlutterFlow adds this for you)
2dependencies:
3  intercom_flutter: ^4.2.1  // check pub.dev for the latest stable version

In the FlutterFlow left nav, click Custom Code → + Add → Action. Name it `initIntercom`. In the code editor, write the Dart function that initializes the Intercom SDK. The function calls `Intercom.instance.initialize()` with three parameters: `appId`, `iosApiKey`, and `androidApiKey`. These should be defined as Action Arguments (function parameters) in FlutterFlow's argument panel so you can pass them from your page without hardcoding values in the Dart file. In the Arguments tab of the Custom Action editor, add three String arguments: `appId`, `iosApiKey`, and `androidApiKey`. Then write the implementation. This action must run before any other Intercom call — call it once at the very start of your app. The best place is on the splash screen or the very first page's On Page Load action, as the final step (or a parallel action) after any other initialization. If your app uses Supabase Auth or Firebase Auth, initialize Intercom after authentication is ready so the SDK starts in an identified or anonymous state correctly. After pasting the code, click Save. FlutterFlow will validate the Dart syntax — fix any red underlines before proceeding.

1// Custom Action: initIntercom
2import 'package:intercom_flutter/intercom_flutter.dart';
3import 'package:flutter/foundation.dart' show defaultTargetPlatform, TargetPlatform;
4
5Future<void> initIntercom(
6  String appId,
7  String iosApiKey,
8  String androidApiKey,
9) async {
10  await Intercom.instance.initialize(
11    appId,
12    iosApiKey: iosApiKey,
13    androidApiKey: androidApiKey,
14  );
15}

After initialization, Intercom needs to know who the current user is so conversations in your Intercom inbox are attributed to real contacts rather than anonymous sessions. Create a second Custom Action named `loginIntercomUser`. Add three String arguments: `userId`, `userEmail`, and optionally `userName`. In the Dart code, call `Intercom.instance.loginIdentifiedUser()` with `userId` and optionally update the user's details with `Intercom.instance.updateUser()`. This action should be called right after the user successfully logs in to your app — place it in the Action Flow Editor on your Login page's On Login Success event, after your auth action (Supabase Login, Firebase Sign In, etc.) completes. If a user logs out, you should also call `Intercom.instance.logout()` — create a third small action `logoutIntercomUser` that does exactly that. Pass the user's real ID and email from your auth system (Supabase user ID, Firebase UID) so Intercom correctly links conversations to contacts in your workspace. Custom attributes (like plan type or onboarding step) can be passed via `Intercom.instance.updateUser(userAttributes: Attributes(customAttributes: {'plan': 'pro'}))` inside this same action if needed.

1// Custom Action: loginIntercomUser
2import 'package:intercom_flutter/intercom_flutter.dart';
3
4Future<void> loginIntercomUser(
5  String userId,
6  String userEmail,
7  String userName,
8) async {
9  await Intercom.instance.loginIdentifiedUser(
10    userId: userId,
11  );
12  await Intercom.instance.updateUser(
13    email: userEmail,
14    name: userName,
15  );
16}
17
18// Companion action: logoutIntercomUser
19Future<void> logoutIntercomUser() async {
20  await Intercom.instance.logout();
21}

The third and final Custom Action is the simplest: `showMessenger`. It calls `Intercom.instance.displayMessenger()`, which opens the Intercom chat overlay. Create the Custom Action with no arguments and paste the one-liner implementation. Once saved, go to the page or widget where you want the support button to live. A common pattern is a floating action button (FAB) on the home screen or a 'Get help' TextButton in an app drawer. Click on the button widget, open its Actions panel on the right side of FlutterFlow, click + Add Action, and select Custom Action → showMessenger. That is the entire configuration — one action, no parameters. To also close the Messenger programmatically (for example, if your app needs to redirect away), you can create a fourth action `hideMessenger` that calls `Intercom.instance.hideMessenger()`. You can optionally add an unread message badge to your support button by reading `Intercom.instance.unreadConversationCount()` in a Custom Function and binding the result to a badge widget on the button — this gives users a visual cue that your support team has replied.

1// Custom Action: showMessenger
2import 'package:intercom_flutter/intercom_flutter.dart';
3
4Future<void> showMessenger() async {
5  await Intercom.instance.displayMessenger();
6}
7
8// Optional: Custom Function to get unread count
9import 'package:intercom_flutter/intercom_flutter.dart';
10
11Future<int> getIntercomUnreadCount() async {
12  return await Intercom.instance.unreadConversationCount();
13}

Custom Actions using native SDKs like `intercom_flutter` do not run inside FlutterFlow's browser-based Run mode or the in-browser Preview panel. When you click the support button in web preview, nothing will happen and you will not see an error — the action simply silences itself when the native bridge is unavailable. To test the real Messenger, you have two options: use FlutterFlow's Test Mode on a connected physical device (Settings → Test Mode → select your connected device), or download the project source code and build it locally with Xcode or Android Studio. If you are using FlutterFlow's Test Mode, connect your phone via USB, enable developer mode and USB debugging, and select the device in FlutterFlow. Tap your support button in the app running on the device — you should see the Intercom Messenger slide up as a native overlay. For iOS builds, verify that the Info.plist includes usage descriptions for camera and photo library if you plan to allow file sharing in chat (Intercom's Messenger can share attachments). For Android, confirm the minSdkVersion in your FlutterFlow project's Android settings is compatible with the `intercom_flutter` package requirements (check the package's README on pub.dev). If you receive a MissingPluginException, rebuild the app from scratch — sometimes Hot Reload does not register new native plugins; a full rebuild is required.