JavaScriptを使用したチャットチャネルのカスタマイズ

JavaScriptでライブチャット エージェントとコンタクトがリアルタイムでやり取りすることとチャットメッセージング コンタクトが任意のタイミングでチャットメッセージを送信し、返信を待つ非同期チャットをカスタマイズすることができます。CXoneは、デフォルトのカスタマイズと、それに対応するJavaScript APIコールを提供します。チャットをウェブサイトに追加するスクリプトタグに、これらのAPI呼び出しを含める必要があります。これらの機能を追加するには、ウェブサイトのコードにアクセスする必要があります。このページでは、JavaScriptを追加する場所と、含めるコードの正確な行について説明します。また、このページの情報を自信を持って使用するためには、JavaScriptやウェブ開発に精通している必要もあります。

例の表示

Classics, Inc.,の子会社であるJungleは、ウェブサイトの一部としてギフトショップを運営しています。管理者のMowgli Kiplingは、チャットエージェントがギフトショップの顧客と連携できるように、次のAPI呼び出しを設定しました。

• カスタム訪問者変数は、ギフトショップのページでコンタクトが閲覧するアイテムの色についての情報を収集します。この情報は、連絡先がチャットを開始したときにエージェントが利用できるようになります。
• カスタム訪問者イベントは、コンタクトがクリックした製品ごとに記録されます。製品が5回クリックされ、購入ボタンがクリックされなかった後、プロアクティブな「問題を決定しましたか？」ポップアップは連絡先にチャットを提供します。

チャットチャネル コンタクトがエージェントやボットとやり取りする方法。 チャネルには、音声、Eメール、チャット、ソーシャルメディアなどが含まれます。の次のような外観をカスタマイズできます：

• チャットの動作-チャットウィンドウの動作をカスタマイズします。これには、チャットウィンドウの開閉、またはゲームモードの有効化が含まれます。ゲームモードでは、エージェントを待っている間、顧客はゲーム「スネーク」をプレイできます。
• チャット情報-チャットウィンドウに表示される情報をカスタマイズします。これには、顧客の名前、エージェントイメージ、アクティビティステータスなどが含まれます。
• カスタムフィールド、ラベル、およびフレーズ-カスタムフィールドを定義するか、フィールドラベルをカスタマイズします。連絡先に表示される自動メッセージの代替テキストを構成することもできます。
• チャットウィンドウの外観:チャットウィンドウの外観をカスタマイズしますウェブページ上のウィンドウのサイズや位置などを変更できます。
• カスタムCSS -チャットウィンドウのカスタムCSSを定義します。
• プロアクティブアクション:顧客行動に基づいたプロアクティブアクションで体験をカスタマイズします。
• その他の機能-設定できるその他の機能は次のとおりです。
  • ホスト環境に特定のイベントをリッスンさせる。
  iOSまたはAndroidアプリに
  • チャットチャネルを統合します。
  • OAuth認証を有効にします。

            cxone('chat','enableChatAlwaysOnline');

            brandembassy('enableChatAlwaysOnline');

JavaScriptコールをチャットチャネルに追加します

まだ行っていない場合は、ライブチャットまたはチャットメッセージングチャネルを設定します。カスタマイズを追加する前に、チャネルをテストして、デフォルト設定で機能することを確認してください。チャットのカスタマイズを実稼働環境にリリースする前に、テスト環境で設定します。これにより、Webサイトの訪問者への影響を最小限に抑えることができます。また、カスタマイズが意図したとおりに機能することを確認するのにも役立ちます。

1. アプリセレクターをクリックして、次を選択します： ACD 。

2. デジタルに移動 > ポイントオブコンタクト(PoC)デジタル。

3. お客様のチャネルで、Webサイトのスクリプトをクリックします。
4. このページからJavaScriptコードをコピーして、Notepad++などのテキスト編集プログラムに貼り付けます。必ず<script>タグの開始と終了を含めてください。

5. Notepad++で、貼り付けたコードの終了</script>タグのすぐ上に、使用するJavaScriptコールを追加します。以下の画像例では、コメントは通話を追加する場所を示しています。使用可能なサポートされている通話は、このページの残りの部分で説明します。

   画像の表示

   

6. <script>タグの開始と終了を含むスクリプト全体をコピーして、Webサイトのページのヘッダーに貼り付けます。

7. 変更したページにアクセスし、テストチャットメッセージを送信して、カスタマイズが意図したとおりに機能することを確認します。

8. 全面的にテストされ、期待通りに動作したら、最終スクリプトをチャットウィジェットがあるはずの各ページのヘッダーにコピーします.

