• 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スニペットのダイヤログ。
   
   
   

Step 2: Enter your contact center's hostname and copy snippet

1. In the field Specify client web server hostname, enter your contact center’s name (i.e., “example.brightpattern.com”). This action will populate the snippet with the hostname, making it ready to be copied.
   
   
2. Click Copy to clipboard to copy the snippet.
   
   
3. It looks like this:

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

       /*        
        // Default customer data, it can be collected on current site's context
        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.

< 前へ