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.dartvoid 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.

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

--

--

--

Developer Android, Flutter

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Building a basic Review App using Sinatra

The application process for AirCampus job guarantee pay after placement courses?

Optimizing Bugs Fix Policy

Learning Go: Part 3 — Functions

API Integration: The Top API Benefits for your Business

Python tuple vs. named tuple vs. dictionary

8 best python developers

Hints for prompt engineering

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dhiraj Sharma

Dhiraj Sharma

Developer Android, Flutter

More from Medium

CERTIFICATE_VERIFY_FAILED error while performing a POST request in Flutter

One More Step for Flutter Phone Auth in Production: Play App Signing

4 Tips to Ace Your Flutter App Development

Flutter UI tips: Dynamically adjust BottomSheet height to fit content