WebのHTMLスニペットを通じてJavaScript変数を渡す方法

このチュートリアル「 Web HTMLスニペットの使用方法」で学んだように、Web HTMLスニペットとは、チャットウィジェットの設定を定義するコードのことです。

このスニペットには、設定済みのチャットウィジェットのフォーマットやスタイル、チャットアプリケーションへのパス、モバイル／Web APIエンドポイント、コンタクトセンターのURL、およびチャットへのパスが含まれています。このスニペットを編集することで、first_name、last_name、メール、phone_number などの標準変数をチャットに渡しることができます。また、スニペットを通じてカスタム変数を渡すことも可能です。

この記事では、スニペット内でそのようなカスタム変数をどのようにフォーマットするかについて解説します。

手順

ステップ 1: チャットシナリオエントリーを探す

「コンタクトセンター管理者」で、[設定] > [シナリオエントリー] > [メッセージ送信/チャットシナリオエントリー] の順に移動し、対象のチャットシナリオエントリーを選択して、そのプロパティを表示します。

[設定] > [シナリオエントリー] > [メッセージ送信/チャット]
[プロパティ] タブの [Web HTML スニペット] の下にある [HTML スニペット] ボタンをクリックします。
[Web ページ用 HTML スニペット] ダイアログを開きます。

[Web ページ用 HTML スニペット] ダイアログ

ステップ 2：コンタクトセンターのホスト名を入力し、スニペットをコピーします

[クライアント Web サーバーのホスト名を指定] フィールドに、コンタクトセンターのホスト名（例：「example.brightpattern.com」）を入力してください。これにより、スニペットにホスト名が入力され、コピーできる状態になります。
「クリップボードにコピー」をクリックして、スニペットをコピーしてください。
スニペットは次のような形式になります：

<LINK type="text/css" rel="stylesheet" href="https://example.brightpattern.com/clientweb/chat-client-v4/css/form.css">
<SCRIPT type="text/javascript">
SERVICE_PATTERN_CHAT_CONFIG = {
appId: '94066',
apiUrl: 'https://example.brightpattern.com/clientweb/api/v1',
tenantUrl: 'five.brightpattern.com',
chatPath: 'https://example.brightpattern.com/clientweb/chat-client-v4/'
/*
// 既定の顧客データ。現在のサイトのコンテキストから収集することも可能です。
first_name: ,
last_name: ,
email: ,
phone_number: */
};
</SCRIPT>
<SCRIPT src="https://example.brightpattern.com/clientweb/chat-client-v4/js/init.js"></SCRIPT>

ステップ 3: 既定の顧客データパラメータを編集する

コードのコメントには、first_name、last_name、メール、phone_number といった顧客データパラメータが記載されていることにご留意ください。この顧客情報は、チャットの事前フォームから収集される既定のデータセットであり、チャット中のやり取りにおいてシステムに渡されます。^[1]

チャットを通じてカスタム変数を渡すには、以下の部分を次のように置き換えるだけです：

/*
// 既定の顧客データ。現在のサイトのコンテキストから収集可能です。
first_name: ,
last_name: ,
メール: ,
phone_number:
*/

以下のコードに置き換えてください。ここで、「variable_name」は変数名、「Value」は値となります：

parameters:{
variable_name: 'Value',
}

例：

<LINK type="text/css" rel="stylesheet" href="https://example.brightpattern.com/clientweb/chat-client-v4/css/form.css">
<SCRIPT type="text/javascript">
SERVICE_PATTERN_CHAT_CONFIG = {
appId: '70a6624585ef2b0981fed84fcd12d4db',
apiUrl: 'https://example.brightpattern.com/clientweb/api/v1',
tenantUrl: 'example.brightpattern.com',
chatPath: 'https://example.brightpattern.com/clientweb/chat-client-v4/',
parameters:{
test_var: 'Hello World',
}
};
</SCRIPT>
<SCRIPT src="https://example.brightpattern.com/clientweb/chat-client-v4/js/init.js"></SCRIPT>

注：既定の顧客データパラメータか、独自のパラメータのいずれかを使用してください。両方を併用しないでください。顧客パラメータでは、変数 $(item.externalChatData) を使用して、チャット前のフォームからすべての顧客データを収集します。既定のパラメータとカスタムパラメータの両方を含めると、first_name、last_name、メール、および phone_number のエントリが重複してしまいます。

詳細については、『シナリオビルダーリファレンスガイド』 のセクション「変数」.

ステップ 4：スニペットを HTML ファイルに貼り付ける

手順 3 が完了したら、スニペットを HTML に貼り付け、ウェブページで使用できるようにしてください。

↑ 「名前」のような既定変数は、パラメータの宣言を行わなくても渡すことができる点にご注意ください。

< 前へ | 次へ >

[1] 「名前」のような既定変数は、パラメータの宣言を行わなくても渡すことができる点にご注意ください。

[1]