Web HTMLスニペットの使用方法
チャットウィジェットとは、貴社のウェブサイト上に設置されるHTMLベースのアプリケーションであり、顧客とコンタクトセンターのエージェントおよび/または統合されたボットとの間のアクティブなチャットのやり取りを可能にするものです。
Bright Pattern Contact Centerでは、コンタクトセンター向けに設定されたすべてのチャットウィジェットについて、HTMLスニペット（およびローカルホスティング用の完全なチャットコード）を提供しています。 HTMLスニペットとは、チャットウィジェットの設定を定義するコードのことです。
この記事では、HTMLスニペットを取得し、自社のウェブサイトで使用する方法について説明します。
手順
ステップ 1：チャットシナリオエントリーを確認する
- コンタクトセンター管理者画面で、[設定] > [シナリオエントリー] > [メッセージング/チャット] の順に移動します。
[設定] > [シナリオエントリー] > [メッセージング/チャット] - 対象のチャットシナリオエントリーを選択し、そのプロパティを表示します。
ステップ 2: Web HTML スニペットを取得する
- [プロパティ] タブ > [Web HTML スニペット] で、[HTML スニペット] ボタンをクリックします。このHTMLスニペットは、設定済みのチャットウィジェット用のコードです。まだチャットウィジェットを設定していない場合は、 「Webチャットの設定方法」をご参照ください。
[プロパティ] タブで「HTML スニペット」をクリック - [Web ページ用 HTML スニペット] ダイアログが開きます。
[Web ページ用 HTML スニペット] ダイアログ
ステップ 3：コンタクトセンターのホスト名を入力する
- [クライアント Web サーバーのホスト名を指定] フィールドに、コンタクトセンターの名前（例：「mycompany.brightpattern.com」）を入力します。わからない場合は、Web ブラウザに表示されているコンタクトセンター管理者アプリケーションの URL を確認してください。ホスト名とは、「/admin」の前に表示される部分の名前です。
ブラウザのアドレスフィールドに表示されるクライアント Web サーバーのホスト名の例 - 「クリップボードにコピー」をクリックしてHTMLをコピーします。これがチャットウィジェットのコードです。
ステップ 4：スニペットを HTML ファイルに貼り付ける
WebページのHTMLに貼り付ける前に、まずプレーンテキストファイルにHTMLスニペットを貼り付けておくと便利です。このスニペットは、HTML内の<BODY>終了タグの直下に貼り付けてください。
コード例
以下は、基本的なDoctypeのHTMLファイルにHTMLスニペットを配置した例です。スニペット部分のテキストは青色で表示されています。
<!DOCTYPE html>
<HEAD>
<META charset="utf-8">
<TITLE>My チャットウィジェット</TITLE>
</HEAD>
<BODY> <P>これは私のテストページです。</P> </BODY> <LINK type="text/css" rel="stylesheet" href="https://company.brightpattern.com/clientweb/chat-client-v4/css/form.css"> <SCRIPT type="text/javascript"> SERVICE_PATTERN_CHAT_CONFIG = { appId: '123456789', apiUrl: 'https://company.brightpattern.com/clientweb/api/v1', tenantUrl: 'company.brightpattern.com', chatPath: 'https://company.brightpattern.com/clientweb/chat-client-v4/'
/* // 既定の顧客データ。現在のサイトのコンテキストから取得することも可能です first_name: ,
last_name: ,
メール: ,
phone_number: '
- /
}; </SCRIPT> <SCRIPT src="https://company.brightpattern.com/clientweb/chat-client-v4/js/init.js"></SCRIPT> </HEAD> </HTML>
ステップ 5：ページを公開してチャットウィジェットをテストする
- HTMLスニペットをウェブページの適切な場所に配置し、保存します。
- ページを公開します。以下の例では、HTMLスニペットを無料のウェブサイト作成アプリケーションで作成したウェブページに配置しています。チャットウィジェットの「連絡先」タブ（および、チャットウィジェットの設定で追加したその他の要素）がページに表示されます。
サンプルウェブページ上のチャットウィジェット - ウェブページ上で「連絡先」タブをクリックすると、ウィジェットが展開されます。
チャットウィジェットが展開され、チャット前のフォームフィールドが表示されています
チャットウィジェットの設定に関する詳細については、 「チャットウィジェットの設定ガイド」をご参照ください.