チャット動作のJavaScriptコール

このセクションの呼び出しでは、チャットウィンドウの動作を変更できます。

チャットウィンドウを開く

チャットウィンドウを自動的に開きます。デフォルトの動作では、連絡先がチャットアイコンをクリックすると、チャットウィンドウが開きます。

            brandembassy('openChatWindow');

チャットウィンドウを閉じる

チャットウィンドウを自動的に閉じます。デフォルトの動作では、連絡先がチャットアイコンをクリックすると、チャットウィンドウが閉じます。

            brandembassy('hideChatWindow');

チャットを常にオンライン

エージェントがオンラインでない場合でも、エージェントがいるようにチャットウィンドウを表示します。

            brandembassy('chat','enableChatAlwaysOnline');

以前のチャットからのカスタムフィールドの持続

インタラクションが開始された後、カスタムフィールドを持続させるか、ローカルストレージからパージするかを選択できます。これにより、コンタクトとのすべてのインタラクションにわたり表示され続けるカスタムフィールドを選択できるようになります。'field_id'はIdent フィールドの値を参照し、カスタムフィールドを作成します。

        cxone('chat','enablePrecontactSurveyFieldAutoFill'('field id');

アダプティブカードからポストバックデータを送信する

Studioアクションとボットはチャット経由でコンタクトにアダプティブカードを送信することができます。デジタルチャットがポストバックデータをStudioまたはボットに送信するには、ハンドラーを有効にする必要があります。アダプティブカードハンドラーは、ボットまたはStudioアクションの中で機能し、アダプティブカードとのエンゲージメントを管理し、対応します。ハンドラーは、ボタンをクリックしたりドロップダウンメニューからオプションを選択したりするなど、ユーザーがアダプティブカードのコンポーネントとインタラクトするときにアクティブ化されます。ハンドラーはユーザーの入力を解読し、取るべき適切なレスポンスやアクションを決定します。デフォルトハンドラーコマンドとメッセージ送信コマンドを追加して、Studioやボットがそれに応じて応答したり、報告用にアダプティブカードデータを保存できるようにします。カスタムハンドラーコマンドでデフォルトのハンドラーをオーバーライドすることもできます。

例を見る

							<script>
								(function (i, s, o, r, g, v, a, m) {
								g = v ? g + '?v=' + v : g; i['CXoneDfo'] = r;
								i[r] = i[r] || function () {(i[r].q = i[r].q || []).push(arguments)}; i[r].l = +new Date(); i[r].u = g;
								a = s.createElement(o); m = s.getElementsByTagName(o)[0]; a.async = true;
								a.src = g + '?' + Math.round(Date.now() / 1000 / 3600); m.parentNode.insertBefore(a, m);
								})(window, document, 'script', 'cxone', 'https://web-modules-de-na1.staging.niceincontact.com/loader/1/loader.js');

								cxone('init', '1032');
								cxone('chat', 'init', 1032, 'chat_5184dc2e-0c75-4265-8a2b-4221c5aebfe1');
    
								cxone('chat', ‘adaptiveCardOnExecuteAction’, 'button1Submit', (action, chatSdkInstance) => {
								let messageContent = {
								type: "TEXT",
								payload: {
								text: action.title
								},
								postback: action.id
								}
      
								chatSdkInstance.sendMessage(messageContent)
								});
							</script>

デフォルトのアダプティブカードハンドラーコマンドを追加します：

            adaptiveCardOnExecuteAction(actionId: string, callback: (action: node_modules/adaptivecards/src/card-elements.ts::Action) => void)

メッセージコマンドを送信します：

            sendMessage(messageContent: MessageContent)

カスタムハンドラーコマンドを作成します：

					{
					"acType": "Action.Execute", // type of action Action.Execute or Action.Submit
					"acVerb": "null|string", // only if `verb` is provided in the Action
					"acActionId": "null|string" // only if id is provided in the Action
					"acData": { // `data` are provided in Action
					"firstName": "John",
					"lastName": "Doe",
					"_messageText": "Submitted something for you"
					}
			}

インバウンドメッセージの例を表示します

							{
							...,
							"messageContent": {
							"type": "TEXT",
							"payload": {
							"text": "Submitted something for you", // use Action.Title if _messageText is not provided (in case Action.Title is not provided, send Action.type)
							},
							"postback": "{\"acType\":\"Action.Execute\",\"acData\":{\"firstName\":\"John\",\"lastName\":\"Doe\",\"_messageText\":\"Submitted something for you\"}}"
							}
							}
					}

