Latest revision as of 15:53, 27 October 2019

• 5.19 • 5.3 • 5.8

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

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

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

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

手順

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

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

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

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

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

クライアントウェブサーバーのホスト名を指定するフィールドにコンタクトセンターの名前 (例： “five.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、email、およびphone_numberなどのお客様のデータパラメータが指定されています。この情報は、チャットの事前フォームから収集されたデフォルトのデータであり、チャット対話中にシステムに伝えられます。^[1]

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

      /*        
        // お客様のデフォルトデータ：現行のホームページで収集できます。
        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に貼り付けます。

↑ "name"などのデフォルトの変数は、パラメータ宣言なしで伝えることができます。 .

< 前へ

[1] "name"などのデフォルトの変数は、パラメータ宣言なしで伝えることができます。 .

[1]

@@ Line 43: / Line 43: @@
 コードのコメントでは、first_name、last_name、email、およびphone_numberなどのお客様のデータパラメータが指定されています。この情報は、チャットの事前フォームから収集されたデフォルトのデータであり、チャット対話中にシステムに伝えられます。<ref>"name"などのデフォルトの変数は、パラメータ宣言なしで伝えることができます。 .</ref>
-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: '',
@@ Line 53: / Line 53: @@
   		*/
-With the following, where "variable_name" is the name of your variable, and "Value" is the value:
+以下に置き換えます（"variable_name" は変数の名前で、"Value" は値です）:
   parameters:{
@@ Line 59: / Line 59: @@
   }
-For example:
+例:
 <syntaxhighlight lang="javascript">
@@ Line 79: / Line 79: @@
-'''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.
+'''ご注意:''' お客様のデフォルトデータパラメータ '''または'''カスタムパラメータのいずれかを使用します。お客様のパラメーターは''$(item.externalChatData)''という変数を使用して、事前チャットフォームからお客様のデータを収集します。デフォルトパラメータとカスタムパラメータの両方を含めると、first_name、last_name、email、phone_numberのエントリが重複します。
-For more information, see the ''Scenario Builder Reference Guide'', section [[Scenario-builder-reference-guide/VariablesandExpressions/Variables |  Variables]].
+詳し情報については、''シナリオビルダーリファレンスガイド''の [[Scenario-builder-reference-guide/VariablesandExpressions/Variables |  変数]]をご覧ください。
-=== Step 4: Paste the snippet into your HTML file ===
+=== ステップ4: HTMLファイルにスニペットを貼り付けします。 ===
-Once you are done with step 3, paste the snippet into your HTML for use on your webpage.
+ステップ3が完了したら、ウェブページで使用するためにスニペットをHTMLに貼り付けます。
 <references />

案内メニュー

Latest revision as of 15:53, 27 October 2019

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

手順

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

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

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

Contentsto top