Webチャットの設定方法
この手順では、Webサイトにチャットウィジェットを表示するために、チャットシナリオ、チャットサービス、およびチャットシナリオエントリーを連携させて設定する方法について説明します。この手順を完了すると、Webページ上に、お客様をコンタクトセンターにつなぐチャットウィジェットが正常に動作するようになります。
ステップ 1:チャットシナリオの作成または選択
- [設定] > [シナリオ] > チャット へ移動します。
[設定] > [シナリオ] > [チャット] - リストから既存のチャットシナリオを選択するか、画面下部の
テンプレートから追加 ボタンをクリックして、「モバイルチャット」テンプレートから新規のチャットシナリオを作成してください。「モバイルチャット」テンプレートを選択してください - テンプレートから新規チャットシナリオを作成すると、新規ブラウザタブまたはウィンドウで「シナリオビルダー」アプリケーションが開きます。この簡単な設定では、シナリオをそのままにして、保存 をクリックしてください。
シナリオに名前を付けます - シナリオに一意の名前(例:「スーパーチャット」)を付け、保存 をクリックしてください。新規シナリオがシナリオのリストに表示されます。
ステップ 2:チャットサービスの作成または選択
- [設定] > サービスとキャンペーン に移動し、チャットシナリオで使用するチャットサービスを選択してください。
- 「チャット」タイプの既存のサービスがない場合は、新規に作成する必要があります。
新規チャットサービスを追加する方法
- [サービスの追加] ボタンをクリックし、チャット を選択してください。
「チャット」という名前のサービスを選択してください - [プロパティ] タブで、必要に応じてサービスプロパティを記入し、適用 をクリックしてください。
- 最低限、新規チャットサービスに名前(例:「Pacific Chat」)を付けてください。各プロパティの定義については、『コンタクトセンター管理者ガイド』のセクション [プロパティ] タブを参照してください。
[サービスとキャンペーン] > [プロパティ] - 次に、このサービスにチーム、管理者、およびレビュー担当者(オプション)を割り当てる必要があります。これは [割り当て] タブで行います。
サービスにチームと管理者を割り当てる
ステップ3:チャットシナリオエントリーを作成または選択する
- [設定] > [シナリオエントリー] > メッセージング/チャット に移動し、チャットシナリオで使用するシナリオエントリーを選択してください。シナリオエントリーは、シナリオを開始するポイントです。
メッセージング/チャットシナリオエントリーリスト - 既存のチャットシナリオエントリーが表示されていない場合は、新規に作成する必要があります。
新規チャットシナリオエントリーの追加方法
- チャットシナリオエントリーの追加 ボタンをクリックしてください。
- [プロパティ] タブで、必要に応じてプロパティを入力してください(必須およびオプションのプロパティについては以下を参照してください)。定義については、『コンタクトセンター管理者ガイド』のセクション メッセージング/チャットを参照してください。
必須のプロパティ
[プロパティ] タブで、今すぐ以下のフィールドを必ず設定してください。これらはチャット設定において極めて重要です。
- 名前 - チャットシナリオエントリーの一意の名前(任意)(例:「Redwood Chat」)
- 一意の識別子 - チャットエントリーを識別するための、自動的に生成された長い文字列です(例:「1f03f4090e4b4ffe8bb55365812e7a06」)
- シナリオ - この手順のステップ1で選択または作成したチャットシナリオを選択してください(例:「Super Chat」)。ここが、各要素が連携してチャットを可能にする重要な部分です。
- サービス - この手順のステップ2で選択または作成したチャットサービスを選択してください(例:「Pacific Chat」)。ここが、各要素が連携してチャットを実現する部分となります。
その他のプロパティ
残りのプロパティは、現時点では任意です。後で設定に戻ることができます。
- 音声コールバックの既定サービス - エージェントが電話をかける必要がある場合は、音声サービスを選択してください(注:音声サービスである必要があります)。
- 識別された連絡先に対するセッションの統合 - このチェックボックスをオンにすることで、オムニチャネル機能が有効になります(つまり、認識された Facebook Messenger のチャットセッションや電話番号を統合できるようになります)。
- Web HTML スニペット - すべてのプロパティオプションを完了し、保存した後で、このボタンを再度選択してください。このHTMLスニペットは、チャット機能を動作させるためにWebページに埋め込むものです。
- ローカルホスティング用のフルチャットコード - チャットをカスタマイズし、ご自身のWebサイトでホスティングする場合は、こちらをクリックしてください。Bright Patternは、WebサイトがBright Patternチャットとの統合に対応していないお客様向けに、このコードを提供しています。
- 必要なスキル - エージェントがチャットを受け付けるために必要な補助スキルです。
- SMS/MMS アクセス番号 - 顧客との間で SMS/MMS メッセージの送受信に使用する電話番号です。このアカウント宛てに届くすべての着信メッセージにより、チャットシナリオが開始されます。ここで該当するアカウントが選択されていない場合、シナリオは純粋なWebチャットとなります。
- メッセンジャーアカウント - 顧客とのメッセージの送受信に使用するソーシャルメッセンジャーのアカウントです。このアカウントに届くすべてのメッセージが、チャットシナリオを開始します。なお、メッセンジャーアカウントを使用するには、コンタクトセンター向けにメッセンジャー連携アカウントが設定されている必要があります。ここで該当するアカウントが選択されていない場合、シナリオはWebチャットのみとなります。
- ボット/チャット提案エンジン - チャット中にエージェントに返信候補を提案するエンジンです。ボット/チャット提案エンジンを使用するには、コンタクトセンター用に連携アカウントが設定されている必要がありますので、ご注意ください。
- 電話によるエージェントの自動接続 - このオプションを選択すると、顧客が送信した電話番号にエージェントが自動的に接続されるようになります。未選択の場合、エージェントは追加のステップとして、手動で番号をダイヤルする必要があります。
- 遅延後の接続 - 「電話によるエージェントの自動接続」が選択されている場合、エージェントと顧客間の接続にかかる遅延時間(秒単位)を設定できます。
- キュー優先度 - キュー内の顧客の優先度レベルです(例:「1」は高優先度、「3」は低優先度など)。発信者の優先度を下げたい場合を除き、キュー優先度はそのままにしておいてください。
- システムメッセージ用のチャットニックネーム - チャット内で顧客に送信されるシステムメッセージに表示される、このシナリオエントリーの名前です(例:「Redwoodカスタマーサービスがチャットに参加しました!」)。
- チャットがタイムアウトするまでのエージェントの返信待機時間 - セッションがタイムアウトするまでの、返信間の待機時間(分単位)
- チャットがタイムアウトするまでのクライアントブラウザの無応答時間 - セッションがタイムアウトするまでの、ブラウザがアイドル状態である時間(分単位)。注:通信状態が悪いエリアでは、タイムアウト時間を長く設定することをお勧めします。
- エージェントに表示 - このチェックボックスが選択されている場合、このシナリオエントリーがすべての新規チャットセッションおよびチャット転送のエントリーとして表示されます(例:エージェントが別のサービスからのチャットを受け取ることができます)。なお、サービスは「ディレクトリ」フォルダーに追加されます。
- シナリオパラメータ - このセクションは廃止予定です。
- チャットセッションアイコン - このシナリオエントリーに画像を設定できます(つまり、チャット画面では、チャットウィジェット内のエージェントの画像が上書きされます)。このプロパティは廃止予定です。チャットセッションアイコンは、チャットウィジェットの設定で追加できます。「チャットウィジェット」タブ > 「チャットスタイル」 > 「エージェントの写真を表示」のセクションを参照してください。
ステップ 4:チャットウィジェットのスタイルを編集する
「チャットスタイル」セクションで、チャットウィジェットの外観(色、フォントサイズ、配置など)を編集できます。この手順は必ず完了させてください。これを行わないと、プレビューに「連絡先」タブ(この手順のステップ5を参照)が表示されません。
- 「チャットウィジェット」タブをクリックしてください。
- 「チャットスタイル」の下にある 編集 をクリックしてください。
「チャットスタイル」 > 「編集」 - 「チャットウィジェットの設定」エディタが、新規のブラウザタブまたはウィンドウで開きます。チャットウィジェットのスタイル設定プロパティや各フィールドを必要に応じて編集してください。最も基本的な設定であれば、この時点ですべてをそのままにして変更を保存することも可能です。後で再度ここに戻ってくることもできます。
新規ブラウザタブ/ウィンドウで開くチャットウィジェット設定エディタ - 画面の下部にある 保存 をクリックしてください。
ステップ 5: 「連絡先」タブの追加
このチャットシナリオエントリーを機能させるには、チャットウィジェット用の「連絡先」タブを追加する必要があります。これを行わないと、Webページにチャットウィジェットが表示されません!
- 「チャットウィジェット」タブをクリックしてください。
- 「連絡先タブ経由のチャットの開始」の下にある 追加 をクリックしてください。
新規の連絡先タブを追加します - チャットウィジェットの設定エディタが、新規のブラウザタブまたはウィンドウで開きます。プロパティやフィールドを必要に応じて編集してください。
新規ブラウザタブ/ウィンドウで開くチャットウィジェットの設定エディタ - オプション:Webページ上で「連絡先」タブがどのように表示されるかを確認するには、「プレビュー URL」フィールドに URL を入力し、適用 をクリックしてください。画面に「連絡先」タブが表示された状態でWebページが読み込まれ、コンテンツが正しく表示されているか確認するよう求められます。
プレビュー URL の例:Webページは表示されますが、チャットウィジェットは表示されません
一部のWebサイトは、サードパーティのWebサイトへの埋め込みが制限されている場合があります。その場合は、赤い文字で「チャットウィジェットが見つかりません!」というメッセージが表示されます。Webページを表示せずに連絡先タブをプレビューするには、「プレビュー URL」フィールドを空のままにしてください。「プレビューURL」を空欄にすると、Webページのコンテンツは表示されません - 必須項目:現時点で、最低限以下のアクションが必要です:
* 名前 - この新規連絡先タブに付ける一意の名前(任意)
* 保存 - 変更を保存するにはここをクリックしてください - 「チャットウィジェット」タブに戻り、「連絡先タブ経由のチャットの開始」に進んでください。
- 先ほど追加した連絡先タブの下にある URLを追加 をクリックしてください。
必ずWebページのURLを追加してください - ルートフォルダーからの相対パスを入力してください。その際、ポート、ドメイン、プロトコルは含めないようにしてください。例えば、https://mysite.com:8443/folder/folder/page.html の場合、/folder、/folder/folder、または /folder/folder/page.html などを入力できます。緑色のチェックマークをクリックして、変更を適用してください。
- オプション:この時点で、「チャットウィジェット」タブのその他のセクションを追加または編集することも可能です。後でいつでも戻って、さらに変更を加えることができます。
- 画面の下部にある 適用 をクリックして、変更を保存してください。
ステップ 6: HTML を取得する
- [プロパティ] タブ > [Web HTML スニペット] に戻ります。
- HTMLスニペット ボタンをクリックしてください。このHTMLスニペットは、先ほど設定したチャットウィジェットのコードです。
[プロパティ] タブで、「HTML スニペット」をクリックしてください - [Web ページ用 HTML スニペット] ダイアログが開きます。