アウトバウンドメッセージの例を表示します

							{
							"thread": {
							"idOnExternalPlatform": "788a67af-263d-48b1-b67e-eb75838c6509"
							},
							"messageContent": {
							"type": "ADAPTIVE_CARD",
							"payload": {
							"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
							"type": "AdaptiveCard",
							"version": "1.4",
							"body": [
							{
							"type": "TextBlock",
							"text": "Present a form and submit it back to the originator"
							},
							{
							"type": "Input.Text",
							"id": "firstName",
							"label": "What is your first name?"
							},
							{
							"type": "Input.Text",
							"id": "lastName",
							"label": "What is your last name?"
							}
							],
							"actions": [
							{
							"type": "Action.Execute",
							"title": "Fire!",
							"data": {
							"_messageText": "Submitted something for you"
							}
							}
							]
							}
							}
					}

認可コードの設定

oAuthフローの認可コードを設定します。OAuthは、認証プロトコルです。これにより、パスワードを教えることなく、あるアプリケーションがあなたに代わって別のアプリケーションとインタラクトすることができるようになります。これはチャット初期化前に呼び出される必要があります。

            brandembassy('setAuthorizationCode', 'authorization_code');

新しいチャットセッションを自動開始する

現在進行中でない場合は、新しいチャットメッセージング コンタクトが任意のタイミングでチャットメッセージを送信し、返信を待つ非同期チャットまたはライブチャット エージェントとコンタクトがリアルタイムでやり取りすることセッションを作成します。連絡先でエージェントを圧倒しないように、Webサイトのトラフィックの少ないページでこの通話を使用してください。

Digital Experienceは、新しいケースを作成し、チャットセッションの最初のメッセージが送信されたときにキューに追加します。チャットセッションの開始時に、非表示の自動メッセージが顧客に代わって送信されます。これにより、プロセスをより早く開始することにより、連絡先がエージェントを待機する時間を短縮できます。チャットセッションは、連絡先がチャットアイコンをクリックして会話を開始したとき、またはチャットウィンドウが開いて自動開始されたチャットセッションが開始されたときに開始されます。最初のメッセージは顧客には表示されませんが、エージェントはそれを見ることができます。

チャットセッションを自動開始すると、コンタクト前アンケートフォームがスキップされます。このため、連絡先に関する情報を収集するには、他の方法を使用する必要があります。たとえばエージェントに、顧客カードに情報を手動で入力させることができます。OAuth統合を使用して顧客認証を構成することもできます。

自動開始されたケースのルーティングは、 で システムはルーティングキューを使用して、どのエージェントにケースをルーティングするかを決定します。 システム管理者は、特定のケースがそのタイプに精通したエージェントにルーティングされるように、ルーティングキューを作成します。構成されたルーティングキューDigital Experienceに従って行われます 。ライブチャットセッションでは、利用可能なエージェントがいない場合、チャットウィンドウに利用可能なエージェントを待機中というメッセージが表示されます。

チャットセッションを自動開始するには、次の通話を次の順序で使用します。

            brandembassy('openChatWindow');

brandembassy('autoStartSession');

スクリプトに追加の呼び出しを追加する場合、 autoStartSessionは常にスクリプトの呼び出しである必要があります。例：

            // set customer name (as this is required field)
brandembassy('setCustomerName', 'Elizabeth');

// open chat window so user can start to chat
brandembassy('openChatWindow');

// and finally start the new chat session (without the pre-chat form)
brandembassy('autoStartSession');

同時チャットセッションを有効にします

コンタクトに同じブラウザーで複数のチャットセッションを開始させることができます。相手が1つのブラウザータブでアクティブなチャットをしている場合、新しいブラウザータブまたはウィンドウでコンタクトに2つ目のチャットを開始させます。

この動作を有効にするには、チャットデータの保存方法を指定する必要があります。オプションは2つあります。

• localStorage：タブやウィンドウを閉じた後も、データはブラウザーに留まります。これは、デフォルトのストレージ方法です。複数のチャットセッションが異なるタブで同時に開いている場合、それらはすべて同じインタラクションとみなされます。チャットの会話やエクスペリエンスは、すべてのタブにわたり同じものです。

• sessionStorage：データは個々のタブまたはウィンドウに対して保存され、タブまたはウィンドウが閉じるとクリアされます。ユーザーは、異なるタブまたはウィンドウ間で複数のチャットセッションを作成することができます。各タブでのチャットセッションは、固有のインタラクションとみなされます。

同時チャットセッションを有効にするには、次の例に示すように、sessionStorageの値を持つstorageTypeキーを追加します。

