React SPAにIntercomのチャットウィジェットをつける

最近作るダッシュボードに、こういうのよくつけてます。

どのページからヘルプ来てるかもわかったりして、便利です。

で、このウィジェットをReactに埋め込むときは、react-intercomというライブラリを使ってます。

インストール

npm i react-intercom --save

使い方

intercomのウィジェットに投げたい値をオブジェクトでぶん投げる形です。
appIDは自分のものに変えましょう。

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>
    );
  }
}

こんな感じで送った情報を元によしなにしてくれるので、便利です。

ログインしないページの場合

こんな感じで、情報がないやつは送らないようにしておけばいいかなと思います。
userのオブジェクトが空でも、intercomがよしなにやってくれます。

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

export class App extends React.Component {

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

    const user = {}
    if (Object.keys(appUser).length !== 0) {
      if (appUser.id) user.user_id = appUser.id
      if (appUser.email) user.email = appUser.email
      if (appUser.name) user.name = appUser.name
    }

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