16
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

LINEとSalesforceを連携させてカスタマーセンターの有人対応/無人対応を切り替えてみた

Last updated at Posted at 2019-04-02

◆一体何を作ったの?

  • SalesforceのLiveAgentでの対応で、有人/無人を切り替えられるか試してみました。
    • 初めはHeroku上のbotで対応、必要に応じてLiveAgent経由で有人につなぐ
    • ひとまずカスタマのLINEとオペレータのLiveAgentでやり取りできるようにする
      01.png

◆Live Agentの準備

まずはLiveAgentでチャットできるようにしてみた。
※事前にClassicモードに切り替えておくこと!

1. Live Agentの設定

  • ① Salesforceの設定画面へ移動

  • ②「設定」の「カスタマイズ」から「Live Agentの基本設定」ページに遷移し、「Live Agentを有効化」をチェック
    02.png
    03.png

  • ③Live Agentが使えるようユーザの権限を設定

    • プロファイルは「システム管理者」
    • 「Service Cloud ユーザ」「Live Agent ユーザ」にチェックを入れる
      04.png
  • ④Live Agentの設定

    • 「Live Agentの設定」

      • 「新規」から新規作成し、「Live Agentの設定名」「API参照名」を設定
      • 「選択可能なユーザ」からLive Agentで応対させるユーザを「選択済みのユーザ」に追加する。
        05.png
    • 「スキル」

      • 名前、API参照名を入力
      • スキルを割り当てるユーザを設定
        06.png
    • 「リリース」

      • リリース名、API参照名を設定
      • 「チャットウィンドウタイトル」は好きな名前を入れる
        07.png
    • 「[チャット]ボタン及び自動招待」

      • 種別は「チャット」ボタン、名前とAPI参照名を設定する。言語は「日本語」を選択
      • ルーティング種別は「選択肢」、設定したいスキルを選択する。
      • チャットボタンのカスタマイズでチャット画面のポップアップボタンを表示させたいサイト、オペレータがオンライン/オフライン時のボタン画像を設定する。
        • サイトは、設定→「サイト」→「Visualforceページ」から作成する。(次章で解説)
          08.png

2. クライアント側のページ作成

  • クライアント用のページはSalesforceの「サイト」→「Visualforceページ」から作成できる。

    • force.comドメインのURLが払い出される。
  • 指定のHTMLを埋め込むことでVisualforceページ以外の方法(AWS S3・GitHub Pages・Heroku等)で作成した自前のサイトでも利用できる。

    • クライアント用ページのサンプルコード
      • 「リリース」、「チャットボタンおよび自動招待」のページにあるコードを指定の場所に貼り付ける
<!DOCTYPE html>
<html>
	<head>
		<!-- 「リリース」の「リリースコード」を貼り付け -->
		<title>わいわいお客様相談室</title>
	</head>
	<body>
		<!-- 「[チャット] ボタンおよび自動招待」の「[チャット] ボタンのコード」を貼り付け -->
		<br/>
		↑チャット問い合わせはこちらから↑
		<br/>
		<a href="index.html">TOPへ</a>
	</body>
</html>

3. コンソールアプリケーションの設定

  • サンプルコンソールを有効化

    • 「ユーザ管理」→「プロファイル」から、システム管理者のプロファイルの「サンプルコンソール (standard__ServiceConsole)」にチェックを入れる
  • 設定の「アプリケーション」からサンプルコンソールを選択し、「コピー」をクリックして新しくコンソールアプリケーションを作成(名前は任意でOK)
    09.png

  • 「このアプリケーションに Live Agent を含める」にチェックを入れ、チャットワークスペースオプションとして「新規ケース」をチェックする
    10.png

4. コンソール側からチャット画面起動(オペレータ)

  • 右上メニューから作成したコンソールアプリケーションを起動
    11.png

  • 右下「Live Agent」ボタンをクリックしてチャット画面を起動させる。オフラインの場合はオンラインに切り替える。
    12.png

5. クライアント側からチャット起動(カスタマ)

  • 作成したクライアントページのボタンをクリックし、チャット画面を起動させる。
  • オペレータ側で「承諾」をすれば会話が可能となる。
    13.png

◆LINEとLive Agentチャットの連携

1. 準備

  • 以下のサンプルアプリを参考にさせていただいた。
  • 「Deploy to Heroku」と書かれたHeroku Buttonを使用することで、デフォルト設定で使用可能になる
    • 必要なパラメータ(LINEアクセストークン等)を設定する
      • LINE_CHANNEL_ACCESS_TOKEN(LINEのアクセストークン)

        • LINE Developerから連携させたいチャネルのアクセストークンを取得
      • LIVEAGENT_API_VERSION

      • LIVEAGENT_BUTTON_ID

        • 「チャット」ボタンのIDを入力する
      • LIVEAGENT_DEPLOYMENT_ID

        • LiveAgentのリリースIDを入力する
      • LIVEAGENT_ORGANIZATION_ID

        • LiveAgentの組織IDを入力する
      • LIVEAGENT_POD

        • LiveAgentのREST APIのエンドポイントを入力する(ホストのみ)

2. リポジトリからcloneする

  • 土台となるherokuアプリを新規作成
$ heroku create アプリ名
  • サンプルアプリのソースをcloneする。
$ git clone https://github.com/hrk623/line-with-salesforce-sample.git アプリ名
  • cloneしてきたソースとHerokuアプリを紐づける
$ cd アプリ名
$ heroku git:remote -a アプリ名
  • これでGitを使ってHerokuにデプロイできるようになった
  • その他コードの編集はローカルで行う

3. デプロイ

  • ファイルの変更をcommitしてHeroku上にpushする。
$ git add .
$ git commit
(コミットメッセージを編集)

$ git push heroku master
  • これでデプロイ完了

◆実行

  • カスタマが定型文をLINEで送信するとbotが反応

    • botでは対応できない場合は有人に切り替えることも可
      chat_1.png
  • カスタマのLINE⇔オペレータのLiveAgentで直接応対ができる

    • カスタマ側
      chat_2.png

    • オペレータ側
      liveagent_ope.png

  • 応対が終了すると、LINEに通知される
    chat_3.png

◆参考URL

16
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?