【AWS】【Salesforce】CTIフローのCTI Actionでオペレータが見ている画面を転送する

#1.概要
どうも、ARIの名古屋支社に勤務している愛知県民です♪
(/・ω・)/

**CTI Adapterの機能の一つであるCTIフローを使用して、
オペレータが見ている画面を転送することができたので、その方法をまとめました。**
（今のところ、1画面のみの転送となります。）

CTIフローについて勉強中の方の参考になれば幸いです。

最後に、この記事が面白いと思った方はLGTM、ストックしていただけると励みになります♪
(*^^)v

#2.はじめに
#2.1.CTI Adapterとは
AmazonConnectとSalesforceを連携させる際に使用するクラウドサービスのことです。
（厳密にはAWSのサービスです。）

CTI Adapterを使用することで、Salesforceのコンソールからソフトフォンを開いたり、
着信時にSalesforceの取引先責任者をポップアップしたりすることができます。

#2.2.CTIフローとは
CTIフローとはCTI Adapterの機能の1つで、
ボタンのクリックや着信をトリガーとして特定のレコードを作成したり、
ポップアップを表示したりすることができます。
（Salesforce内のコンタクトフロー的なものという認識です。）

ちなみに、他のCTI Adapterの機能としては以下の3種類があります。

* Attributes
* Presence Sync Rules
* Features

#3.前提条件
以下に前提条件を示します。

* AmazonConnectにてインバウンドフローが作成済であること
* AmazonConnectにて転送フローが作成済であること
* CTI Adapterのインストールが完了していること

※インバウンドフロー、転送フローに特別な設定は必要ありません
※本記事におけるCTI Adapterのバージョンは5.17です


#4.構成図
まず初めに、全体的な構成図を以下に示します。
最初に着信したオペレータAがSalesforce上でボタンを押下し、
転送すると次に着信したオペレータBに画面がポップアップするという流れとなります。

|![構成図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/458be169-1304-8d8d-5f27-24fd1a3fa137.png)|
|:--|

#5.AmazonConnectの設定
#5.1.コンタクト属性の設定
インバウンドフローにて転送時のURLを保存するためのコンタクト属性を設定するブロックを追加します。
**後ほどCTIフローで上書きするように設定するので、コンタクト属性名を覚えておいてください。**

|項目|設定内容|
|---|---|
|宛先タイプ | ユーザー定義 |
|宛先属性 |任意（例では「transferURL_0」としました。）|

|![問い合わせ属性の設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/d17866eb-a76e-4672-9203-38123509a509.png)|
|:--|

#5.2.クイック接続の設定
転送するためのクイック接続も設定します。
今回は「BasicQueue」というキューに転送する設定としました。

|![クイック接続.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/09a058f1-edfe-6574-4fcc-d660880e2112.png)|
|:--|

#6.Salesforceの設定
##6.1.CTIフロー（転送準備）の作成
Salesforceでは、主にCTIフローの作成をします。
まずは、オペレータが今見ている画面のURLを保存するCTIフローを作成します。

6.1.1.Salesforceの管理画面から左上のハンコ注射の様なマーク（もしくは麻雀の９筒？）を選択し、「サービスコンソール」を選択します。
（見つからない場合は「すべて表示」を選択してください）

|![サービスコンソールを開く.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/c729c648-28f0-d42f-be6f-0eddf4f365a2.png)|
|:--|

6.1.2.サービスコンソールにて「く」を90°回転させたマークを選択し、「AC CTI アダプタ」を選択します。
（見つからない場合は「編集」を選択し、「アイテムをさらに追加」を選択し追加してください。）

|![AC_CTI_アダプタを開く.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/5d7ce4b1-b5f7-fec3-1a18-e9c67e34f66e.png)|
|:--|

6.1.3.CTI Adapter名を選択します。

|![CTIアダプタを選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/396f96e3-718a-ce8e-bd70-29d370f651e6.png)|
|:--|

6.1.4.CTI Adapterの管理画面から「CTI Flows」を選択し、「新規」を選択します。