localStorageオプションを使用してなおかつ会話履歴をパージしたい場合は、チャット終了後にcustomerIDを削除するイベントリスナーを作成できます。

brandembassy(
	'init',
	'MY_BRAND_ID_123',
	'MY_CHANNEL_ID_321',
	undefined,
	{
		storageType: 'sessionStorage',
	},
);

会話履歴のパージ

チャット会話終了後、会話履歴を削除します。これは、チャットのデフォルトのストレージオプションであるローカルストレージを使用する場合に有用です。このストレージオプションは、ブラウザーのインスタンスが終了した後もデータを保存します。この場合、customerIDをローカルストレージからクリアすることで、会話履歴を特別に削除することができます。次の例では、チャットからのcaseStatusChangedイベントをリッスンするイベントリスナーを作成します。これはチャットセッションが終了したことを示す。その後、removeItemコマンドが呼ばれ、customerIDがブラウザーのローカルストレージから削除されます。

brandembassy('onPushUpdate', ['CaseStatusChanged'], pushUpdatePayload => { 
	if (typeof pushUpdatePayload === 'undefined' || typeof pushUpdatePayload.data === 'undefined') { 
		return; 
	}  
	const { status } = pushUpdatePayload.data.case || {};   
	if (typeof status === 'undefined') { 
		return; 
	}   
	// When a previous case has been closed, this will set the custom fields again. 
	if (status === 'closed') { 
		localStorage.removeItem('_BECustomerID') 
		); 
	} 
}); 

初期自動連絡メッセージをカスタマイズする

Digital Experienceは、新しいケースを作成し、チャットセッションの最初のメッセージが送信されたときにキューに追加します。チャットセッションの開始時に、非表示の自動メッセージが顧客に代わって送信されます。これにより、プロセスをより早く開始することにより、連絡先がエージェントを待機する時間を短縮できます。チャットセッションは、連絡先がチャットアイコンをクリックして会話を開始したとき、またはチャットウィンドウが開いて自動開始されたチャットセッションが開始されたときに開始されます。最初のメッセージは顧客には表示されませんが、エージェントはそれを見ることができます。

デフォルトのメッセージは、顧客が会話を開始するためにクリックするボタンのテキストです。最初の自動メッセージのテキストは、次の3つの方法でカスタマイズできます。

• デフォルトのボタンテキストを上書きします。

                brandembassy('sendFirstMessageAutomatically', 'Hello');

• 最初のメッセージを動的に変更します。

                brandembassy('setFirstAutomatedMessageContent', 'Hello, I have a question');

• 翻訳ページのメッセージテキストを変更します。

初期自動メッセージを連絡先に表示する

連絡先が最初の自動メッセージを表示できるようにする場合は、次の呼び出しをスクリプトに追加します。

            brandembassy('hideFirstSentMessage', false);

ケース作成の遅延

Digital Experienceは、新しいケースを作成し、チャットセッションの最初のメッセージが送信されたときにキューに追加します。チャットセッションの開始時に、非表示の自動メッセージが顧客に代わって送信されます。これにより、プロセスをより早く開始することにより、連絡先がエージェントを待機する時間を短縮できます。チャットセッションは、連絡先がチャットアイコンをクリックして会話を開始したとき、またはチャットウィンドウが開いて自動開始されたチャットセッションが開始されたときに開始されます。最初のメッセージは顧客には表示されませんが、エージェントはそれを見ることができます。

この呼び出しを使用してケースを作成する前に、連絡先の実際の最初のメッセージを待機するようにDigital Experienceを構成できます。

            brandembassy('sendFirstMessageAutomatically', false);

ゲームモードを有効化

エージェントを待っている間、連絡先がゲームスネークをプレイできるようにします。

            brandembassy('allowGameMode');

満足度調査の自動化

満足度調査を自動的に検出し、ポップアップに表示するかどうかを有効または無効にします。これにより、それらを検出して表示するかしないかを有効または無効にします。

            brandembassy('automatedSatisfactionSurveyModal', 'true');
brandembassy('automatedSatisfactionSurveyModal', 'false');
//if not defined, the default is 'true'

チャット情報JavaScriptコール

これらの通話を使用すると、チャットセッション中に連絡先が利用できる情報をカスタマイズできます。

顧客アイデンティティIDの取得

チャットに参加している顧客の一意の識別子を返します。

            brandembassy('getCustomerIdentityId');

コンタクト前アンケートフォームを非表示にする

