JavaScript

を使ってチャットチャネルをカスタマイズする

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

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

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

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

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

現在、すべてのJavaScriptAPIは、通話ごとにBrand Embassyローダーをサポートしています。 お客様のウェブサイトでスタンドアロンCXone Mpowerチャットを使用している場合、これらのコールはすべて新しいCXone Mpowerローダーもサポートしています。 最終的には、すべてのチャット用JavaScript APIは、Brand Embassyの代わりにCXone Mpowerローダーを使用することになります。

JavaScript呼び出しの構造は、使用するローダーによって異なります。 両方の構造を同時に使用することはできません。 どのローダーを使うかによって、どちらか一方だけを使います。

CXone Mpower Guideを使用してウェブサイトにチャットを実装する場合は、CXone Mpowerローダーを使用します。 このページのすべてのコールがGuideでサポートされているわけではありませんが、Guideのドキュメントには、すべてのサポートされているJavaScriptコールがリストされています。

デジタルチャットまたはCXone Mpowerを通じて、Guideローダーを使用する場合は、次のように呼び出しを構成します：


            cxone('chat','enableChatAlwaysOnline');

Brand Embassyローダーを使用する場合、次のように呼び出しを構成します：{123 } 


            brandembassy('enableChatAlwaysOnline');
チャットチャネルに

通話を追加するJavaScript

まだそれを行っていない場合は、

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

スクリプトとAPI呼び出しを表示どおりにコピーします。 予期しない変更を行うと、チャネルが誤動作する可能性があります。

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

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

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

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

    APIコマンドを追加する場所を示すコメント付きのJavascript初期化スクリプトの例。

  6. 開始と終了を含む、スクリプト全体をコピーして貼り付けます<script> tags, into the header of a page of your website.

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

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

チャットの動作JavaScript通話

このセクションの通話を使用すると、チャットウィンドウの動作を変更できます。

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

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


            brandembassy('openChatWindow');

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

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


            brandembassy('hideChatWindow');

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

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


            brandembassy('chat','enableChatAlwaysOnline');

前のチャットのカスタムフィールドを保持する

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


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

Adaptive Card

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


							<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>

デフォルトのAdaptive Cardハンドラを追加：コマンド：


            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\"}}"
							}
							}
					}
{ 255
アウトバウンドメッセージの例を見る 

							{
							"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');

プレコンタクトアンケートのプレフィルフィールドを設定

以前に入力されたカスタムフィールドの値を、後のフィールドまたはインタラクションでオートフィルオプションとして表示できます。 特定のIDにより、チャットウィンドウがどのカスタムフィールドの値を保存するかを識別します。 コンタクトが新しい会話を開始すると、以前の会話で使用したカスタムフィールドが自動的に利用可能になります。 これにより、Eメールアドレスなど、以前のチャットセッションで入力した情報を新しいチャットセッションでも入力する必要がある場合に時間を節約できます。 オートフィルオプションとして表示したいフィールドが複数ある場合は、それらすべてを同じAPI呼び出しに含めます。 

            cxone('chat', setPrecontactSurveyPrefilledFields', ['fieldIdent1', 'fieldIdent2']);

新規チャットセッションを自動開始

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

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

最初の非表示メッセージのテキストをカスタマイズできます。

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

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

チャットセッションを自動開始するには、これらの呼び出しを以下の順序で使用します：

スクリプトに呼び出しを追加した場合は、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);
{365 }ケース作成を遅らせる

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');
 

利用規約

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

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

            // 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呼び出しを使用します。

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

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

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

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


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

顧客カードカスタムフィールドの値を定義するには：{ 509}


            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}はコンタクトのチャットセッションのケース番号に置き換えられます。ろうあなたのキュー専用のエージェントは現在ビジーです。

変更変更chattedWith先ほどチャットしました{577 }commonErrorTextファイルをアップロードできません：(EmailLabelEメールendChatendChatTitleendGame{ 621}ゲーム終了エンディングチャットの終了...fileSendingFailedファイル送信に失敗しました{ 659}読み込み中読み込み中...loadPreviousButton前の会話を読み込むメッセージラベルメッセージnetworkErrorTextネットワークエラーが発生しました。 。{ 707}offlineFormSuccessMsgHeadありがとう！ }<enter>送信する再試行再試行sendFileTextSize{filesize}より小さいファイルをアップロードしてください766}対応フォーマット。sendNewEmailsendTranscript{ 799}snakeWaitingあなたは{queue}内にいます。{ 821}アンケート正常に送信されましたフィードバックありがとうございます！とチャットしていますvalidationShorterName短い名前を使用してくださいvalidationShortMessageメッセージが短すぎます待機中待機中Description 934}
{queue、plural、one {is} other {are}} <strong> {queue、number} </ strong> {queue、plural、one {person} other {people}}がキューの前にあります。

beginButton

チャットを開始します！

