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 :

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


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

@required this.tag,
@required this.child,

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

library javascript_bundler;

import 'package:js/js.dart';

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

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


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

Snap on WSL2 ubuntu

Inline SVG System in WordPress (or PHP) Development

SVG Icons

Popular and Easy Debugging Techniques for Python Applications

C Program to Add Two Numbers

Viaplay (Iceland) Total ⋆ 03 Months Warranty

Why are we using stNEAR for the upcoming $META IDO?

Configuring Hadoop and Starting Cluster services using Automation

Make. It. Simple. Linux Desktop Usability — Part 5

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

A Tale of Three (Flutter) Trees

Understanding different types of dependencies used in a Flutter project

[Solved] The argument type ‘Null Function(DataSnapshot)’ can’t be assigned to the parameter type…

Is Flutter The Future Of Web