プログラミング学習やフリーランスエンジニア情報を発信していきます。現役フリーランスエンジニア2人で運営してます!

  1. フロントエンド

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

最終更新日:2018/06/16

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は機能盛りだくさんなのでただいま研究中です。

The following two tabs change content below.

riri

25歳。 Twitter:りリー@ryudoi1 フリーランスとして働きながら、WINDII(ウィンディ)ではテックメディア事業や、受託事業を行なっています! フリーランスになるまでの過程は こちら

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP