Connect ウィジェットをウェブサイトに追加して、チャット、タスク、E メール、およびウェブ通話の連絡先を受け入れる

ステップ 1: ウィジェットの問い合わせフォームを作成するステップ 2: コミュニケーションウィジェットをカスタマイズするステップ 3: コミュニケーションウィジェットを表示するウェブサイトドメインを指定するステップ 4: コミュニケーションウィジェットのコードとセキュリティキーを確認してコピーする

このセクションのトピックでは、ウェブサイトのコミュニケーションウィジェットを作成およびカスタマイズする方法について説明します。ウィジェットを通じて作成された問い合わせの動作を決定する問い合わせフォームを作成し、ウィジェットの外観と機能をカスタマイズします。

内容

ステップ 1: ウィジェットの問い合わせフォームを作成する
ステップ 2: コミュニケーションウィジェットをカスタマイズする
ステップ 3: コミュニケーションウィジェットを表示するウェブサイトドメインを指定する
ステップ 4: コミュニケーションウィジェットのコードとセキュリティキーを確認してコピーする

ステップ 1: ウィジェットの問い合わせフォームを作成する

このステップでは、ウィジェットを通じて作成された問い合わせの動作を決定するビューを作成してカスタマイズします。

の Amazon Connect 管理ウェブサイトにログインしますhttps://instance name.my.connect.aws/。ルーティングタブで、フローを選択します。
左上で、ビューをクリックします。
ビューの作成を選択します。
ここでは、ノーコードビルダーを使用して、顧客の問い合わせフォームを設定できます。いくつかの重要なヒント：
- フォームコンポーネントを使用すると、作成時にフォーム入力を連絡先にリンクできます。フォームリンクを使用すると、ウィジェットを操作するすべてのユーザーから直接入力を受け取り、問い合わせの作成時にフォームに含まれる情報を使用できます。
- Connect Action コンポーネントは、問い合わせを作成するためのフォームの最も重要な要素です。このコンポーネントは、フォーム内の他のボタンタイプのコンポーネントなしで使用する必要があります。
- 問い合わせフォームウィジェットでビューを使用するには、1 つの Connect Action コンポーネントが存在する必要があります。
- Connect Action コンポーネントの ConnectActionType では、次の 3 つのオプションがサポートされています。
  - StartEmailContact
  - StartTaskContact
  - StartChatContact
  E メールとタスクの両方を問い合わせフォームで使用できます。チャットコンタクトのチャット前フォームを作成するには、「」を参照してくださいAmazon Connect がホストするウェブサイトにチャットユーザーインターフェイスを追加する。
- View コンポーネントには多くのスタイルオプションがあり、環境に合わせてフォームをカスタマイズできます。
フォームに Connect Action ボタンを追加したら、Connect Action ボタンのオプションにリンクすることで、フォームによって作成された問い合わせの値を設定できます。リンクするコンポーネントは、「ビュー」の「アクションの接続」ボタンと同じフォームにある必要があります。

