APIを使用してGuideチャットをカスタマイズする

これらのチャット関連のAPIを使用することで、Guideにより実装されているチャットの外観や動作をカスタマイズすることができます。

チャット動作のAPI呼び出し

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

認可コードの設定

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

cxone('chat','setAuthorizationCode', 'authorization_code');

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

Guideでチャットが開始されると、新規ケース閉じた チャネルを介したエージェントとの会話全体。たとえば、インタラクションには、音声通話、Eメール、チャット、またはソーシャルメディアの会話があります。が作成され、チャットセッションの最初のメッセージが送信される際にキューに追加されます。チャットセッションの開始時に、非表示の自動メッセージが訪問者の代理として送信されます。これにより、訪問者がエージェントを待つ時間が短縮されます。最初のメッセージは顧客には表示されませんが、エージェントはそれを見ることができます。

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

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

    cxone('chat','sendFirstMessageAutomatically', 'Hello');

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

    cxone('chat','setFirstAutomatedMessageContent', 'Hello, I have a question');

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

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

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

cxone('chat','hideFirstSentMessage', false);

ケース作成の遅延

Guideは、新しいケースを作成し、チャットセッションの最初のメッセージが送信されたときにキューに追加します。チャットセッションの開始時に、非表示の自動メッセージが訪問者の代理として送信されます。これにより、訪問者がエージェントを待つ時間が短縮されます。チャットセッションは、訪問者がチャットアイコンをクリックして会話を始めるときに開始されます。最初のメッセージは訪問者には表示されませんが、エージェントはそれを見ることができます。

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

cxone('chat','sendFirstMessageAutomatically', false);

ゲームモードを有効化

エージェントを待っている間、訪問者先がゲームのSnakeをプレイできるようにします。

cxone('chat','allowGameMode');

満足度調査の自動化

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

cxone('chat','automatedSatisfactionSurveyModal', 'false');

チャット情報API呼び出し

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

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

チャットにいる訪問者の一意の識別子を返します。

cxone('chat','getCustomerIdentityId');

顧客IDを設定する

チャットにいる訪問者の一意の識別子を設定します。

cxone('chat','setCustomerId', 'customer_id');

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

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

cxone('chat','hideQueueCounterAfterAssignment');

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

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

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

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

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

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

顧客名を設定

顧客名はプレコンタクトアンケートフォームのフィールドである、その訪問者はチャットメッセージング閉じた 連絡先がいつでもチャットメッセージを送信し、返信を待つ非同期チャットチャネルで、エージェントとチャットする前に入力する必要があります。このAPI呼び出しは、フィールドに動的に入力されます。

cxone('chat','setCustomerName', 'Elizabeth');

日付形式の設定

日付形式を、絶対日付形式（2022年01月01日）または相対日付形式（今日、月曜日）に設定します。

cxone('chat','setDateFormat', 'date_format');

ロケールを設定する

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

cxone('chat','setLocale', 'locale');

ケース情報を表示

チャットメッセージング閉じた 連絡先がいつでもチャットメッセージを送信し、返信を待つ非同期チャットチャネルのみ。訪問者にケース情報を表示します。

cxone('chat','showCaseInfo');

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

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

cxone('chat','showSendTranscript');
cxone('chat','hideSendTranscript');

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

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

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

利用規約

チャットウィンドウ内から訪問者が利用規約ドキュメントを利用できるようにします。この関数は、ウィンドウにボタンを追加しますボタンのラベルとスタイル、および訪問者がボタンをクリックするとどうなるかをカスタマイズできます。オンクリックアクションは、利用規約を内部ウィンドウまたは外部リンクとして表示することができます。

内部ウィンドウ：

cxone('chat','showTermsOfUse', 'Show terms of Use', 'modal' , 'Our terms of use are ...');

外部リンク：

cxone('chat','showTermsOfUse', 'Show terms of Use', 'externalLink' , 'http://yourdomain.com/terms-of-use');

この機能を無効にするには次の操作を行います。

cxone('chat','hideTermsOfUse');

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

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

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

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

cxone('chat','setCaseCustomField', 'ident_of_custom_field', 'value_of_custom_field');

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

cxone('chat','setCustomerCustomField', 'ident_of_custom_field', 'value_of_custom_field');

ラベルとフレーズをカスタマイズする

Guideチャットが使用するラベルやフレーズの多くをカスタマイズしたり、カスタマイズを定義したりできます。フレーズや画面ラベルを動的に変更する必要がある場合は、これらのAPI呼び出しを使用してください。

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

cxone('chat','setTranslation', 'key', 'your translation');

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

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

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

Key Default label/Message
allAgentsForQueueAreBusy あなたのキューに専念するすべてのエージェントは現在忙しいです。{queue、plural、one {is} other {are}} <strong> {queue、number} </ strong> {queue、plural、one {person} other {people}}がキューの前にあります。

beginButton

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

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

Guideが使用するチャットウィンドウの外観を変更できます。

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

cxone('chat','hideAssignedAgent');

ヘッダーを非表示

cxone('chat','hideHeader');

顧客アバターを表示する

cxone('chat','showCustomerAvatar');

送信ボタンを表示する

cxone('chat','showSendButton');

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

cxone('chat','setReplyBoxLimit', '280');

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

API呼び出しでデータセレクターを使用して、カスタムCSSでチャットウィンドウの外観をカスタマイズできます。データセレクターを使用すると、カスタムCSSを適用するチャットウィンドウの部分を指定できます。data-selector属性を使用してデータセレクターを定義します。これは、変更するチャットウィンドウコンポーネントと同じ名前に設定します。

データセレクターを使用してカスタムCSSを追加するには、次のAPI呼び出しを参照として使用します。

cxone('chat','setCustomCss', '[data-selector="CUSTOMER_MESSAGE_BUBBLE"] {color: white !important; background: black !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

data-selector属性のみを使用してカスタムCSSコンポーネントを適用します。クラスセレクターまたは、この例にあるようなJavaScriptコードの他の部分には適用しないこと：

.Widget__Widget___1qQCf { background: red; }

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

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

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

cxone('chat','getOngoingThreads');

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

cxone('chat','getOngoingContact');

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

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

  • CaseToRoutingQueueAssignmentChanged

  • PageViewCreated

  • MessageCreated

  • MessageDeliveredToUser

  • MessageDeliveredToEndUser

  • MessageSeenByUser

  • MessageSeenByEndUser

  • MessageReadChanged

  • MessageAddedIntoCase

  • CaseInboxAssigneeChanged

  • CaseCreated

  • CaseStatusChanged

  • SenderTypingStarted

  • SenderTypingEnded

  • MessageNoteCreated

  • ContactRecipientsChanged

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

cxone('chat','onPushUpdate', 'event', callback);

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

cxone('chat','onPushUpdate', ['event', 'event', 'event'], callback);

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

cxone('chat','onAnyPushUpdate', callback);