Intercom Plugin for Flutter

Intercom Flutter Plugin

Hi everyone!

Today I'll talk about Flutter plugin for Intercom. But what is Intercom? Intercom is a communication platform for working with clients. Includes a set of integrated products for each team, including sales, marketing, products, and support. Intercom mechanisms allow you have conversations with your customers, send rich outbound messages, show your Help Center, and track events.

At the moment Intercom officially support next their SDK and plugins:

• Web

• iOS

• Android

• React Native

• Cordova & Phonegap

That's why, it was decided to create its own Flutter wrapper for Intercom. Next, I'll talk about integrating this plugin into your project and show you a demo app.

Example of using Intercom Plugin for Flutter

For your convenience, we have also added example of working project. Feel free to review it in our repository.

Intercom Flutter Plugin

Installation

Step 1 — Adding references to Intercom

If you’re new to Intercom, you’ll need to create an account and start your free trial.

Android

Permissions

You will need to include the READ_EXTERNAL_STORAGE permission if you have enabled image attachments:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

You can also include VIBRATE to enable vibration in push notifications:

<uses-permission android:name="android.permission.VIBRATE"/>

iOS

Update Info.plist

Photo Library usage: Add a "Privacy - Photo Library Usage Description" entry to your Info.plist.

This is required by Apple for all apps that access the photo library. It is necessary when installing Intercom due to the image upload functionality. Users will be prompted for the photo library permission only when they tap the image upload button.

Step 2 - Initialize Intercom

First, you'll need to get your Intercom app ID and API key. Android API key is required if you want to use Intercom in Android. iOS API key is required if you want to use Intercom in iOS.

Flutter

Before using Intercom Flutter plugin, you need to add next dependency in your package's pubspec.yaml:

dependencies:
  intercom_flutter_plugin: ^1.0.0

In your lib/main.dart file, import package:intercom_flutter_plugin/intercom_flutter_plugin.dart and use the methods in Intercom class. Then, initialize Intercom in your lib/main.dart file:

Example:

import 'package:flutter/material.dart';
import 'package:intercom_flutter_plugin/intercom_flutter_plugin.dart';

void main() async {
    // initialize the flutter binding.
    WidgetsFlutterBinding.ensureInitialized();

    // initialize the Intercom.
    // make sure to add keys from your Intercom workspace.
    await Intercom.instance.initialize(
      appId: 'appIdHere',
      androidApiKey: 'androidKeyHere',
      iosApiKey: 'iosKeyHere',
    );
    runApp(App());
}

Step 3 - Create an user and display messenger

Finally, you’ll need to create a user, like this:

class App extends StatelessWidget {
    const App({super.key});
  
    @override
    Widget build(BuildContext context) {
        return ElevatedButton(
            child: Text('Open Intercom'),
            onPressed: () async {
                // messenger will load the messages only if the
                // user is registered in Intercom.
                await Intercom.instance.loginIdentifiedWithEmail(
                    email: 'example@test.com'
                );
                await Intercom.instance.displayMessenger();
            },
        );
    }
}

Available methods:

Future<void> initialize({
  required String appId,
  String? androidApiKey,
  String? iosApiKey
});
Future<void> loginIdentifiedWithUserId({
  required String userId,
  IntercomStatusCallback? statusCallback
});
Future<void> loginIdentifiedWithEmail({
  required String email,
  IntercomStatusCallback? statusCallback
});
Future<void> loginIdentifiedUser({
  required String userId,
  required String email,
  IntercomStatusCallback? statusCallback
});
Future<void> loginUnidentifiedUser({
  IntercomStatusCallback? statusCallback
});
Future<void> logEvent(
  String name,
  [Map<String, Object?>? metaData]
);
Future<void> setInAppMessagesVisibility(
  IntercomVisibility visibility
);
Future<void> setLauncherVisibility(
  IntercomVisibility visibility
);
Future<void> displayHelpCenterCollections(
  List<String> collectionIds
);
Future<void> logout();
Future<int> unreadConversationCount();
Stream<int> getUnreadStream();
Future<void> setUserHash(String userHash);
Future<void> displayMessenger();
Future<void> hideMessenger();
Future<void> displayHelpCenter();
Future<void> displayMessages();
Future<void> sendTokenToIntercom(String token);
Future<void> handlePushMessage();
Future<void> displayMessageComposer(String message);
Future<bool> isIntercomPush(Map<String, String> message);
Future<void> handlePush(Map<String, String> message);
Future<void> setBottomPadding(int padding);
Future<void> displayArticle(String articleId);
Future<void> displayCarousel(String carouselId);
Future<void> displaySurvey(String surveyId);

That’s it - now you’ve got a working Intercom app. However, you’ll need to register your users before you can talk to them and track their activity in your app.

For more details, see Intercom for Android or Intercom for iOS.