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

ステップ 3: お客様のデフォルトデータパラメータを編集します。

コードのコメントでは、first_name、last_name、email、およびphone_numberなどのお客様のデータパラメータが指定されています。この情報は、チャットの事前フォームから収集されたデフォルトのデータであり、チャット対話中にシステムに伝えられます。

チャットを介してカスタム変数を伝えるには、以下を置き換えなければなりません:

      /*        
        // お客様のデフォルトデータ：現行のホームページで収集できます。
        first_name: ,
        last_name: ,
        email: ,
        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、email、phone_numberのエントリが重複します。

詳し情報については、シナリオビルダーリファレンスガイドの 変数をご覧ください。

ステップ4: HTMLファイルにスニペットを貼り付けします。

ステップ3が完了したら、ウェブページで使用するためにスニペットをHTMLに貼り付けます。

< 前へ