翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# Amazon Connect チャットにステップバイステップガイドをデプロイする
<a name="step-by-step-guides-chat"></a>

Amazon Connect チャット内でステップバイステップガイドを有効にして、インタラクティブなセルフサービス体験を生み出すことができます。この機能は、コンテキストを収集してエージェントに転送することで、カスタマーの問題をより迅速に解決するのに役立ちます。より効率的な設定管理のために、エージェント向けに作成したものと同じガイドをカスタマーに表示することができます。

## Amazon Connect チャットでステップバイステップガイドを有効にする
<a name="step-by-step-guides-chat-enable"></a>

1. エージェント向けの[ステップバイステップガイド](step-by-step-guided-experiences.md)を有効にして設定していることを確認します。ガイドを設定した後、コンタクトがエージェントの応答待ちに予約された時にガイドがポップアップ表示されることを確認します。

1. エージェント用の設定と同じ方法で、[ビューを表示] ブロックを使用してチャットフローでビューを呼び出すようにフローを設定します。以下の例では、カスタマーがチャットバブルを選択するとガイドが起動します。このフローは、チャットがエージェントに転送される前に 2 つのビューを経由します。  
![[ビューを表示] ブロックを使用して、チャットフローでビューを呼び出すようにフローを設定します。](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/step-by-step-guides-chat-enable-1.png)

1. 管理ページでホスト型チャットウィジェットを作成します。チャットフローを、自分で作成したものに設定します。  
![管理ページでホスト型チャットウィジェットを作成します。チャットフローを、自分で作成したものに設定します。](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/step-by-step-guides-chat-enable-2.png)

   このホスト型チャットにより、次のようなスクリプトが生成されます。

   ```
   <script type="text/javascript">
     (function(w, d, x, id){
       s=d.createElement('script');
       s.src='https://d38ij7tdo5kvz7.cloudfront.net/amazon-connect-chat-interface-client.js';
       s.async=1;
       s.id=id;
       d.getElementsByTagName('head')[0].appendChild(s);
       w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
     })(window, document, 'amazon_connect', '0b68a091-3538-4dcd-888e-f3b3ae64c5aa');
     amazon_connect('styles', { iconType: 'CHAT', openChat: { color: '#ffffff', backgroundColor: '#123456' }, closeChat: { color: '#ffffff', backgroundColor: '#123456'} });
     amazon_connect('snippetId', 'QVFJREFIZ3R0VzRTQkxzUnR6S1BPcXRseVBOUVlvWVlFclZwZmJ5bWZUc1hHVU1SM0FHM3BsdU4yaTZVTW9jeTRqQTRWMDJZQUFBQWJqQnNCZ2txaGtpRzl3MEJCd2FnWHpCZEFnRUFNRmdHQ1NxR1NJYjNEUUVIQVRBZUJnbGdoa2dCWlFNRUFTNHdFUVFNRFB0SmlxckgzenRMTjJ4cUFnRVFnQ3RxUHVQZm1Zd1F2ZjZVTzJ2ZTk5am1aUWEwZW53SHFzcmQ5bkdzRVdrNHJIbkJGTk81ekRBK0o4L1Q6OnBwUTZuLzRRKzVvdWdiUHhJRUU2MGM0TDlhcXEyZ0tramVmNkp3N2YvNXBIMTRwdDJSWmFVcjdzVTNzaXorc1BHTHhSOGd0b285dWpiemFrTU1tbWZoY0VCUEY4S3Z1ckdXNnZtV0ZjcVNFYnhrZlpuMVpsb1FGQjZ1SW5LMi9laHlmQVhXY3JXS1NDL1oxd29UejVkSUYwOFBoT3QvUT0=');
     amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown' ]);
   </script>
   ```

   最後の行には許可されるメッセージの配列が含まれます。インタラクティブメッセージを追加して、チャット内のガイドを有効にすることができます。例えば、次のようになります。

   ```
   amazon_connect('supportedMessagingContentTypes', ['text/plain', 'application/vnd.amazonaws.connect.message.interactive', 'application/vnd.amazonaws.connect.message.interactive.response']);                        
   ```

1. ステップバイステップガイドがチャット内で機能するよう許可するには、URL の許可リストに以下を追加します。
   + `{{your-website-url}}/views/renderer/`

   チャットウィジェットがウェブサイトで機能するよう CSP を使用している場合は、cloudfront URL が既に用意されています。例えば、次のようになります。
   + `https://{{unique-id}}.cloudfront.net/amazon-connect-chat-interface.js`

**注記**  
カスタムビルドのコミュニケーションウィジェットを含むガイドをチャットで使用することもできます。カスタムコミュニケーションウィジェットにステップバイステップガイドを追加する方法の詳細については、GitHub の「[Amazon Connect chat interface](https://github.com/amazon-connect/amazon-connect-chat-interface)」を参照してください。