Integrate Intercom on Flutter web and show only on specific pages

Photo by Scott Graham on Unsplash

Recently I had to integrate Intercom to web app being built with Flutter. Integration was really easy as I just had to place the script provided by Intercom on index.html(web folder).

Integration Guide : https://developers.intercom.com/installing-intercom/docs/basic-javascript#section-how-to-install

Show Intercom chat on some specific screens only

Integration was easy and working perfectly. But what if we need to show Intercom chat on some specific screens only? As Flutter web is single page application, it is not possible to executing script based on current page (like multi-page web application).

I found a workaround for this by showing or hiding the Intercom based on visible widget. For this we need couple of packages. js to call JavaScript method from dart and visibility_detector to detect if widget (that we want to show intercom) is visible or not.

First we need to hide Intercom to default, for that just update your intercom integration script like this

// index.html
..................................
window.intercomSettings = {
    app_id: APP_ID,
    hide_default_launcher: true,
};
..................................

Also add method to toggle visibility of Intercom

// index.html
..................................
function showHideIntercom(show){
    Intercom('update', {
       hide_default_launcher: !show
     });
}
..................................

Now create a reusable widget which can be used to show widget with Intercom

//intercom.dart
//imports

class Intercom extends StatelessWidget {
  final String tag;
  final Widget child;

  Intercom({
    @required this.tag,
    @required this.child,
  });

  @override
  Widget build(BuildContext context) {
    return kIsWeb
        ? VisibilityDetector(
            key: Key(tag),
            onVisibilityChanged: (info) =>
                showHideIntercom(info.visibleFraction > 0),
            child: child,
          )
        : child;
  }
}

Where does showHideIntercom come from?

Lets create two files with the following contents:

//stud_bundler.dart
void showHideIntercom(bool show) {}

And another file

//javascript_bundler.dart
@JS()
library javascript_bundler;

import 'package:js/js.dart';

@JS('showHideIntercom')
external void showHideIntercom(bool show);

Now import bundler file on intercom.dart like

import 'package:flutter_web_intercom_sample/bundler/stud_bundler.dart'
    if (dart.library.js) 'package:flutter_web_intercom_sample/bundler/javascript_bundler.dart';

Here stud_bundler exposes dummy implementation for Native platforms (Android & iOS) while javascript_bundler has actual implementation for web.

Now whenever you want to show Intercom on specific widget

Intercom(
    tag: "intercom-101",
    child: YourWidget()
);

Done!

If you missed something no problem! Here is the sample project repository.

sharmadhiraj/flutter_web_intercom_sample

As always support and feedback are highly welcomed! Thanks for reading!