Intercom Product Onboarding with Flutter

Flutter uses an flt-glass-plane to render the app and it is not possible to point to elements on the page out of the box to integrate the Intercom Product onboarding.

It is possible to setup an html div element on flutter web and use it to point to where you want the in product onboarding to happen. As an example we want to point to the profile dropdown so we add an attribute {‘data-intercom-target’: ‘Profile Dropdown’}

import 'dart:html' as html;
import 'dart:ui' as ui;

final divElement = html.DivElement()
  ..attributes = {'data-intercom-target': 'Profile Dropdown'};
// ignore: undefined_prefixed_name, avoid_dynamic_calls
ui.platformViewRegistry.registerViewFactory(
  'profile-drop-down',
      (_) => divElement,
);

Then you can add an element next to wherever you want intercom to point to. For example:

const SizedBox(
  height: 1,
  width: 1,
  child: HtmlElementView(viewType: 'profile-drop-down'),),

In this example the target is Profile Dropdown so we use
[data-intercom-target = ‘Profile Dropdown’] as the selector.