【画面共有】Amazon Connectで画面共有機能を使ってみた

## はじめに
2024年10月のAmazon Connectリリースノートにて、画面共有機能のリリースが発表されました。
本記事では、Amazon Connectの画面共有機能の設定方法と操作手順について記載します。

### 注意点
本記事では、以下の項目は事前準備されているものとしております。
- AWSアカウントの作成
- Amazon Connectのインスタンス作成
- 電話番号の取得やAmazon Connectの初期設定
- HTMLファイルやデプロイ方法については省略しています

### セキュリティプロファイルの権限
日本語では、「チャットテストモード」の「有効/無効」にチェックを入れる必要があります。

  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717693/ebe6b87c-dd87-0291-11b0-82489d523823.png" alt="image.png" width="90%">

※英語版では「Communication Widget」ですが、日本語版では「チャットテストモード」と表示されています。
そのため、どの権限が「コミュニケーションウィジェット」に相当するのか、個人的には見つけづらいと感じました（2024年11月にAWSへ変更要望を伝えてます）。

### Amazon Connectのコミュニケーションウィジェットの追加

1. Amazon Connectのサイドバーから「コミュニケーションウィジェット」を選択し、以下の画面を開きます
2. 「ウィジェットを追加」をクリックする  
   <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717693/04352eaf-332d-720f-1b8e-c121469aa91a.png" alt="image.png" width="70%">

3. 名前を入力する  
   <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717693/6262019e-653a-8aed-d608-cce80c0f561d.png" alt="image.png" width="70%">

4. ウェブ通話を有効化します
5. 「ウェブ通話コンタクトフロー」はキューの設定と受け取れるエージェントが存在する状態のフローで問題ありません
    - フロー内で特別なブロックを使用する必要はありません  
   <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717693/b1914ef7-f861-8281-9f6b-823047225c5d.png" alt="image.png" width="70%">

6. 「ウィジェットをカスタマイズする」については、デフォルトで指定しています  
   <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717693/579fed19-c8e2-1529-7c1e-d9a5fa0561c4.png" alt="image.png" width="70%">

7. 「ドメインとセキュリティ」の設定
    - １のドメインについては、Amazon S3にHTMLを配置するなどが素早くテストを実施できると思っています
   <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717693/579e9b9e-1d8f-ec09-52c7-363c8bf0eedb.png" alt="image.png" width="70%">

8. 「保存」すると、以下のようなJavaScriptのコードが生成されます
9. コードをHTMLに埋め込むことで、利用できるようになります  

   <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717693/3183de0f-2e30-216c-0702-97ec5d927380.png" alt="画像1.png" width="70%">

10. お客様側の画面は以下のように表示されます
    - お客様には右下の電話マークをクリックいただくことで、架電状態になります  
   <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717693/ec7617e5-cd8a-fd4c-c9f7-2330a05b86be.png" alt="image.png" width="70%">

11.該当キューが割り当てられ、エージェントが受電可能な状態であれば、以下の画面が表示されます
- 「通話を受信」をクリックすると、お客様との通話が開始されます  
   <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717693/0d6a55a6-c9a7-9552-ace0-f0ee6f24012c.png" alt="画像4.png" width="50%">

12.画面共有を実施するには、エージェント側の画面で三点マークをクリックし、「Enable sharing」を選択します  

   <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717693/7411e9fe-4ad3-0130-2b35-f2e9f768e129.png" alt="画像6.png" width="70%">

13.「12」を実施すると、エージェント側では以下の画面が表示されます  
   <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717693/eea8ca60-e0a1-5903-facd-be61c53f261a.png" alt="agent.png" width="70%">

14.お客様側では以下の画面が表示されます  
   <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717693/5cb0e56e-a806-fd6c-c794-b8b8b6b73519.png" alt="お客様側.png" width="70%">

15.エージェントまたはお客様が画面共有をクリックすると開始されます
 - 本記事ではエージェント側もお客様側にも画面共有できる設定にしています
 - どちらかのみにしたい場合は、「4」, 「5」の手順にある設定を変更してください

### 補足

画面共有時にお客様側の画面で「許可」などのポップアップはありませんでした。

### まとめ

画面共有機能の利用により、自社のウェブサイトの利用方法などをお客様により分かりやすく伝えられるようになります。
これまで、Amazon Connectでは音声やチャット、ビデオ通話など提供されてきましたが、画面共有機能の追加により、Amazon Connectはさらにオムニチャネル対応が充実しました。
これにより、音声・チャット・ビデオ通話に加え、画面共有を通じた包括的な顧客サポートが可能になります。