キャンセルキャンセル
予期せぬエラーが発生しました。
後でもう一度お試しください。
完了完了
dragAndDropDropzoneここにファイルをドラッグ＆ドロップして送信します
dragAndDropDropzoneRejected 596}
{ 609}チャットを終了
この会話を本当に終了しますか？
チャットトランスクリプト
invalidToken無効なトークン
ipAddressBlockedIPアドレスがブロックされています
もう一度お試しください。
オフラインオフライン
offlineFormDesc現在通話できません
offlineFormSuccessMsgSubEメールは正常に送信されました。 すぐにご連絡いたします。
オンラインオンライン
onlineFormTextチャットを開始するには、あなたの名前を教えてください。 私たちのエージェントの1人がすぐに対応します。
選択してください選択してください...
sendFileTextSupportedFormat
sendFileTextSupportedFormatDesc
新規Eメールを送信
トランスクリプトを送信
startChatInPopup質問してください！
startNewChat新規チャットを開始
statusReconnecting接続を試行しています…
systemChattingWith現在、{name}
のトピックトピック
transciptSentFailed送信に失敗しました。
transciptSuccesfulSentトランスクリプトが正常に送信されました。
tryAgainButton再試行
unexpectedError予期せぬエラー。
validationInvalidEmailEメールアドレスが無効です
validationMandatoryこのフィールドは必須です{ 874}
{ 887}
待機中...
エージェントの1人がすぐにお話します。
waitingFooterヒット<spacebar>待ち時間を短縮するために。
あなたはキューに {queue}しています。
チャットウィンドウに表示されるカスタムフィールドを翻訳できます


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

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

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

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

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


            brandembassy('enableCloseIcon', true);

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


            brandembassy('hideAssignedAgent');

ヘッダーを非表示


            brandembassy('hideHeader');

ポップアップを非表示


            brandembassy('hidePopups');

顧客アバターを表示{959 }


            brandembassy('showCustomerAvatar');
送信ボタンを表示


            brandembassy('chat','showSendButton');
サイズ

チャットウィンドウの幅と高さをカスタマイズします。

CSS仕様でサポートされている絶対単位または相対単位を使用できます。

フルディスプレイモード

位置とオフセット

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 Mpowerで直接カスタマイズすることもできます。

データセレクターでカスタムCSSを追加するには、このJavaScript呼び出しを参考にしてください： 


            brandembassy('setCustomCss', '[data-selector="CUSTOMER_MESSAGE_BUBBLE"] {color: white !important; background: black !important} 
[data-selector="CONTENT"] {background: green !important}`);
  • アクティビティ_BAR
  • エージェントメッセージ
  • AGENT_MESSAGE_BUBBLE
  • アバター
  • コンテンツ
  • 顧客_メッセージ
  • 顧客_メッセージ_バブル
  • デリミタ
  • ドロップダウン_メニュー
  • ヘッダー
  • 入力
  • IS_TYPING
  • メッセンジャー
  • ポップアップ
  • PRECONTACT_SURVEY
  • PRECONTACT_SURVEY_DESCRIPTION
  • プライマリ_ボタン
  • 返信_ボックス
  • SECONDARY_BUTTON
  • SEND_BUTTON
  • テクストエリア
  • TEXT_BUTTON
  • ウィジェット
  • ウィンドウ

データセレクター属性のみを使用して、カスタムCSSコンポーネントを適用します。 この例のように、クラスセレクターやJavaScriptコードの他の部分には適用しないでください。

カスタムCSS API呼び出しの例を見る
チャットバブルJavaScriptが表示されます。 
 brandembassy('setCustomCss', '[data-selector="CUSTOMER_MESSAGE_BUBBLE"] {color: white !important; background: black !important};');
この画像は、例のAPI呼び出しの結果を示しています：
カスタムCSSサンプルコードがチャットウィンドウを変更する方法の例。各メッセージの背景が黒で表示されます。

ウィンドウコンポーネントは、ネストされた複数のブロックで構成できます。 このセクションにリストされているコンポーネントセレクターは、各コンポーネントのルートに名前を付けます。 コンポーネントのネストされたブロックの1つにCSSto適用する場合は、開発者のコンソールを使用してコンポーネントを検査し、正しいブロックを選択できるようにします。

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

このセクションのコールでは、顧客の行動に基づいて、顧客をプロアクティブにチャットに参加させることができます。

トリガー実行

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


            brandembassy('executeTrigger', 'trigger_id');

訪問者イベントを設定

定義済みの顧客行動（イベント）をレポート目的で保存します。 この呼び出しをMobile 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

ウェブ訪問者タグ

このセクションのコンテンツは、制御リリース（CR）の製品または機能用です。 CRグループに参加していない場合で、詳細情報を知りたい方は、アカウント担当者にお問い合わせください。

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

コンタクトにタグを追加するには：

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

            brandembassy('assignTag', 'tagID');


            brandembassy('removeTag', 'tagID');

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


            brandembassy('getOngoingThreads');

チャットウィンドウで進行中のコンタクトを認識


            brandembassy('getOngoingContact')

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

{1132 }
以下の例の 「イベント」 を置き換えるには、以下のいずれかの入力値を使用します。

  • CaseToRoutingQueueAssignmentChanged

  • ページビュー作成済

  • メッセージが作成されました

  • ユーザーにメッセージが配信されました

  • EndUserに配信されたメッセージ

  • ユーザーによるメッセージを見た

  • EndUserによるMessageSeen

  • MessageReadChanged

  • MessageAddedIntoCase

  • CaseInboxAssigneeChanged

  • ケース作成済

  • CaseStatusChanged

  • SenderTypingStarted

  • SenderTypingEnded

  • メッセージメモ作成済

  • ContactRecipientsChanged

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


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

複数のチャットイベントの通知を受け取るには：{1176 }


            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>