コンタクト前アンケートフォームは、 チャットメッセージング コンタクトが任意のタイミングでチャットメッセージを送信し、返信を待つ非同期チャットセッションの開始時に表示されます。名前など、連絡先に関する情報を収集します。必要に応じて、コンタクト前アンケートフォームを非表示にして、コンタクトがチャットメッセージングセッションを開始するとすぐにチャットウィンドウを表示することができます。

            brandembassy('hidePreSurvey');

キューカウンターを非表示にする

キューカウンターは、エージェントのキューにある番号に基づいて、コンタクトにエージェントがどのくらい早く彼らを支援できるようになるかを知らせます 。コンタクトがエージェントに正常にルーティングされた後、キューカウンターを非表示にすることができます。これにより、エージェントはコンタクトに気づかれることなく、受信トレイからカードを削除することができます。

            brandembassy('hideQueueCounterAfterAssignment');
brandembassy('hideAssignedAgent');
brandembassy('hideSystemMessages');

チャット通知音声をミュートにします

チャット通知音をオフに切り替えることができます。チャット通知音はデフォルトでオンになっています。これは、他のチャットサウンド設定に関係なく設定する必要があります。値を'false'に変更することでチャット通知音声をオンに戻すたことができます。

            brandembassy('muteAudioNotification', 'true');
// OR
brandembassy('muteAudioNotification');

ブラウザーの言語翻訳をオーバーライドします

設定された翻訳に対し、ユーザーのブラウザーの言語設定やカスタマイズされたロケールをオーバーライドします。例えば、コンタクトのブラウザーの言語設定に関係なく、特定のテキストが常に英語で表示されるようにすることができます。

            brandembassy('init', 'brandId', 123, 'locale');

アクティビティステータスの設定

アクティビティバーのメッセージを変更します。たとえば、チャットメッセージングセッションの応答時間を伝えるために使用できますチャットメッセージングは非同期形式のチャットであるため、連絡先はエージェントからの連絡を待つ必要があるため、これは役立つかもしれません。

            brandembassy('setStatusMessage', 'We typically reply within 3 hours.');

エージェントのイメージを設定

チャットウィンドウに表示されるエージェントの画像を動的に変更します。デフォルトでは、 Digital Experienceはエージェントのプロファイルの画像を使用しますこの呼び出しをスクリプトに含めると、コードスニペットのURLで指定された画像が使用されます。サンプルURLを、チャットで使用する画像のURLに置き換えます。

            brandembassy('setAgentImage', 'http://classics.com/images/agents/elizabeth_bennet.png');

顧客IDを設定する

チャットに参加する顧客の一意の識別子を設定します。

            brandembassy('setCustomerId', 'customer_id');

顧客名を設定

顧客名は、コンタクト前アンケートフォームのフィールドで、そのコンタクトは、チャットメッセージング コンタクトが任意のタイミングでチャットメッセージを送信し、返信を待つ非同期チャットチャネルで、エージェントとチャットする前に入力する必要があります。このAPI呼び出しは、フィールドに動的に入力されます。

            brandembassy('setCustomerName', 'Elizabeth');

日付形式の設定

絶対日付形式(2035年12月03日)または相対日付形式(今日、月曜日)を使用するように設定可能です。

            brandembassy('setDateFormat', 'date_format');
// date_format can be 'absolute' or 'relative'

ロケールを設定する

チャットウィンドウの翻訳用ロケールを設定します。

            brandembassy('setLocale', 'locale');

ケース情報を表示

チャットメッセージング コンタクトが任意のタイミングでチャットメッセージを送信し、返信を待つ非同期チャットチャネルのみ。連絡先にケース情報を表示します。

            brandembassy('showCaseInfo');

トランスクリプトの送信ボタンの表示/非表示

トランスクリプトを送信ボタンを表示させる場合、連絡先が自分自身にチャットトランスクリプトを送信できるようにチャットチャネルを設定する必要があります。このオプションは、チャットメッセージングまたはライブチャットに設定します。

            brandembassy('hideSendTranscript');
brandembassy('showSendTranscript');

システムメッセージの表示／非表示

エージェントの割当履歴などのシステムメッセージを表示または非表示にします。

            brandembassy('chat','hideSystemMessages');
brandembassy('showSystemMessages');

利用規約

チャットウィンドウ内から連絡先が利用規約ドキュメントを利用できるようにすることができます。この関数は、ウィンドウにボタンを追加しますボタンのラベルとスタイル、および連絡先がボタンをクリックするとどうなるかをカスタマイズできます。クリック時のアクションでは、使用条件を次のように表示できます。

• 内部ウィンドウ
• 外部リンク

            // Internal Modal Window
