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

Amazon Connect ウィジェットをウェブサイトに追加して、チャット、タスク、E メール、ウェブ通話のコンタクトを受け入れる

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

ステップ 1: ウィジェットのコンタクトフォームを作成する

このステップでは、ウィジェットを使用して作成されたコンタクトの動作を決定するビューを作成およびカスタマイズします。

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

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

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

表示タイプ

コンタクトフォームウィジェットには、次の 2 つの表示タイプから選択できます。

ボタンのスタイル

ウィジェットヘッダー

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

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

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

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

セキュリティキー

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

顧客がウェブサイトでコミュニケーションウィジェットを操作すると、ウィジェットがウェブサーバーに JWT をリクエストします。JWT が提供されると、これらはウィジェットにより Amazon Connect へのエンドカスタマーのコンタクトリクエストの一部として含まれます。次に Amazon Connect では、シークレットキーを使用してトークンが復号化されます。成功すると、お客様のウェブサーバーによって JWT が発行されたことを確認できます。また、Amazon Connect によりコンタクトリクエストがコンタクトセンターのエージェントにルーティングされます。

JSON ウェブトークンの仕様

次のコードスニペットでは、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 の例を示しています。このスクリプトでは、ウェブサイトの右下隅にウィジェットが表示されます。

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

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

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