フォームリンクでは、次のコンポーネントがサポートされています。
- [Form Input] (フォーム入力)
- ドロップダウン (複数選択をオフにする）
- [Date Picker] (日付選択ツール)
- [Text Area] (テキスト領域)
- タイムピッカー
ビューの準備ができたら、発行を選択します。

このステップでは、顧客向けのコミュニケーションウィジェットのエクスペリエンスをカスタマイズします。

の Amazon Connect 管理ウェブサイトにログインしますhttps://instance name.my.connect.aws/。[コミュニケーションウィジェットをカスタマイズする] をクリックします。
コミュニケーションウィジェットページで、コミュニケーションウィジェットの追加を選択して、新しいコミュニケーションウィジェットエクスペリエンスのカスタマイズを開始します。既存のコミュニケーションウィジェットを編集、削除、または複製するには、アクション列のオプションから選択します。
コミュニケーションウィジェットの [名前] と [説明] に入力します。

注記
名前は、Amazon Connect インスタンスで作成されたチャットウィジェットごとに一意である必要があります。
コミュニケーションオプションセクションで、問い合わせフォームの追加を選択します。
前のステップで設定したビューを選択します。ビューの接続アクションコンポーネントに問い合わせフローが設定されていない場合は、ここで設定する必要があります。
[Save and Continue] をクリックします。

[コミュニケーションウィジェットを作成] ページで、ウィジェットのボタンのスタイル、表示名、スタイルを選択します。上記のオプションを選択すると、ウィジェットのプレビューが自動的に更新され、顧客エクスペリエンスがどのようになるかを確認できます。

注記

プレビューには、作成した問い合わせフォームの表示は表示されません。ヘッダースタイルのみが表示されます。

表示タイプ

問い合わせフォームウィジェットには、次の 2 つの表示タイプから選択できます。

フローティングアクションボタンを使用すると、ウェブページの右下隅にあるインタラクティブボタンとしてウィジェットを固定できます。
インライン埋め込みを使用すると、ウィジェットをロードするためにボタンを押すことなく、ウェブページに直接埋め込むことができます。

ボタンのスタイル

16 進値 (HTML カラーコード) を入力して、ボタンの背景の色を選択します。
アイコンの色は [白] または [黒] を選択します。アイコンの色はカスタマイズできません。

ヘッダーメッセージと色、ウィジェットの背景色の値を指定します。
ロゴ URL: Amazon S3 バケットまたは別のオンラインソースからロゴバナーに URL を挿入します。

重要

Amazon S3 バケット以外のオンラインソースからのものである場合、カスタマイズページのコミュニケーションウィジェットのプレビューにロゴは表示されません。ただし、カスタマイズしたチャットウィジェットがページに実装されると、ロゴが表示されます。

バナーは、.jpg 形式または .png 形式にする必要があります。画像は、280 px (幅) × 60 px (高さ) にすることができます。これらのサイズより大きい画像は、280x60 のロゴコンポーネントスペースに収まるように拡大縮小されます。

ロゴバナーなどのファイルを S3 にアップロードする方法については、Amazon Simple Storage Service ユーザーガイドの「オブジェクトのアップロード」を参照してください。
コミュニケーションウィジェットに画像へのアクセス権限があるか、画像のアクセス権限が適切に設定されていることを確認します。S3 オブジェクトをパブリックにアクセス可能にする方法については、「ウェブサイトアクセスのアクセス許可の設定」トピックの「ステップ 2: バケットポリシーを追加する」を参照してください。

コミュニケーションウィジェットを配置するウェブサイトのドメインを入力します。ウィジェットは、このステップで選択したウェブサイトにのみロードされます。

[ドメインを追加] を選択して、ドメインを最大 50 個まで追加できます。
重要
- ウェブサイトの URL が有効で、エラーが含まれていないことを再度確認してください。https:// で始まる完全な URL を含めます。
- 運用環境のウェブサイトやアプリケーションには、https:// を使用することをお勧めします。
「コミュニケーションウィジェットのセキュリティを追加する」で「はい」を選択し、ウェブサイト管理者と協力して、新しい問い合わせリクエストに対して JSON ウェブトークン (JWTs) を発行するようにウェブサーバーを設定することをお勧めします。これにより、Amazon Connect に送信されたリクエストが認証されたユーザーからのものであることを検証する機能など、新しい問い合わせを開始する際の制御を強化できます。

[はい] 選択すると、次のようになります。
- Amazon Connect は、次のページで JSON ウェブトークン (JWT) の作成に使用できる 44 文字のセキュリティキーを提供します。
- Amazon Connect は、問い合わせの開始時に JSON ウェブトークン (JWT) をチェックするコールバック関数をコミュニケーションウィジェットの埋め込みスクリプトに追加します。
  
  次の例に示すように、コールバック関数を埋め込みスニペットに実装する必要があります。
```
amazon_connect('authenticate', function(callback) {
  window.fetch('/token').then(res => {
    res.json().then(data => {
      callback(data.data);
    });
  });
});
```
このオプションを選択した場合、次のステップでは、ウェブサイトで開始されたすべての問い合わせリクエストのセキュリティキーを取得します。ウェブサイトの管理者に依頼して、このセキュリティキーを使用して JWT を発行するようにウェブサーバーを設定します。
[保存] を選択します。

このステップでは選択内容を確認して、コミュニケーションウィジェットのコードをコピーし、ウェブサイトに埋め込みます。ステップ 3 で JWTs を使用することを選択した場合は、シークレットキーをコピーして作成することもできます。

この 44 文字のセキュリティキーを使用して、ウェブサーバーから JSON Web トークンを生成します。キーを変更する必要がある場合、キーを更新またはローテーションすることもできます。これにより、Amazon Connect によって新しいキーが提供されます。以前のキーは、交換できるようになるまで保持されます。新しいキーのデプロイ後、Amazon Connect に戻って以前のキーを削除できます。

顧客がウェブサイトのコミュニケーションウィジェットを操作すると、ウィジェットはウェブサーバーに JWT をリクエストします。この JWT を指定すると、ウィジェットは最終顧客の Amazon Connect への問い合わせリクエストの一部としてそれを含めます。次に Amazon Connect では、シークレットキーを使用してトークンが復号化されます。成功すると、JWT がウェブサーバーによって発行され、Amazon Connect はコンタクトセンターエージェントに問い合わせリクエストをルーティングします。

JSON ウェブトークンの仕様

アルゴリズム: HS256
クレーム:
- sub: widgetId
  
  widgetId を独自の widgetId に置き換えます。widgetId を検索するには、「コミュニケーションウィジェットのスクリプト」の例を参照してください。
- iat: *発行時刻。
- exp: *有効期限 (最大 10 分)。
- segmentAttributes (オプション): 属性マップを使用して個々のコンタクトのセグメントに保存されるシステム定義のキーと値のペアのセット。詳細については、StartChatContact API で [SegmentAttributes] を確認してください。
- 属性 (オプション): 文字列から文字列へのキーと値のペアを持つオブジェクト。問い合わせ属性は、StartChatConnect API によって設定された制限に従う必要があります。
- relatedContactId (オプション）: 有効な問い合わせ ID を持つ文字列。relatedContactId は、StartChatContact API によって設定された制限に従う必要があります。
- customerId (オプション）: Amazon Connect Customer Profiles ID または CRM などの外部システムからのカスタム識別子のいずれかになります。
* 日付形式の詳細については、インターネット技術標準化委員会 (IETF) によるドキュメント、JSON Web Token (JWT) の 5 ページを参照してください。

次のコードスニペットでは、Python で JWT を生成する方法の例を示しています。


import jwt 
import datetime 
CONNECT_SECRET = "your-securely-stored-jwt-secret" 
WIDGET_ID = "widget-id" 
JWT_EXP_DELTA_SECONDS = 500

payload = { 
'sub': WIDGET_ID, 
'iat': datetime.datetime.utcnow(), 
'exp': datetime.datetime.utcnow() + datetime.timedelta(seconds=JWT_EXP_DELTA_SECONDS), 
'customerId': "your-customer-id",
'relatedContactId':'your-relatedContactId',                    
'segmentAttributes': {"connect:Subtype": {"ValueString" : "connect:Guide"}}, 'attributes': {"name": "Jane", "memberID": "123456789", "email": "Jane@example.com", "isPremiumUser": "true", "age": "45"} } 
header = { 'typ': "JWT", 'alg': 'HS256' } 
encoded_token = jwt.encode((payload), CONNECT_SECRET, algorithm="HS256", headers=header) // CONNECT_SECRET is the security key provided by Amazon Connect

次の図は、顧客がコンタクトセンターとやり取りするウェブサイトに埋め込む JavaScript の例を示しています。このスクリプトでは、ウェブサイトの右下隅にウィジェットが表示されます。

注記

埋め込みインラインスタイルを使用する場合は、ウェブページの <body> タグにウィジェットスクリプトを含めます。

ウェブサイトがロードされると、最初にウィジェットアイコンが表示されます。このアイコンを選択すると、コミュニケーションウィジェットが開き、顧客はエージェントとのコンタクトを開始できます。

コミュニケーションウィジェットは、[編集] をクリックするといつでも変更できます。

注記

変更を保存すると、数分でカスタマーエクスペリエンスが更新されます。保存する前にウィジェットの設定を確認してください。

ウェブサイト上のウィジェットのアイコンを変更するには、ウェブサイトを直接更新するための新しいコードスニペットを受け取ります。

ブラウザで JavaScript が無効になっているか、使用できません。

AWS ドキュメントを使用するには、JavaScript を有効にする必要があります。手順については、使用するブラウザのヘルプページを参照してください。

ドキュメントの表記規則

SNS メッセージングをセットアップする

Apple Messages for Business の有効化

Connect ウィジェットをウェブサイトに追加して、チャット、タスク、E メール、およびウェブ通話の連絡先を受け入れる

内容

ステップ 1: ウィジェットの問い合わせフォームを作成する

ステップ 2: コミュニケーションウィジェットをカスタマイズする

注記

注記

表示タイプ

ボタンのスタイル

ウィジェットヘッダー

重要

ステップ 3: コミュニケーションウィジェットを表示するウェブサイトドメインを指定する

重要

ステップ 4: コミュニケーションウィジェットのコードとセキュリティキーを確認してコピーする

セキュリティキー

JSON ウェブトークンの仕様

コミュニケーションウィジェットのスクリプト

注記

注記