react-intercomを使うと、React SPAにIntercomのウィジェットを簡単に追加できます。

import React from 'react';
import Intercom from 'react-intercom';

export class App extends React.Component {

  render () {
    const { appUser } = this.props;

    const user = {
      user_id: appUser.id,
      email: appUser.email,
      name: appUser.name
    };

    return (
      <div className="app">
        <Intercom appID="az33rewf" { ...user } />
      </div>
    );
  }
}

ただ、場合によってはIntercomに追加の情報を送りたい場合があります。

設定更新する場合は、IntercomAPIを利用する

Intercomのドキュメントに記載されているIntercomを利用しようとすると、Reactのコンポーネント名と同じなのでエラーになります。
react-intercomではIntercomAPIを使うことで設定を更新できます。

import React, { IntercomAPI } from 'react';
import Intercom from 'react-intercom';

export class App extends React.Component {
  componentWillUnmount() {
    IntercomAPI('trackEvent', 'unmount');
  }
  render () {
    const { appUser } = this.props;

    const user = {
      user_id: appUser.id,
      email: appUser.email,
      name: appUser.name
    };

    return (
      <div className="app">
        <Intercom appID="az33rewf" { ...user } />
      </div>
    );
  }
}