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

# ◆一体何を作ったの？
* SalesforceのLiveAgentでの対応で、有人／無人を切り替えられるか試してみました。
    * 初めはHeroku上のbotで対応、必要に応じてLiveAgent経由で有人につなぐ
    * ひとまずカスタマのLINEとオペレータのLiveAgentでやり取りできるようにする  
![01.png](https://qiita-image-store.s3.amazonaws.com/0/372054/d4d8a774-3af1-e7ef-f6c0-ae2919c6790f.png)

# ◆Live Agentの準備
まずはLiveAgentでチャットできるようにしてみた。  
※事前にClassicモードに切り替えておくこと！

## 1. Live Agentの設定

* ① Salesforceの設定画面へ移動
* ②「設定」の「カスタマイズ」から「Live Agentの基本設定」ページに遷移し、「Live Agentを有効化」をチェック  
![02.png](https://qiita-image-store.s3.amazonaws.com/0/372054/21d2ec11-50fc-8fd0-8f6b-652fa7220051.png)  
![03.png](https://qiita-image-store.s3.amazonaws.com/0/372054/43da1b80-d353-95fb-5971-6c3eb270c1ee.png)


* ③Live Agentが使えるようユーザの権限を設定
    * プロファイルは「システム管理者」
    * 「Service Cloud ユーザ」「Live Agent ユーザ」にチェックを入れる  
![04.png](https://qiita-image-store.s3.amazonaws.com/0/372054/90a62164-bc1e-19dd-ab97-14151f05cd7c.png)


* ④Live Agentの設定
    * 「Live Agentの設定」
        * 「新規」から新規作成し、「Live Agentの設定名」「API参照名」を設定
        * 「選択可能なユーザ」からLive Agentで応対させるユーザを「選択済みのユーザ」に追加する。  
![05.png](https://qiita-image-store.s3.amazonaws.com/0/372054/93610d97-9161-7a45-d252-986b2e3836fe.png)

    * 「スキル」
        * 名前、API参照名を入力
        * スキルを割り当てるユーザを設定  
![06.png](https://qiita-image-store.s3.amazonaws.com/0/372054/7b674e60-63f9-32c1-5527-6c12020edfda.png)

    *  「リリース」
        *  リリース名、API参照名を設定
        *  「チャットウィンドウタイトル」は好きな名前を入れる  
![07.png](https://qiita-image-store.s3.amazonaws.com/0/372054/f6904ad5-d2ee-986b-d698-fc6bfee50295.png)

    * 「[チャット]ボタン及び自動招待」
        * 種別は「チャット」ボタン、名前とAPI参照名を設定する。言語は「日本語」を選択
        * ルーティング種別は「選択肢」、設定したいスキルを選択する。
        * チャットボタンのカスタマイズでチャット画面のポップアップボタンを表示させたいサイト、オペレータがオンライン／オフライン時のボタン画像を設定する。
            * サイトは、設定→「サイト」→「Visualforceページ」から作成する。（次章で解説）  
![08.png](https://qiita-image-store.s3.amazonaws.com/0/372054/0a44b866-982c-efa8-523a-7bc3030ebf8b.png)


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

* クライアント用のページはSalesforceの「サイト」→「Visualforceページ」から作成できる。
   * force.comドメインのURLが払い出される。

* 指定のHTMLを埋め込むことでVisualforceページ以外の方法（AWS S3・GitHub Pages・Heroku等）で作成した自前のサイトでも利用できる。
    * クライアント用ページのサンプルコード
        * 「リリース」、「チャットボタンおよび自動招待」のページにあるコードを指定の場所に貼り付ける

```html
<!DOCTYPE html>
<html>
	<head>
		<!-- 「リリース」の「リリースコード」を貼り付け -->
		<title>わいわいお客様相談室</title>
	</head>
	<body>
		<!-- 「[チャット] ボタンおよび自動招待」の「[チャット] ボタンのコード」を貼り付け -->
		<br/>
		↑チャット問い合わせはこちらから↑
		<br/>
		<a href="index.html">TOPへ</a>
	</body>
</html>
```

## 3. コンソールアプリケーションの設定
* サンプルコンソールを有効化
    * 「ユーザ管理」→「プロファイル」から、システム管理者のプロファイルの「サンプルコンソール (standard__ServiceConsole)」にチェックを入れる
* 設定の「アプリケーション」からサンプルコンソールを選択し、「コピー」をクリックして新しくコンソールアプリケーションを作成（名前は任意でOK）  
![09.png](https://qiita-image-store.s3.amazonaws.com/0/372054/c1069616-4d0b-d39f-a8a5-9158d2a10ca4.png)

* 「このアプリケーションに Live Agent を含める」にチェックを入れ、チャットワークスペースオプションとして「新規ケース」をチェックする  
![10.png](https://qiita-image-store.s3.amazonaws.com/0/372054/30be3217-ba76-1bd1-c8f4-24a331b82051.png)

## 4. コンソール側からチャット画面起動（オペレータ）
* 右上メニューから作成したコンソールアプリケーションを起動  
![11.png](https://qiita-image-store.s3.amazonaws.com/0/372054/a2da0ef5-4129-ac87-9d7e-be2e415204b3.png)

* 右下「Live Agent」ボタンをクリックしてチャット画面を起動させる。オフラインの場合はオンラインに切り替える。  
![12.png](https://qiita-image-store.s3.amazonaws.com/0/372054/bd2c8838-b705-e686-ad94-f8d9575650b8.png)

## 5. クライアント側からチャット起動（カスタマ）
* 作成したクライアントページのボタンをクリックし、チャット画面を起動させる。
* オペレータ側で「承諾」をすれば会話が可能となる。  
![13.png](https://qiita-image-store.s3.amazonaws.com/0/372054/2a9fc2f4-2275-fee0-2cca-e7ab6025f1ca.png)


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

## 1. 準備

* 以下のサンプルアプリを参考にさせていただいた。
    * [GitHub - hrk623/line-with-salesforce-sample: Line の Messaging API と Liveagent チャットや Einstein Platform をつなぐ Heroku のサンプルアプリです。](https://github.com/hrk623/line-with-salesforce-sample)
* 「Deploy to Heroku」と書かれたHeroku Buttonを使用することで、デフォルト設定で使用可能になる
    * 必要なパラメータ（LINEアクセストークン等）を設定する
        * LINE_CHANNEL_ACCESS_TOKEN（LINEのアクセストークン）
            * LINE Developerから連携させたいチャネルのアクセストークンを取得
        * LIVEAGENT_API_VERSION
            * SalesforceのLiveAgent APIのバージョンを入力する。
            * [Live Agent REST API 開発者ガイド](https://developer.salesforce.com/docs/atlas.ja-jp.live_agent_rest.meta/live_agent_rest/live_agent_rest_understanding_resources.htm)にてバージョンを確認  
![rest.png](https://qiita-image-store.s3.amazonaws.com/0/372054/5b8d394e-871a-8a3c-9e7c-e00b9d9ba289.png)

        * 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](https://qiita-image-store.s3.amazonaws.com/0/372054/c03df054-134a-1c81-55f2-e99865480f10.png)

* カスタマのLINE⇔オペレータのLiveAgentで直接応対ができる
    * カスタマ側  
![chat_2.png](https://qiita-image-store.s3.amazonaws.com/0/372054/175846fc-57d4-5ebf-6d0f-0de70bf5449f.png)

    * オペレータ側  
![liveagent_ope.png](https://qiita-image-store.s3.amazonaws.com/0/372054/7fa4ba8a-d455-f84c-ab32-83f59a8821c1.png)

* 応対が終了すると、LINEに通知される  
![chat_3.png](https://qiita-image-store.s3.amazonaws.com/0/372054/58340d89-a358-96da-b4c9-3daed724e7aa.png)


# ◆参考URL
* [Live Agent REST API 開発者ガイド](https://developer.salesforce.com/docs/atlas.ja-jp.live_agent_rest.meta/live_agent_rest/live_agent_rest_understanding_resources.htm)
* [[Salesforce]LiveAgent(ServiceCloud)](http://deferloader.blog.uhuru.co.jp/?p=3016)
* [GitHub - hrk623/line-with-salesforce-sample: Line の Messaging API と Liveagent チャットや Einstein Platform をつなぐ Heroku のサンプルアプリです。](https://github.com/hrk623/line-with-salesforce-sample)