Webchat ウェブチャットの設定
1. Webchat セクション
ウェブチャットを利用する場合は on、利用しない場合は off に設定します。
2. Webchat services セクション
ウェブチャットサービスを定義します。
| 項目 | 説明 |
| Service ID | ウェブチャットサービスを識別する ID です。 |
| Description | ウェブチャットサービスの説明です。 |
| Type | ウェブチャットの分配先のタイプです。 Users はユーザー、ACDs は ACD です。 ACD へは CIM と連携している場合のみ分配されます。 |
| Target | ウェブチャットの分配先です 。 ユーザーまたは ACD の ID をカンマ区切りで設定します。 |
| Options | ウェブチャットサービスのオプションを JSON 形式で設定します。 設定できるオブジェクトは “2-1.Webchat service options” を参照ください。 |
設定例:
| 項目 | 設定値 |
| Service ID | webchat001 |
| Description | サポート問い合わせ |
| Type | Users |
| Target | 1001,1002,1003 |
| Options | 以下参照 |
{
"chat_event_actions": {
"welcome": {
"chat_action_type": "auto_message",
"auto_message_id": "message01"
},
"queue_timeout": [
{
"chat_action_type": "auto_message",
"auto_message_id": "message02"
},
{
"chat_action_type": "close_chat"
}
]
},
"profinfo_format": "%name%%br%%email%%br%%profinfo.company_name%%br%%profinfo.phone_number%%br%%profinfo.category%%br%%description%",
"queue_timeout_sec": 60
}
2-1. Webchat service options
Webchat services > options
ウェブチャットサービスの[Option]項目に設定可能な JSON フォーマットを説明します。
| キー | 値 |
| chat_event_actions | イベント名をキー、アクションを値とするオブジェクトを設定します。 設定できるイベント名は “2-2. Webchat events” を、アクションは “2-3. Webchat actions” を参照ください。 |
| profinfo_format | カスタマーが入力した個人情報を、UC ユーザーの画面に表示する際のフォーマット文字列を設定します。 文字列内で使用できる変数は “2-4. Webchat service option format variables” を参照ください。 |
| queue_timeout_sec | ウェブチャットサービスのキュータイムアウト時間 (秒) を設定します。 |
| file_send_permission | カスタマーからのファイル送信を許可するかどうかを表す文字列を指定します。 “deny” はすべてのファイル送信を拒否、”image” は画像の送信のみ許可、それ以外を指定するとすべてのファイル送信を許可します。 |
| agent_file_send_permission | エージェントからのファイル送信を許可するかどうかを表す文字列を指定します。 “deny” はすべてのファイル送信を拒否、”image” は画像の送信のみ許可、それ以外を指定するとすべてのファイル送信を許可します。 (Brekeke UC version 1.2.6.18 以降で使用可能) |
| file_send_max_size | カスタマーからのファイル送信を許可する最大ファイルサイズ (MB) を設定します。 (Brekeke UC version 1.2.6.18 以降で使用可能) |
| agent_file_send_max_size | エージェントからのファイル送信を許可する最大ファイルサイズ (MB) を設定します。 (Brekeke UC version 1.2.6.18 以降で使用可能) |
| customer_sip_user | カスタマーが WebRTC 端末を使う場合の SIP ユーザー ID のフォーマット文字列を設定します。 デフォルトは “web%conf_id%” です。 文字列内で使用できる変数は “2-4. Webchat service option format variables” を参照ください。 |
| customer_call_target | カスタマーが WebRTC 端末で発信機能を使う場合の発信先アドレスのフォーマット文字列を設定します。 デフォルトは %conf_ext% です。 文字列内で使用できる変数は “2-4. Webchat service option format variables” を参照ください。 |
| call_enabled | カスタマーが通話が使えるか使えないかを示す真偽値を設定します。 true を指定すると通話が使えることを示します。 |
| call_target | エージェントから発信するときの発信先アドレスのフォーマット文字列を設定します。 デフォルトは %conf_ext% です。 文字列内で使用できる変数は “2-4. Webchat service option format variables” を参照ください。 |
| webchat_service_code | ウェブチャットサービスにウェブチャット識別符号を付けたい場合、その文字列を指定します。 複数のウェブチャットサービスで重複した値も指定可能です。 外部アプリケーション連携で参照することがある値で、例えば CRM 連携時に同一 ACD で複数業務に分ける場合、DNIS に相当する値を設定します。 |
| primary_app_info | CIM と連携している場合に、プライマリアプリケーション情報の各キーと値を設定したオブジェクトを指定します。 |
| secondary_app_info | CIM と連携している場合に、セカンダリアプリケーション情報の各キーと値を設定したオブジェクトを指定します。 |
| auto_answer | ウェブチャットを自動応答するかどうかを決めるための数値を指定します。 0 を指定するか、指定しない場合は、自動応答を行いません。 2 を指定すると、自分のステータスが Available のときのみ自動応答を行います。 255 を指定すると、自分のステータスに関わらず自動応答を行います。 |
| invite_button_type | ウェブチャットに他のエージェントを招待できるかどうかを決めるための数値を指定します。 (Brekeke UC version 1.2.9.4 以降で使用可能) 0 を指定すると、招待ボタンは非アクティブになります。 1 を指定すると、招待ボタンはアクティブになります。 指定しない場合は、招待ボタンは CIM では非アクティブ、UC ではアクティブになります。(1.2.8.10 以前の挙動) |
2-2. Webchat events
chat_event_actions (Webchat services > options > chat_event_actions)に設定可能なイベントの一覧。
| イベント名 | 説明 |
| welcome | カスタマーがウェブチャットルームに入った直後に発生するイベントです。 |
| queue_timeout | カスタマーがウェブチャットルームに入った後、誰も応答せずにウェブチャットサービスのキュータイムアウト時間が経過したときに発生するイベントです。 |
| over_max_sessions | 最大ゲストセッション数をオーバーしてウェブチャットルームに入れないときに発生するイベントです。 |
2-3. Webchat actions
chat_event_actions (Webchat services > options > chat_event_actions)に設定可能なアクション (JSON のフォーマット)を説明します。
- 単一のオブジェクト、または複数のオブジェクトを要素とする配列を指定できます。
- 配列を指定した場合は要素のオブジェクトを順に実行します。
- 指定できるオブジェクトは以下に示します。
Action “auto_message”
予め設定したメッセージを自動的にカスタマーに送ります。
| キー | 値 |
| chat_action_type | 文字列 “auto_message” を指定します。 |
| auto_message_id | 自動メッセージ ID を指定します。 自動メッセージについては “3. Automated messages” を参照ください。 |
Action “close_chat”
ウェブチャットルームの参加者をすべて離脱させ、閉じます。
| キー | 値 |
| chat_action_type | 文字列 “close_chat” を指定します。 |
2-4. Webchat service option format variables
profinfo_format 等で使用可能な変数を説明します。
| 項目 | 説明 |
| %name% | カスタマーの名前です。 |
| %email% | カスタマーの E メールアドレスです。 |
| %description% | ウェブチャットサービスの説明です。 |
| %profinfo.<プロパティ名>% | カスタマーの個人情報オブジェクトの任意のプロパティです。 |
| %guest_id% | ゲスト ID です。 UC のゲストのユーザーを識別するために自動採番される ID で、過去 1 か月以内のものと重複することはありません。 |
| %user_id% | ユーザー ID です。 UC の全種類のユーザーを識別するための ID です。 |
| %conf_id% | 会議 ID です。 UC の全種類の会議を識別するために自動採番される ID で、過去 1 か月以内のものと重複することはありません。 |
| %conf_ext% | 会議内線番号です。 |
| %webchat_id% | ウェブチャット ID です。 UC のウェブチャットの会議を識別するために自動採番される ID で、過去すべてのものと重複することはありません。 |
| %webchat_service_id% | ウェブチャットサービス ID です。 Webchat services で定義した ID です。 |
| %created_time% | ウェブチャット開始時刻です。 (Brekeke UC version 1.2.7.9 以降で使用可能) |
| %br% | 改行です。 |
3. Automated messages セクション
自動的に送信するメッセージを定義します。
| 項目 | 説明 |
| Automated message ID | 自動メッセージを識別する ID です。 |
| Display name | メッセージの送信者名欄に表示される文字列を設定します。 |
| Message | メッセージの内容を設定します。 (文字列内で使用できる変数はバージョン 1.1.5.x で実装予定) |
4. Webchat widgets セクション
カスタマーがアクセスするウェブチャットの入り口となるウィジェットを定義します。
| 項目 | 説明 |
| Chat server | カスタマーから見たときの UC サーバの URL を設定します。 初期値として、本画面にアクセスしている管理者から見たときの UC サーバの URL が設定されています。管理者がカスタマーとは別のネットワークからアクセスしている場合等、必要に応じて書き換えてください。 |
| Description | ウィジェットの説明です。 |
| Service ID | ウェブチャットサービスの ID を指定します。 |
| Type | ウィジェットのタイプです。 Pop-up は外部ウェブページにタグを貼り付け、そこからウィンドウをポップアップするスタイルです。 Embedded は外部ウェブページにタグを貼り付け、そのページ内部に HTML 要素をポップアップするスタイルです。 Page はカスタマーが直接ウェブチャットのページ URL にアクセスするスタイルです。 |
| Script | カスタマーサイドでウェブブラウザ上で実行されるスクリプトを設定します。 スクリプトについては、”4-1.Webchat widget script” を参照ください。 |
| Publish | クリックすると、ウェブページに貼り付けるための HTML タグ (Type が Pop-up または Embedded の場合) またはカスタマーがアクセスする URL (Type が Page の場合) を表示します。 |
4-1. Webchat widget script
Webchat widgets の Script に設定できるスクリプトを説明します。
- JavaScript のスクリプトを自由に記述できますが、option という名前のオブジェクトが変数で予め定義されており、option.events に { イベント名: イベントハンドラ関数, イベント名: イベントハンドラ関数 } という形式のオブジェクトを代入することによって、イベント名ごとに定められたタイミングでイベントハンドラ関数を実行させることができます。
- onBeforeLoad イベントのみ、option.events を使わずに、イベントハンドラ関数の中身を Script 欄内に記載することで実行させることもできます。(過去のバージョンとの互換性のための機能)
イベント:
| イベント名 | イベント引数 | 説明 |
| onBeforeLoad | (option) | カスタマーがウェブページにアクセスし、個人情報入力欄の表示処理が行われる前に実行されます。 |
| onBeforePopup | (option, window) | ポップアップウィンドウをロードする直前に実行されます。 ウィジェットのタイプが Popup の場合のみ実行されます。 |
| onAfterPopup | (option, window) | ポップアップウィンドウをロードした直後に実行されます。 ウィジェットのタイプが Popup の場合のみ実行されます。 |
| onAfterLoad | (option, window, UcUiAction, UcUiStore, Phone, inputValues) | 個人情報入力欄の表示完了時に実行されます。 |
| onBeforeCheckForm | (option, window, UcUiAction, UcUiStore, Phone, inputValues) | チャット開始時、個人情報入力欄の入力チェック直前に実行されます。 |
| onBeforeSignIn | (option, window, UcUiAction, UcUiStore, Phone) | チャット開始時、個人情報入力欄の入力チェック通過後に実行されます。 |
| onAfterSignIn | (option, window, UcUiAction, UcUiStore, Phone, inputValues) | チャット開始直後に実行されます。 |
- 各イベント引数のうち、option は以下に示すプロパティを持ったオブジェクトで、そのプロパティを書き換えることによりウィジェットの内容を変更することができます。
- window はチャットを実行しているウィンドウの window オブジェクト、inputValues は個人情報入力欄の key をキー、入力内容を値としたオブジェクトです。
オブジェクト option.initOption.configurations のプロパティ:
| プロパティ | 説明 |
| signInFormStyles | 個人情報入力画面のスタイルシートの指定内容を変更したい場合、クラス名ごとにスタイルオブジェクトを定義したオブジェクトを指定します。 以下のように指定します。 { スタイルを適用させたいクラス名: { スタイルのプロパティ名: スタイルの値, スタイルのプロパティ名: スタイルの値, … }, … } スタイルのプロパティ名はキャメルケースで記述します。 |
| signInButtonLabel | チャット開始ボタンのキャプションを文字列で指定します。 signInButtonInnerHTML を指定しない場合のみ有効です。 |
| signInButtonInnerHTML | チャット開始ボタンのキャプションを HTML で指定します。 |
| profinfoInputsLabel | 個人情報入力欄全体の一番上に表示するキャプションを文字列で指定します。 profinfoInputsInnerHTML を指定しない場合のみ有効です。 |
| profinfoInputsInnerHTML | 個人情報入力欄全体の一番上に表示するキャプションを HTML で指定します。
(Brekeke UC version 1.2.2.7以降で使用可能) |
| profinfoInputs | 個人情報入力欄を定義するオブジェクトを要素とする配列を指定します。 key で、その入力欄に対応する個人情報のプロパティ名を指定します。 以下のように指定します。 [ { key: “name”, “email” または “profinfo.<プロパティ名>”, label: キャプション文字列 (innerHTML を指定しない場合のみ有効), innerHTML: キャプション HTML, default: デフォルト値, mandatory: true なら入力必須、false なら未入力でもチャット開始可能、正規表現文字列を指定したらその正規表現に一致する入力が必須, error: mandatoryチェックエラー時の表示メッセージ, options: 選択肢の文字列配列、指定しなければ自由入力欄, placeholder: プレースホルダ文字列 (自由入力欄の場合のみ有効) }, … ] |
| webchatOptionsLabel | ウェブチャットオプション選択欄のキャプションを文字列で指定します。 webchatOptionsInnerHTML を指定しない場合のみ有効です。 |
| webchatOptionsInnerHTML | ウェブチャットオプション選択欄のキャプションを HTML で指定します。 |
| webchatOptions | ウェブチャットオプションの選択肢を定義するオブジェクトを要素とする配列を指定します。 2 要素以上の配列を指定したときのみ、ウェブチャットオプション選択欄が表示されます。 以下のように指定します。 [ { label: キャプション文字列, value: ウェブチャットオプションの JSON 文字列 }, … ] ウェブチャットオプションの JSON 文字列中に “{0}” という文字列を含めた場合、テキストボックスも表示され、そこに入力した文字列で “{0}” が置き換えられます。 デフォルトで、ウェブチャットサービスの ID を <Service ID> として [ { label: ” “, value: “{\”properties\”:{\”webchat_service_id\”:\”<Service ID>\”}}” } ] という配列が入っています。 (ウェブチャットオプションに指定できるプロパティは、バージョン 1.1.4.x 時点では properties.webchat_service_id のみなので、デフォルトのまま変更する必要はありません) バージョン 1.2.3.5 以降では、ウェブチャットオプションに properties.room というプロパティも指定できるようになりました。 同一 webchat_service_id かつ同一 room で複数のゲストがチャットを開始した場合、2 人目以降のゲストは 1 人目と同じ会議に入り、UC ユーザーを含めて 3 人以上でチャットを行うことができます。ただしカスタマーとして扱われるのは 1 人目だけです。 |
| autoSignIn | false を指定すると、個人情報入力画面をスキップできる場合でもスキップしません。 |
| confirmUnload | false を指定すると、チャット中にページを閉じようとしたときに確認を表示しません。 |
| sendButton | false を指定すると、送信ボタンを表示しません。 |
| cameraButton | false を指定すると、カメラボタンを表示しません。 (Brekeke UC version 1.2.5.7 以降で使用可能) |
| screenButton | false を指定すると、スクリーン共有ボタンを表示しません。 (Brekeke UC version 1.2.5.7 以降で使用可能) |
| webRTCTypeName | WebRTC タイプ名を文字列で指定します。 指定しなければデフォルト WebRTC タイプが使われます。 (Brekeke UC version 1.2.5.7 以降で使用可能) |
| menuOptions | オプションメニューの内容を表す文字列を要素とする配列を指定します。 「オプション」をクリックしたとき、ここに指定した並びでメニュー項目が表示されます。 “end” は「チャットを終了する」メニュー、”file” は「ファイルの送信」メニュー、”call” は「電話をかける」メニュー、”separator” はセパレータを表します。 デフォルトで [“end”] という配列が入っています。 |
オブジェクト option.widgetProps のプロパティ:
| プロパティ | 説明 |
| windowTitle | ウィンドウのタイトルを文字列で指定します。 |
| language | ウィジェットの言語を指定します。 “en” は英語、”ja” は日本語、未指定は自動になります。 |
| useWebRTC | ウィジェットで WebRTC 通話機能を使うかどうかを指定します。 true を指定すると使うようになります。 |
オブジェクト option.sidetabStyle のプロパティ (ウィジェットのタイプが Pop-up のときのみ有効):
| プロパティ | 説明 |
| className | タブのクラス名を文字列で指定します。 指定しなければ “brUCClientSidetab” |
| innerHTML | タブの innerHTML を文字列で指定します。 指定しなければ ” “ |
| extraStyle | タブに追加したいスタイルを文字列で指定します。 “<スタイルのプロパティ名>:<スタイルの値>;” という、CSS に記述するのと同じ形式を連ねた文字列で指定します。 |
| extraStyleOnHover | タブにマウスがホバーしているときの追加したいスタイルを文字列で指定します。 |
| delay | ウェブページを開いてからタブを表示するまでの時間をミリ秒で指定します。 |
| parentId | タブの親要素の ID を文字列で指定します。 指定しない場合は、document.body を親要素とします。 |
| getParent | タブの親要素を取得する関数を指定します。 これを指定した場合、parentId は無視されます。 |
| showFunction | タブを設置するための関数を指定します。 引数に設置前のタブ要素が渡されます。 これを指定した場合、parentId, getParent は無視されます。 |
| windowUrl | ポップアップウィンドウの URL を文字列で指定します。 指定しないと about:blank が使われますが、その URL だと Chrome ではマイクにアクセスできません。 通話機能を使うためには、親ウィンドウと同じドメインの任意のダミーページを指定する必要があります。 (ポップアップ直後、ダミーページに一瞬アクセスし、すぐにウェブチャットウィジェットの UI で上書き描画されます) |
| windowName | ポップアップウィンドウの名前を文字列で指定します。 window.open() メソッドの windowName 引数に指定する形式で記述します。 |
| windowFeatures | ポップアップウィンドウのオプションの引数を文字列で指定します。 window.open() メソッドの features 引数に指定する形式で記述します。 |
ウィジェットのタイプが Pop-up の場合の設定例:
function onBeforeLoad(option) {
option.initOption.configurations.signInButtonLabel='チャットを開始する';
option.initOption.configurations.profinfoInputsLabel='チャットお問い合わせ';
option.initOption.configurations.profinfoInputs=[{
key: 'name',
label: 'お名前',
mandatory: true
}, {
key: 'profinfo.company_name',
label: '会社名',
mandatory: false
}, {
key: 'email',
label: 'メールアドレス',
mandatory: true
}, {
key: 'profinfo.phone_number',
label: '電話番号',
mandatory: true
}, {
key: 'profinfo.category',
label: 'カテゴリ',
options: [
'',
'製品、またはサービスについてのご質問',
'販売パートナーについてのご質問',
'製品サポートについてのご質問'
],
mandatory: true
}];
option.widgetProps.windowTitle='CHAT';
option.sidetabStyle.extraStyle="background:url('http://test.example/webchat_tab.png');width:30px;height:30px;top:40px;bottom:auto;border-radius:3px 0px 0px 3px;";
option.sidetabStyle.extraStyleOnHover="width:130px;height:30px;";
}
option.events={
onBeforeLoad: onBeforeLoad
};
ウィジェットのタイプが Page で、URL のクエリで個人情報を指定できるようにする場合の設定例:
function onBeforeLoad(option) {
var queryObject = {};
var queryString = window.location.search;
if (queryString) {
var index = queryString.indexOf("?");
if (index >= 0) {
queryString = queryString.substr(index + 1);
}
var parameters = queryString.split("&");
for (var i = 0; i < parameters.length; i++) {
var kv = parameters[i].split("=");
if (kv.length === 2) {
var key = decodeURIComponent(kv[0]);
var value = decodeURIComponent(kv[1]);
queryObject[key] = value;
}
}
}
option.initOption.configurations.profinfoInputs = [{
key: 'name',
label: 'お名前',
options: queryObject['name'] ? [ queryObject['name'] ] : null,
mandatory: true
}, {
key: 'profinfo.company_name',
label: '会社名',
options: queryObject['company_name'] ? [ queryObject['company_name'] ] : null,
mandatory: false
}, {
key: 'email',
label: 'メールアドレス',
options: queryObject['email'] ? [ queryObject['email'] ] : null,
mandatory: true
}, {
key: 'profinfo.phone_number',
label: '電話番号',
options: queryObject['phone_number'] ? [ queryObject['phone_number'] ] : null,
mandatory: true
}];
option.widgetProps.windowTitle='CHAT';
}
option.events={
onBeforeLoad: onBeforeLoad
};