Web support

[oliviercperrier]

Does this config plugin supports expo web?

Thanks

[cmaycumber]

Not currently, if it's helpful I can share the code we've used to make web work on our own app.

[oliviercperrier]

Not currently, if it's helpful I can share the code we've used to make web work on our own app.

Would be awesome. Thanks

[saurabhg138]

@cmaycumber is there any timeline for this issue? or is there any alternative that you can share

[ansh]

@cmaycumber Can you share how you made this work on your own app?

[cmaycumber]

Here’s how we handled it:

These were inside a folder called Intercom

index.ts:

export { Intercom } from './intercom';

intercom.ts

import { config } from '@horizons/config';

import { IntercomMethods } from '../../types';

declare global {
  interface Window {
    Intercom: any;
    intercomSettings: any;
  }
}

/*
|--------------------------------------------------------------------------
| START MAIN
|--------------------------------------------------------------------------
*/
/** Extract the native version of Intercom */
export const Intercom: IntercomMethods = {
  show: () => {
    window?.Intercom?.('show');
  },
  showLauncher: (show: boolean = true) => {
    window.intercomSettings.hide_default_launcher = !show;
    window?.Intercom?.('boot', window.intercomSettings);
  },
  identify: ({ userId, traits }) => {
    if (userId) {
      window.intercomSettings = {
        ...window.intercomSettings,
        user_id: userId,
        ...traits,
      };
      window?.Intercom?.('boot', window.intercomSettings);
    }
  },
  signOut: () => {
    window.intercomSettings = {
      app_id: config.intercom.appId,
      hide_default_launcher: window.intercomSettings.hide_default_launcher,
    };

    // Kill and reboot intercom
    window?.Intercom?.('shutdown');
    window?.Intercom?.('boot', window.intercomSettings);
  },
  trackEvent: (name) => {
    window?.Intercom?.('trackEvent', name);
  },
  onUnreadCountChange: (func) => {
    return window?.Intercom?.('onUnreadCountChange', func);
  },
};
/*
|--------------------------------------------------------------------------
| END MAIN
|--------------------------------------------------------------------------
*/

intercom.native.ts

import NativeIntercom, { IntercomEvents } from '@intercom/intercom-react-native';

import { IntercomMethods } from '../../types';

/*
|--------------------------------------------------------------------------
| START MAIN
|--------------------------------------------------------------------------
*/
/** Extract the native version of Intercom */
export const Intercom: IntercomMethods = {
  show: () => {
    NativeIntercom.displayMessenger();
  },
  identify: ({ userId, traits }) => {
    if (userId) {
      NativeIntercom.registerIdentifiedUser?.({ email: traits?.email, userId });
      NativeIntercom.updateUser?.({
        userId,
        ...traits,
      });
    }
  },
  signOut: () => {
    NativeIntercom.logout();
    NativeIntercom.registerUnidentifiedUser();
  },
  trackEvent: (name) => {
    NativeIntercom.logEvent(name);
  },
  onUnreadCountChange: (func) => {
    const countListener = NativeIntercom.addEventListener(
      IntercomEvents.IntercomUnreadCountDidChange,
      (response) => {
        func(response.count as number);
      }
    );

    return countListener;
  },
};
/*
|--------------------------------------------------------------------------
| END MAIN
|--------------------------------------------------------------------------
*/

Basically the gist here is create functions that map the corresponding native or web functionality you’re looking for to that platform!

Sorry for the wait! Haven’t been working with Intercom in awhile!

[cmaycumber]

@oliviercperrier @oliviercperrier @ansh