[Web ページ用 HTML スニペット] ダイアログ - クライアント Web サーバーのホスト名を指定 フィールドに、コンタクトセンターの名前(例:「company.brightpattern.com」)を入力してください。それがわからない場合は、Web ブラウザでコンタクトセンター管理者アプリケーションの URL をご確認ください。ホスト名は、「/admin」の前に表示される名前です。

ブラウザのアドレスフィールドに表示されるクライアントWebサーバーのホスト名の例 - クリップボードにコピー をクリックして、HTMLをコピーしてください。これがチャットウィジェットのコードとなります。
- HTMLをWebページの適切な場所に貼り付け、公開してください。チャットウィジェットの「連絡先」タブ(およびチャットウィジェットの設定で追加したその他のエレメント)がページに表示されます。
サンプルWebページ上のチャットウィジェット
Webページ上で「連絡先」タブをクリックすると、ウィジェットが展開されます。
ページにチャットウィジェットが表示されない場合は、この手順の前のステップに戻り、再度お試しください。
チャットウィジェットの設定に関する詳細については、チャットウィジェット設定ガイドを参照してください。
チャットウィジェットの自動開始
Webページの読み込み時に、チャットセッションが自動的に開始されるようチャットウィジェットを設定できます。この設定により、ウィジェットを起動するために顧客側のアクションは不要となり、Webページが読み込まれると、チャットは自動的にエージェントまたはキューに接続されます。
これを行うには、以下の手順に従ってください。
- 「Web ページ用 HTML スニペット」を開きます。
- コピーしたHTMLをテキストエディタ(例:Notepad++)に貼り付けて編集します。
- 「Service Pattern Chat Config」オブジェクトに、値 true の属性 autostartChat を追加します。なお、既定値は false です。
- 編集したHTMLをすべてコピーし、Webページに貼り付けてください。
- Web ページを公開し、アクティブなチャットをすべて更新します。
以下は、Web ページ用 HTML スニペットでの表示例です。
SERVICE_PATTERN_CHAT_CONFIG = {
...
autostartChat: true,
...
};