翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
# Amazon Connect ですぐに使えるコミュニケーションウィジェットを設定する
デスクトップブラウザとモバイル[ブラウザ](connect-supported-browsers.md#browsers-inapp)向けのコミュニケーションウィジェットを作成するには、このオプションを使用します。この手順の最後で Amazon Connect はカスタム HTML コードスニペットを生成して、これをウェブサイトのソースコードにコピーします。
1. Amazon Connect 管理者アカウントまたは**チャネルとフロー**、**コミュニケーションウィジェット - セキュリティプロファイルでアクセス許可を作成する** を持つユーザーアカウントを使用して、管理者ウェブサイトにログインします。
1. 左側のナビゲーションメニュー Amazon Connectで、**チャネル**、**コミュニケーションウィジェット**を選択します。
1. ウィザードのガイドに従って、次の 3 つのステップを実行します。
## ステップ 1: コミュニケーションチャネルを選択する
1. **[コミュニケーションウィジェット]** ページで、コミュニケーションウィジェットの **[名前]** と **[説明]** を入力します。
**注記**
名前は、Amazon Connect インスタンスで作成された各チャットウィジェットごとに一意である必要があります。
1. **[コミュニケーションのオプション]** セクションで、ウィジェットへの顧客のエンゲージメント方法を選択します。次の画像は、顧客にウェブ通話、ビデオ通話、および画面共有を許可するオプションを示しています。
![\[ウェブ通話、ビデオ通話、および画面共有が設定されたコミュニケーションウィジェットのページ。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/comm-widget-page-call.png)
1. **[ウェブ通話]** セクションで、顧客向けにビデオと画面共有のどちらのエクスペリエンスを有効にするかを選択します。前の画像は、顧客がエージェントの動画を見たり、ビデオをオンにしたりすることを許可するオプションや、エージェントと顧客が画面を共有することを許可するオプションを示しています。画面共有の制限の設定については、「[画面共有の URL 制限を有効にする](screen-sharing-url-restriction.md)」を参照してください。
1. **[保存して続行]** を選択します。
## ステップ 2: コミュニケーションウィジェットをカスタマイズする
上記のオプションを選択すると、ウィジェットのプレビューが自動的に更新され、顧客エクスペリエンスがどのようになるかを確認できます。
![\[コミュニケーションウィジェットのプレビュー\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/netra-call-preview.png)
**ウィジェットアクセスボタンのスタイルを定義する**
1. 16 進値 ([HTML カラーコード](https://htmlcolorcodes.com/)) を入力して、ボタンの背景の色を選択します。
1. アイコンの色は **[白]** または **[黒]** を選択します。アイコンの色はカスタマイズできません。
**表示名とスタイルをカスタマイズできます。**
1. ヘッダーメッセージと色、ウィジェットの背景色の値を指定します。
1. **ロゴ URL**: Amazon S3 バケットまたは別のオンラインソースからロゴバナーに URL を挿入します。
**注記**
Amazon S3 バケット以外のオンラインソースからのものである場合、カスタマイズページのコミュニケーションウィジェットのプレビューにロゴは表示されません。ただし、カスタマイズしたチャットウィジェットがページに実装されると、ロゴが表示されます。
バナーは、.jpg 形式または .png 形式にする必要があります。画像は、280 px (幅) × 60 px (高さ) にすることができます。これらのサイズより大きい画像は、280x60 のロゴコンポーネントスペースに収まるように拡大縮小されます。
1. ロゴバナーなどのファイルを S3 にアップロードする方法については、*Amazon Simple Storage Service ユーザーガイド*の「[オブジェクトのアップロード](https://docs.aws.amazon.com/AmazonS3/latest/userguide/upload-objects.html)」を参照してください。
1. コミュニケーションウィジェットに画像へのアクセス権限があるか、画像のアクセス権限が適切に設定されていることを確認します。S3 オブジェクトをパブリックにアクセスできるようにする方法については、「*ウェブサイトのアクセス権限の設定*」トピックの「[ステップ 2: バケットポリシーを追加する](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html#bucket-policy-static-site)」を参照してください。
## ステップ 3: ウィジェットにドメインを追加する
このステップにより、お客様のウェブサイトからのみ起動できるように通信ウィジェットを保護できます。
1. コミュニケーションウィジェットを配置するウェブサイトのドメインを入力します。コミュニケーションウィジェットは、このステップで選択したウェブサイトでのみロードされます。
**[ドメインを追加]** を選択して、ドメインを最大 50 個まで追加できます。
![\[[ドメインの追加] オプション。\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/chatwidget-add-domain.png)
**重要**
ウェブサイトの URL が有効で、エラーが含まれていないことを再度確認してください。https:// で始まる完全な URL を含めます。
運用環境のウェブサイトやアプリケーションには、https:// を使用することをお勧めします。
1. **[コミュニケーションウィジェットのためにセキュリティを追加する]** で、セットアップを迅速に行うには、**[No - I will skip]** を選択します。
ユーザーが認証されていることを確認できるようにするには、**[はい]** を選択することをおすすめします。詳細については、「[Amazon Connect でアプリ内通話、ウェブ通話、ビデオ通話の顧客エクスペリエンスをパーソナライズする](optional-widget-steps.md)」を参照してください。
1. **[保存して続行]** を選択します。
正常に完了しました！これでウィジェットが作成されました。生成されたコードをコピーして、コミュニケーションウィジェットを表示したいウェブサイトの各ページに貼り付けます。
## エージェントのアプリ内通話、ウェブ通話、ビデオ通話、および画面共有を有効にする
エージェントがビデオ通話と画面共有を使用できるようにするには、エージェントのセキュリティプロファイルに **[問い合わせコントロールパネル (CCP)]**、**ビデオ通話 - アクセス]** のアクセス権限を割り当てます。
Amazon Connect エージェントワークスペースは、アプリ Amazon Connect 内通話、ウェブ通話、ビデオ通話、画面共有をサポートしています。電話やチャットと同じ設定、ルーティング、分析、エージェントアプリケーションを使用できます。ビデオ通話と画面共有を行うアクセス権限を持つエージェントのセキュリティプロファイルを有効にするだけで開始できます。
カスタムエージェントデスクトップの場合、アプリケーション Amazon Connect 内およびウェブ呼び出しに変更は必要ありません。ビデオ通話と画面共有を行うアクセス権限を持つエージェントのセキュリティプロファイルを有効にします。ビデオ通話をエージェントデスクトップに統合する方法については、次のガイドに従ってください。
## クライアントデバイスでアプリ内通話またはウェブ通話を開始する方法
次の図は、クライアントデバイス (モバイルアプリケーションまたはブラウザ) がアプリ内通話またはウェブ通話を開始するためのイベントの順序を示しています。
![\[クライアントデバイスの通話開始方法を示す概念図\]](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/netra-gs-diagram-option1.png)
1. (オプション) ウェブサイトでキャプチャした属性を渡して、JSON ウェブトークン (JWT) を使用して検証できます。
1. 顧客がウェブサイトまたはモバイルアプリケーションのコミュニケーションウィジェットをクリックします。
1. コミュニケーションウィジェットは、JWT に含まれる属性を渡す Amazon Connect ことで、 へのウェブ呼び出しを開始します。
1. コンタクトがフローに到達し、ルーティングされて、キューに入れられます。
1. エージェントがコンタクトを受け入れます。
1. (オプション) 顧客とエージェントに対してビデオを有効にしている場合、顧客とエージェントはビデオを開始できます。
## 詳細情報
アプリ内通話、ウェブ通話、ビデオ通話の機能の要件の詳細については、以降のトピックを参照してください。
+ [Amazon Connect のアプリ通話、ウェブ通話、ビデオ通話におけるエージェントワークステーションの要件](videocalling-networking-requirements.md)
+ [アプリ内通話、ウェブ通話、ビデオ通話機能でサポートされているブラウザとモバイル OS](connect-supported-browsers.md#browsers-inapp)