Latest revision as of 15:39, 27 October 2019

• 5.19 • 5.3 • 5.8

Web HTMLスニペットの使用方法

チャットウィジェットは、企業のWebサイトに配置されるHTMLベースのアプリケーションで、お客様とコンタクトセンターのエージェントおよび/または統合ボットの間のアクティブなチャット対話を促進します。

Bright Patternコンタクトセンターは、コンタクトセンター用に設定されたすべてのチャットウィジェットに対してHTMLスニペット（およびローカルホスティング用のチャットコード）を提供します。HTMLスニペットは、チャットウィジェットの設定を定義するコードです。

このセクションでは、HTMLスニペットの取得方法および会社のウェブサイトでの使用方法について説明します。

手順

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

コンタクトセンター管理者アプリケーションで設定 > シナリオエントリー > メッセージ送信/チャットへ移動します。

設定 > シナリオエントリー > メッセージ送信/チャット
プロパティを確認するには、必要なチャットシナリオエントリーを選択します。

ステップ 2: Web HTMLスニペットを取得します。

プロパティタブ > Web HTMLスニペットで、HTMLスニペット ボタンをクリックします。 HTMLスニペットとは、設定されたチャットウィジェットのコードです。チャットウィジェットをまだ設定していない場合、ウェブチャットの設定をご覧ください。

プロパティタブで "HTMLスニペットをクリックします。"
ウェブページ専用のHTMLスニペット ダイヤログが開きます。

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

ステップ3: コンタクトセンターのホスト名を入力します。

クライアントウェブサーバーのホスト名を指定するフィールドにコンタクトセンターの名前 (例： “five.brightpattern.com”)を入力します。名前が分からない場合、ウェブブラウザーでコンタクトセンター管理者アプリケーションのURLを表示させてください。ホスト名は “/admin”の前にあります。

ブラウザーアドレスフィールドに表示されるクライアントウェブサーバーのホスト名。
HTMLをコピーするには、クリックボードにコピーする をクリックします。これはチャットウィジェットのコードです。

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

HTMLスニペットを、ウェブページのHTMLに挿入する前に、まずプレーンテキストファイルに貼り付けると便利です。スニペットはHTML内の<body>閉じタグの下に貼り付けなければなりません。

コードの例

以下は、ベーシックなDoctype HTMLファイルに配置されたHTMLスニペットの例です。スニペットテキストは青色で表示されます。

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>My Chat Widget</title>
  </head>

  <body>
  <p>テストページ</p>
  </body>