brandembassy('showTermsOfUse', 'Show terms of Use', 'modal' , 'Our terms of use are ...');

// External Link
brandembassy('showTermsOfUse', 'Show terms of Use', 'externalLink' , 'http://yourdomain.com/terms-of-use');

// If you want to explicitely disable this feature, you can use
brandembassy('hideTermsOfUse');

ボタンまたは内部ウィンドウの外観をカスタマイズするには、このページで説明されているCSS API呼び出しを使用します。

カスタムフィールド、ラベル、およびフレーズ

カスタムフィールドの作成と入力

この通話で使用できるカスタムフィールドは、顧客カードで使用できるものと同じです。チャットウィンドウを開く前にこれらのコールを使用すると、コンタクト前フォームのフィールドにJavaScriptコールに含めるデータが入力されます。

ケースカスタムフィールドの値を定義するには:

            brandembassy('setCaseCustomField', 'ident_of_custom_field', 'value_of_custom_field');

顧客カードカスタムフィールドの値を定義する手順は次の通りです。

            brandembassy('setCustomerCustomField', 'ident_of_custom_field', 'value_of_custom_field');

チャットのラベルとフレーズをカスタマイズ

デジタルチャットチャネルが使用するラベルやフレーズの多くをカスタマイズしたり、カスタマイズを定義したりできます。フレーズや画面ラベルを動的に変更する必要がある場合は、これらのJavaScriptコールを使用します。

単一のメッセージまたはラベルを変更するには：

            brandembassy('setTranslation', 'key', 'your translation');

複数のメッセージまたはラベルを変更するには：

            brandembassy('setTranslations', {
   key1: 'your custom label',
   key2: 'your custom message'
});

クリックして、カスタマイズ可能なメッセージとラベルを表示します。

中括弧は、システムが実際のデータで置き換える変数を示します。たとえば、{caseNumber}はコンタクトのチャットセッションのケース番号に置き換えられます。