|![CTIフローを新規作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/bd29e293-f078-4ee2-c41a-e4835ebbbf9a.png)|
|:--|

6.1.5.以下のように設定し、「保存」を選択します。

|項目|設定内容|
|---|---|
|CTI Flow Name | 任意（例では「転送準備」としました） |
|Source |CTI Action|
|Description |任意|
|Active |チェックあり|

|![CTIフローを新規作成時の設定_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/91e967d1-9acd-8bee-5d86-abaf48a4735d.png)|
|:--|

6.1.6.CTIフローの左側にある「開始」「終了」「CTIフロー」をドラッグアンドドロップし、図のように接続します。

**また、全体としては
「フォーカスされたサブタブオブジェクトIDを取得」ブロックでタブのオブジェクトIDを取得
→接続するためのURLを「結合文字列」ブロックで作成
→「コンタクト属性を更新」ブロックでURLをAmazonConnectのコンタクト属性に保存
という流れになります。**

|![CTIフロー詳細_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/0c80e013-7f9e-65af-2d6b-735eb7eb4c9e.png)|
|:--|

ブロック1つ1つの設定については以下となります。
「コンタクトのプロパティを取得」および「フォーカスされたサブタブオブジェクトIDを取得」には設定項目がありません。

|番号|項目|設定内容|
|---|---|---|
|①|value1 | https://([私のドメイン] の名前).lightning.force.com/lightning/r/ |
|①|value2 | $.actions.uid-(「フォーカスされた…IDを取得」ブロックのID).results.value |
|②|value1 | $.actions.uid-（ブロック①のID）.results.string |
|②|value2 | /view |
|③|attributesの<br>Enter key  | 「5.1.コンタクト属性の設定」で設定したコンタクト属性名 |
|③|attributesの<br>Enter value | $.actions.uid-（ブロック②のID）.results.value |
|④|message | 完了 |
|⑤|message | エラー |

※「[私のドメイン] の名前」は「設定」を開き、設定 > 会社の設定 > 私のドメインの順に選択すると確認できます
※ブロックのIDはブロックにカーソルをあてると確認できます。以下の図のIDは36となります。

|![uidの確認.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/b89de327-e29c-ef0a-8d73-f6dc05381826.png)|
|:--|

6.1.7.「保存」を選択します。

|![CTIフローの保存.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/d7cbea9f-59f7-cb56-6574-3844461aa0b1.png)|
|:--|

##6.2.CTI Actionの設定
CTIフローの作成後に、CTI Actionを有効化することでCCP上にボタンを表示することができます。

6.2.1.サービスコンソールにて「く」を90°回転させたマークを選択し、「CCP　Element　Editor」を選択します。
（見つからない場合は「編集」を選択し、「アイテムをさらに追加」を選択し追加してください。）

|![CCP_Element_Editorを開く.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/c4dda459-4146-0dbb-93fd-5a3887cf99c9.png)|
|:--|

6.2.2.「New Action」を選択します。

|![新規CTI_Actionを作成png.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/d916f599-2c86-ee76-79ca-fb3072332d7b.png)|
|:--|

6.2.3.以下の様に設定し、「Save」を選択します。

|項目|設定内容|
|---|---|
|Action Name | 任意（例では「転送準備」としました） |
|CTI Flow |6.1で作成したCTIフロー名|
|Order |0|

|![新規CTI_Actionを作成_詳細.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/1137bd24-1e03-b26e-18b1-e0fa166e019c.png)|
|:--|

6.2.4.CCP上にCTI Actionが表示されるようになります。

|![CCP上のCTI_Action.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/c4f4bb7d-75a8-72c2-8a73-3cc9385ce09e.png)|
|:--|

##6.3.CTIフロー（画面転送）の作成
最後に、転送時に保存したURLを開くCTIフローを作成します。

6.3.1.CTI Adapterの管理画面から「CTI Flows」を選択し、「新規」を選択します。

|![CTIフローを新規作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/bd29e293-f078-4ee2-c41a-e4835ebbbf9a.png)|
|:--|