<link type="text/css" rel="stylesheet" href="https://five.brightpattern.com/clientweb/chat-client-v4/css/form.css">
<script type="text/javascript">
    SERVICE_PATTERN_CHAT_CONFIG = {
        appId: '123456789',
        apiUrl: 'https://example.brightpattern.com/clientweb/api/v1',
        tenantUrl: 'example.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> 

</head>
</html>

ステップ5: ページを公開し、チャットウィジェットをテストします。

HTMLスニペットをウェブページの適切な場所に掲載し、保存します。
ページを公開します。挙げられた例では、HTMLスニペットは無料のウェブサイト作成アプリケーションで作成されたウェブページに掲載されました。チャットウィジェットコンタクトタブ(チャットウィジェットの設定時に追加されたその他のチャットウィジェットのエレメント)はページで表示されます。

テストページで表示されるチャットウィジェット
ウェブページで問い合わせタブをクリックすると、ウィジェットが展開されます。

チャットの事前フォームフィールドを表示するために展開されたチャットウィジェット。

チャットウィジェット設定に関する詳しい情報は、チャットウィジェット設定ガイドをご覧ください

< 前へ | 次へ >

@@ Line 20: / Line 20: @@
 # HTMLをコピーするには、'''クリックボードにコピーする''' をクリックします。これはチャットウィジェットのコードです。<br /><br />
-=== Step 4: Paste the snippet into your HTML file ===
+=== ステップ 4: スニペットをHTMLファイルに貼り付けします 。===
-You may find it helpful to paste the HTML snippet into a plain text file first, before putting it into your webpage's HTML. You should paste the snippet underneath the closing <body> tags within your HTML.
+HTMLスニペットを、ウェブページのHTMLに挿入する前に、まずプレーンテキストファイルに貼り付けると便利です。スニペットはHTML内の<body>閉じタグの下に貼り付けなければなりません。
-==== Example Code ====
+==== コードの例 ====
-The following is an example of the HTML snippet placed into a basic Doctype HTML file. The snippet text is shown in blue.
+以下は、ベーシックなDoctype HTMLファイルに配置されたHTMLスニペットの例です。スニペットテキストは青色で表示されます。
   <!DOCTYPE html>
@@ Line 33: / Line 33: @@
     <body>
-    <nowiki><p>This is my test page.</p></nowiki>
+    <nowiki><p>テストページ</p></nowiki>
     </body>
-  <font color="0099cc"><!-- You have to put this piece of JavaScript code into your web page
+  <font color="0099cc"><!--  JavaScriptコードのこの部分をウェブページに掲載します。
- Note: Use <!DOCTYPE html> on the page where snippet located for better rendering
+ご注意: レンダリングを良くするには、スニペットが掲載されるページでは <!DOCTYPE html> を使います。
   -->
   <link type="text/css" rel="stylesheet" href="https://five.brightpattern.com/clientweb/chat-client-v4/css/form.css">
@@ Line 47: / Line 47: @@
           /*
-           // Default customer data, it can be collected on current site's context
+           // お客様のデフォルトデータ：現行のホームページで収集できます。
            first_name: '',
            last_name: '',
@@ Line 61: / Line 61: @@
-=== Step 5: Publish your page and test the chat widget ===
+=== ステップ5: ページを公開し、チャットウィジェットをテストします。 ===
-# Place your HTML snippet in the appropriate place on your webpage and save.<br /><br />
+# HTMLスニペットをウェブページの適切な場所に掲載し、保存します。 <br /><br />
-# Publish your page. In the examples shown, the HTML snippet was placed onto a webpage created on free website building application. The chat widget contact tab (and any other chat widget elements that added in chat widget configuration) appears on the page.<br /><br />[[File:Chat-Config18.PNG|thumb|800px|center|Chat widget on an example webpage]]<br /><br />
+# ページを公開します。挙げられた例では、HTMLスニペットは無料のウェブサイト作成アプリケーションで作成されたウェブページに掲載されました。 チャットウィジェットコンタクトタブ(チャットウィジェットの設定時に追加されたその他のチャットウィジェットのエレメント)はページで表示されます。<br /><br />[[File:Chat-Config18.PNG|thumb|800px|center|テストページで表示されるチャットウィジェット]]<br /><br />
-# On the webpage, clicking on the contact tab will expand the widget.<br /><br />[[File:Chat-Config19.PNG|thumb|800px|center|Chat widget expanded to show pre-chat form fields]]
+# ウェブページで問い合わせタブをクリックすると、ウィジェットが展開されます。<br /><br />[[File:Chat-Config19.PNG|thumb|800px|center|チャットの事前フォームフィールドを表示するために展開されたチャットウィジェット。]]
-For more information on chat widget configuration, see the [[Chat-widget-configuration-guide|Chat Widget Configuration Guide]].
+チャットウィジェット設定に関する詳しい情報は、[[Chat-widget-configuration-guide|チャットウィジェット設定ガイド]]をご覧ください

案内メニュー

Latest revision as of 15:39, 27 October 2019

Web HTMLスニペットの使用方法

手順

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

ステップ 2: Web HTMLスニペットを取得します。

ステップ3: コンタクトセンターのホスト名を入力します。

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

コードの例

ステップ5: ページを公開し、チャットウィジェットをテストします。

Contentsto top

Latest revision as of 15:39, 27 October 2019

Web HTMLスニペットの使用方法

手順

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

ステップ 2: Web HTMLスニペットを取得します。

ステップ3: コンタクトセンターのホスト名を入力します。

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

コードの例

ステップ5: ページを公開し、チャットウィジェットをテストします。

Contentsto top

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