キー	デフォルトのラベル/メッセージ
allAgentsForQueueAreBusy	あなたのキューに専念するすべてのエージェントは現在忙しいです。{queue、plural、one {is} other {are}} <strong> {queue、number} </ strong> {queue、plural、one {person} other {people}}がキューの前にあります。
beginButton	チャットを始めましょう！
キャンセル	キャンセル
caseNumber	Case #{caseNumber}
変更	変更
chattedWith	あなたは今チャットをしました
commonErrorText	予期しないエラーが発生しました。後でもう一度お試しください。
完了	完了
dragAndDropDropzone	ここにファイルをドラッグアンドドロップして送信します
dragAndDropDropzoneRejected	ファイルをアップロードできません:(
EmailLabel	Eメールアドレス
endChat	チャットを終了
endChatTitle	この会話を終了してもよろしいですか？
endGame	ゲーム終了
エンディング	チャットを終了しています...
fileSendingFailed	ファイルの送信に失敗
getTranscriptDescription	この会話の記録を次のEメールアドレスに送信します。
getTranscriptLink	チャットトランスクリプトを取得
無効なトークン	無効なトークン
ipAddressBlocked	IPアドレスがブロックされています
読み込み中	読み込み中...
loadPreviousButton	前の会話を読み込む
messageLabel	メッセージ
networkErrorText	ネットワークエラーが発生しました。もう一度お試しください。
newCase	新しいケース
noAgentOnlineForQueue	現在、キューに使用できるエージェントはありません。
オフライン	オフライン
offsetFormDesc	現在ご利用いただけません。
offsetFormSuccessMsgHead	ありがとうございました！
offsetFormSuccessMsgSub	あなたのEメールが正常に送信されました。すぐにご連絡いたします。
オンライン	オンライン
onlineFormText	チャットを開始するには、名前を教えてください。私たちのエージェントの1人がすぐに対応します。
pleaseSelect	選んでください...
搭載	搭載
準備セッション	セッションの準備...
replyBoxPlaceholder	ここに書き込み、<Enter>を押して送信します
再試行	再試行
sendFileTextSize	{filesize}より小さいファイルをアップロードしてください
sendFileTextSupportedFormat	サポートされている形式。
sendFileTextSupportedFormatDesc	画像、動画、{fileFormats}
sendMessageButton	メッセージを送信
sendNewEmail	新しいメールを送信
sendTranscript	トランスクリプトを送信
snakeWaiting	あなたはキューに {queue}しています。
startChatInPopup	私たちにご連絡ください！
startNewChat	新しいチャットを開始
statusReconnecting	接続しようとしています…
SurveySuccesfullySent	ご意見ありがとうございます！
systemChattingWith	現在、{name}とチャット中です。
トピック	トピック
transciptSentFailed	送信に失敗しました。
transciptSuccesfullySent	トランスクリプトが正常に送信されました。
tryAgainButton	もう一度試す
unexpectedError	予期しないエラー。
validateInvalidEmail	メールアドレスが無効です。
validationMandatory	このフィールドは必須です
validationShorterName	短い名前を使用してください
validationShortMessage	あなたのメッセージは短すぎます
waiting	待っている...
waitingDescription	私たちのエージェントの1人がまもなくあなたに話しかけます。
waitingFooter	<スペースバー>を押すと、待機時間が短くなります。
waitingForAgent	エージェントを待っています...
waitingInQueue	エージェントを待っています。あなたはキューに {queue}しています。
yourNameLabel	あなたの名前

カスタムフィールドを翻訳する

チャットウィンドウに表示されるカスタムフィールドを翻訳することができます。

            brandembassy('chat', 'setCustomTranslations', {
    myCustomFieldATranslationKey: "Custom field value A",
    myCustomFieldBTranslationKey: "Custom field value B",
});

チャットウィンドウの外観呼び出し

チャットウィンドウの外観を変更できます。

チャットを閉じるアイコン

trueに設定すると、設定メニューのチャット終了オプションの代わりにXアイコンがウィンドウに表示されます。

            brandembassy('enableCloseIcon', true);

割り当てられたエージェントを非表示にする

            brandembassy('hideAssignedAgent');

ヘッダーを非表示

            brandembassy('hideHeader');

ポップアップを非表示

            brandembassy('hidePopups');

顧客アバターを表示する

            brandembassy('showCustomerAvatar');

送信ボタンを表示する

            brandembassy('chat','showSendButton');

サイズ

チャットウィンドウの幅と高さをカスタマイズします。CSS仕様でサポートされている絶対単位または相対単位を使用できます。

            brandembassy('setWindowWidth', '100%');
brandembassy('setWindowHeight', '100%');

フルディスプレイモード

            brandembassy('setFullDisplay');
// OR
brandembassy('chat','setWindowWidth', '100%');
brandembassy('chat','setWindowHeight', '100%');

位置とオフセット

setPositionX通話は、画面の左側または右側を開始位置として定義します。setOffsetXおよびsetOffsetY通話は、チャットウィンドウが開始点からそれぞれ水平方向および垂直方向にオフセットされるピクセル数を定義します。

            // set horizontal starting position
brandembassy('setPositionX', 'right');
													
// set horizontal and vertical offset
brandembassy('setOffsetX', '40'); // default = 20
brandembassy('setOffsetY', '40'); // default = 20

返信ボックスの文字数制限を設定

            brandembassy('setReplyBoxLimit', '280'); // default = null

データセレクターを使用したカスタムCSS

独自のCSSを追加することで、チャットウィンドウの外観をカスタマイズすることができます。data-selector属性により、スタイルを設定したいチャットウィンドウの部分を指定します。以下のドロップダウンには、data-selector属性で選択できるすべてのコンポーネントのリストがあります。データセレクターを使用すると、カスタムCSSを適用するチャットウィンドウの部分を指定できます。data-selectorの後に、中括弧の中にスタイルを追加します。複数の要素にスタイルを設定する場合は、すべてのCSSを単一のJavaScriptコールに追加する必要があります。同じJavaScriptコールを複数回使用した場合、最後のJavaScriptコールがそれまでのすべてのCSSをオーバーライドします。また、チャット用のCSSをCXoneで直接カスタマイズすることもできます。

データセレクターでカスタムCSSを追加するには、このJavaScriptコールを参照として使用します。

            brandembassy('setCustomCss', '[data-selector="CUSTOMER_MESSAGE_BUBBLE"] {color: white !important; background: black !important} 
	[data-selector="CONTENT"] {background: green !important}`);

使用可能なデータセレクター

• ACTIVITY_BAR
• AGENT_MESSAGE
• AGENT_MESSAGE_BUBBLE
• AVATAR
• CONTENT
• CUSTOMER_MESSAGE
• CUSTOMER_MESSAGE_BUBBLE
• DELIMITER
• DROPDOWN_MENU
• HEADER
• INPUT
• IS_TYPING
• MESSENGER
• POPUP
• PRECONTACT_SURVEY
• PRECONTACT_SURVEY_DESCRIPTION
• PRIMARY_BUTTON
• REPLY_BOX
• SECONDARY_BUTTON
• SEND_BUTTON
• TEXTAREA
• TEXT_BUTTON
• WIDGET
• WINDOW

カスタムCSSのAPI呼び出しの例を表示する

次のJavaScriptコールにより、背景が黒でテキストが白のチャットバブル：
が発生します

 brandembassy('setCustomCss', '[data-selector="CUSTOMER_MESSAGE_BUBBLE"] {color: white !important; background: black !important};');

この画像は、APIコール例の結果を示しています：

プロアクティブアクション

このセクションの通話は、顧客の行動に基づいて積極的にチャットに参加させることができます。

トリガーの実行

trigger_idで定義されたワークフロー自動化トリガーを開始します。

            brandembassy('executeTrigger', 'trigger_id');

訪問者イベントの設定

定義済み顧客行動(イベント)をレポート目的に保存します。この呼び出しをCXoneモバイルSDKで使用する場合、event_typeはcustom_event_typeに変更されます。

            brandembassy('setVisitorEvent', 'event_type', 'custom_event_data');

訪問者変数の設定

定義済み顧客の情報をレポート用に保存します。

            brandembassy('setVisitorVariable', 'variable_identifier', 'variable_value');

コンバージョンの保存

レポート作成のために、顧客の行動をコンバージョンとして保存します。

            brandembassy('storeConversion', 'conversion_type', 'conversion_value', 'conversion_date'); 
// conversion_date is optional, default is now

ウェブ訪問者タグ

ウェブサイト上で特定の行動を起こしたコンタクトをタグ付けすることができます。この機能は、Digital Experienceのタグを使用し、ガイドを必要とします。

コンタクトにタグを追加する手順は次の通りです。

            brandembassy('assignTag', 'tagID');

連絡先から番号を選択する手順は次の通りです。

            brandembassy('removeTag', 'tagID');

サードパーティ製アプリケーションとの連携

このセクションの通話を使用すると、特定のチャットイベントが発生したときにプッシュ通知を受け取ることができます。

チャットウィンドウでアクティブスレッドを認識する

            brandembassy('getOngoingThreads');

チャットウィンドウで進行中の連絡先を認識する

            brandembassy('getOngoingContact')

特定のチャットイベントのプッシュ通知を受信する

クリックして、互換性のあるイベントを表示します

以下の例では 「イベント」 の代わりに、次のいずれかの入力値を使用します。

• CaseToRoutingQueueAssignmentChanged

• PageViewCreated

• MessageCreated

• MessageDeliveredToUser

• MessageDeliveredToEndUser

• MessageSeenByUser

• MessageSeenByEndUser

• MessageReadChanged

• MessageAddedIntoCase

• CaseInboxAssigneeChanged

• CaseCreated

• CaseStatusChanged

• SenderTypingStarted

• SenderTypingEnded

• MessageNoteCreated

• ContactRecipientsChanged

1つのチャットのイベントの通知を受け取る場合：

            brandembassy('onPushUpdate', 'event', callback);

複数のチャットのイベントの通知を受け取る場合：

            brandembassy('onPushUpdate', ['event', 'event', 'event'], callback);

すべてのチャットのイベントの通知を受け取る場合：

            brandembassy('onAnyPushUpdate', callback);

AndroidまたはiOSアプリケーションに統合する

チャットをAndroidまたはiOSアプリに統合できます。ネイティブアプリケーションは、JavaScriptの初期化コードが追加されたWebViewを使用する必要があります。このサンプルコードは、このページのJavaScriptを使用して、チャット関数の外観と動作を変更します。

            <script async type=”text/javascript”>
  (function(i,s,o,r,g,v,a,m){g=v?g+'?v='+v:g;i['BrandEmbassy']=r;
    i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)};i[r].l=+new Date();
    a=s.createElement(o);m=s.getElementsByTagName(o)[0];a.async=1;
    a.src=g+'?'+Math.round(Date.now()/1000/3600);m.parentNode.insertBefore(a,m)
  })(window,document,'script','brandembassy','https://livechat-static.brandembassy.com/3/chat.js');

  //init of Livechat
  brandembassy(‘init’, BRAND_HASH);

  // hiding unwanted UI elements
  brandembassy('hideHeader');
  brandembassy('hidePopups');
 
  // stretching livechat to full width and height
  brandembassy('setFullDisplay');

  // Customer's name
  brandembassy('setCustomerName', 'CUSTOMER_NAME');

  // Other optional Custom Fields
  brandembassy('setCustomField', 'CUSTOM_FIELD_IDENT', 'CUSTOM_FIELD_VALUE');
    
  // Start Chat
  brandembassy('openChatWindow');
  brandembassy('autoStartSession');

</script>