6.3.2.以下のように設定し、「保存」を選択します。

|項目|設定内容|
|---|---|
|CTI Flow Name | 任意（例では「Voice Contact onConnecting」としました） |
|Source |Amazon Connect Voice Contact|
|Event |onConnecting|
|Description |任意|
|Active |チェックあり|

|![CTIフローを新規作成時の設定_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/b9c81c5a-0c21-2d54-07b5-199f9030e5c4.png)|
|:--|

6.3.3.CTIフローの左側にある「開始」「終了」「CTIフロー」をドラッグアンドドロップし、図のように接続します。

**また、全体としては
「If-else」ブロックで転送かどうかを判定
→転送の場合は「テキストは値で終わります」ブロックでURLが初期値かどうかを確認
→初期値でない（URLが保存されている）場合は「Salesforceのプライマリタブを開く」ブロックでタブを開く
という流れとなります。**

|![CTIフロー詳細_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/9ba8c26c-882c-e6c1-e7ee-f97fc410b8bb.png)|
|:--|

ブロック1つ1つの設定については以下となります。
「コンタクトのプロパティを取得」ブロックには設定項目がありません。

|番号|項目|設定内容|
|---|---|---|
|①|operandA  | $.actions.uid-（直前のブロックのID）.results.isTransfer |
|①|comparator | === |
|①|operandB | true |
|①|evaluateAs | boolean |
|②|attributeName| 「5.1.コンタクト属性の設定」で設定したコンタクト属性名 |
|②|defaultValue | 任意 |
|③|targetValue | $.actions.uid-（ブロック②のID）.results.value |
|③|suffixes | 「5.1.コンタクト属性の設定」で設定したコンタクト属性名の初期値 |
|④|id  | （ブランク） |
|④|message | $.actions.uid-（ブロック②のID）.results.value |
|④|active  | チェックあり|
|④|tabLabel | （ブランク） |
|④|name | （ブランク） |

6.3.4.「保存」を選択します。

|![CTIフローの保存.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/d7cbea9f-59f7-cb56-6574-3844461aa0b1.png)|
|:--|

#7.動作確認
最後の最後に、動作確認をしていきます。

7.1.架電後、エージェントAが応答したところから説明します。
例として、「AmazonConnect」タブを転送します。

|![動作確認1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/2f7af6ef-b200-06f3-45dc-3aec4e0c0612.png)|
|:--|

7.2.CCP上で「転送準備」（6.2で登録したCTI Action）の右にある「Excute」を選択します。

|![動作確認2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/02a68c89-dca4-9dc4-9f7d-71d06be2c6ab.png)|
|:--|

7.3.「完了」とポップアップが表示されます。

|![動作確認3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/26dcc8ec-9f74-92dc-cf9c-44907dc8718d.png)|
|:--|

7.4.CCP上で「クイック接続」を選択します。

|![動作確認4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/556bc463-6505-18ba-b2e7-a39afa7ebe98.png)|
|:--|

7.5.「キューへの転送テスト」（6.1で設定したクイック接続）を選択し、「呼び出し」を選択します。

|![動作確認5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/2a2e93c2-0384-e38f-bc17-6548954a1856.png)|
|:--|

7.6.エージェントBの画面（着信前）です。

|![動作確認6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/31fca0f2-85a7-1e1b-b8a9-575296176ded.png)|
|:--|

7.7.着信時に自動でタブが開きます。

|![動作確認7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/dfc42e53-4125-5226-d3d9-895bb963e3f8.png)|
|:--|


#8.おわりに
ここまで読んで下さり、ありがとうございます！！！
(*^^*)

ちなみに、複数画面転送することも可能ですが、CTIフロー上ではループを回せないようなので、
IFを多用するエレガントでないフローになります。
エレガントな方法をご存じの方は、コメントなどで教えていただけると幸いです♪

引き続きCTI Adapterについては投稿する予定なので、次回をお楽しみに～
(:3_ヽ)_