Reactのプロジェクトにintercomを導入する

フロントエンド
946 view

Reactのプロジェクトにintercomを導入する

最終更新日:2018/06/16

intercomってカスタマーサポート必要なサービスのデファクトスタンダードになってるのに、情報少なすぎません？？今回はreactプロジェクトにintercomを導入する方法です。ついでに匿名ユーザがサイト再訪時にチャットの記録が残った状態にする方法も。

アプリケーションの作成
react-intercomのインストール
コンポーネントの配置
匿名ユーザ（非ログインユーザ）のチャット履歴を残す

アプリケーションの作成

create-react-app intercom-app

react-intercomのインストール

react-intercom

npm i react-intercom --save

コンポーネントの配置

IntercomコンポーネントのappIDのところには自分のintercomのidを入れてください。

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="XXXXXXXX" { ...user } />
      </div>
    );
  }
}

これだけです！ログインユーザの場合はuser情報を渡し、非ログインユーザの場合は空にしておけばいい感じにやってくれます。

匿名ユーザ（非ログインユーザ）のチャット履歴を残す

非ログインユーザが一度サイトを閉じて後々戻ってきた時にチャットの内容が残っている方がいい場合があります。これをshortidとcookieを使って実現してみましょう！

shortidとは

ショートUUIDをジェネレート出来るjavascript製ライブラリ

UUIDとは128bit長の16進数で表記された、理論上重複しない識別子のことです。なぜ重複しないかはググってくださいませ。

実装方針

ユーザがログインしていない場合cookieからshortidを探してなかったらshortidを新規発行してcookieに保存する。この値をintercomのuser_idとすることで匿名ユーザを識別する。 *UUIDは長すぎてintercomのuser_idの文字数制限に引っかかってしまったのでshortidを使うことにしました。

react-cookieのインストール

npm install react-cookie --save

続いてreact-cookieの設定をしていきます。
index.js

import React from 'react';
import App from './App';
import { CookiesProvider } from 'react-cookie';

export default function Root() {
  return (
    <CookiesProvider>
      <App />
    </CookiesProvider>
  );
}

shortidのインストール

npm install shortid --save

以下が先ほどの実装です。

// App.jsx
import React, { Component } from 'react';
import { instanceOf } from 'prop-types';
import { withCookies, Cookies } from 'react-cookie';


class App extends Component {
  static propTypes = {
    cookies: instanceOf(Cookies).isRequired
  };

  constructor() {
    super();
    this.state = {
      shortid: ''
    }
  }
  componentWillMount() {
    const { cookies } = this.props;
    const shortid = cookies.get('shortid') || '';
    this.setState({shortid});
    if(!shortid) {
      const shortid = require('shortid').generate();
      cookies.set('shortid', shortid);
      this.setState({ shortid });
    }
  }
  render() {
    const { appUser } = this.props;
    const user = {
      user_id: this.state.shortid,
      name: '匿名ユーザ'
    }

    return (
      <div>
        <Intercom appID={'XXXXXXXXXXXXXXXX'} { ...user } />
      </div>
    );
  }
}

export default withCookies(App);

intercomは機能盛りだくさんなのでただいま研究中です。

この記事を書いた人
最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

WINDIIテック