• English

• 5.19 • 5.3 • 5.8

Web HTMLスニペットを使ってJavaScript変数を伝える方法

Web HTMLスニペットの使用方法で説明したように、web HTMLスニペットとは、チャットウィジェットの設定を定義するコードです。

このスニペットには、設定済みのチャットウィジェットのフォーマットとスタイル、チャットアプリケーションへのパス、モバイル/ Web APIのエンドポイント、コンタクトセンターのURL、チャットへのパスが含まれています。スニペットを編集して、first_name、last_name、email、phone_numberなどの一般的な変数をチャットを介して伝えることができます。スニペットを介してカスタム変数を伝えることもできます。

ここでは、スニペットでカスタム変数をフォーマットする方法について説明します。

手順

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

1. コンタクトセンター管理者アプリケーションで設定 > シナリオエントリー > メッセージ送信/チャットへ移動し、プロパティを確認するため、必要なチャットシナリオエントリーを選択します。
   
   
   

   設定 > シナリオエントリー > メッセージ送信/チャット
   
   
   
2. プロパティタブ の Web HTMLスニペットで 、HTMLスニペット ボタンをクリックします。
   
   
3. ウェブページ専用のHTMLスニペット ダイヤログが開きます。
   
   
   

   ウェブページ専用のHTMLスニペットのダイヤログ。
   
   
   

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

1. クライアントウェブサーバーのホスト名を指定するフィールドにコンタクトセンターの名前 (例： “five.brightpattern.com”)を入力します。この操作によりスニペットにホスト名が入力され、コピーの準備が整います。
   
   
2. スニペットをコピーするには、クリックボードにコピーする をクリックします。
   
   
3. 次のようになります:

<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> 

Step 3: Edit default customer data parameters

Notice that in the code comments, some customer data parameters are given: first_name, last_name, email, and phone_number. This customer information is the default set of data collected from the chat's pre-chat form and is passed to the system during the chat interaction.

To pass custom variables through the chat, simply replace this:

      /*        
        // Default customer data, it can be collected on current site's context
        first_name: ,
        last_name: ,
        email: ,
        phone_number: 
		*/

With the following, where "variable_name" is the name of your variable, and "Value" is the value:

parameters:{
variable_name: 'Value',
}

For example:

 <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>

Note: You should use either the default customer data parameters or your own parameters, but not both. Customer parameters use variable $(item.externalChatData) to collect all customer data from the pre-chat form. If you include both default and custom parameters, you will have duplicate entries of first_name, last_name, email, and phone_number.

For more information, see the Scenario Builder Reference Guide, section Variables.

Step 4: Paste the snippet into your HTML file

Once you are done with step 3, paste the snippet into your HTML for use on your webpage.

< 前へ