APIを使用してGuideをカスタマイズする

ガイドをウェブサイトで使用するには、エンゲージメントを提供したいWebサイトの各ページにガイドを埋め込むだけです。

ただし、ウェブ開発に精通していて、ガイドウィジェットの外観や動作をカスタマイズしたい場合は、JavaScriptコードへのAPI APIを使用すると、組織で使用している他のソフトウェアとCXoneシステムを接続することにより、特定の機能を自動化できます。コールを使用して行うことができます。次のようなタイプの変更であればが行えます：

Guideウィジェットの外観と動作：Guideウィジェットの外観と動作をカスタマイズします。これには、ウィジェットのサイズの変更、ボタンのサイズの変更、ウィジェットのフルスクリーンモードでの表示などが含まれる。
Guide ウィジェットで提供される場合のチャット設定：ウィジェットで提供されるときのチャットの外観と動作をカスタマイズします。 Guide これには、チャットウィンドウの情報の変更、チャットウィンドウの外観の変更、カスタムCSSの設定などが含まれます。
レポーティング環境設定：Guideがエンゲージメントとコンバージョンを追跡する方法をカスタマイズします。これらのAPIは、カスタムイベントの定義、訪問者の変数の保存、コンバージョンデータの保存、ウェブタグの割り当てや削除などに使用できます。

ガイドの仕組みについての理解

ガイドウィジェットは、CXone LoaderがWebサイトにロードするWebモジュールです。Webモジュールには、Svelteフレームワークを使用して構築されたJavaScriptアプリケーションが含まれます。アプリケーションは、ガイドの設定、アクティブテンプレート、アクティブチャットのステータス、UIステートなどを追跡する基本ステートストアを使用します。これらのステートストアの値が、訪問者に表示される内容を駆動します。

Webサイトのページにガイドを埋め込み、訪問者がページを表示すると、ガイドはテナント固有の設定をフェッチします。このリクエストは、ルール、ボタン、エントリーポイント、翻訳、参照された記事、機能フラグに関するJSON結果を返します。次いで、バンドルされたルールエンジンを使用して、テンプレートやプロアクティブオファーがページに表示されるかどうかのルールおよび条件を処理します。

ページの再読み込みの間に訪問者のデータを管理するために、ガイドはローカルストレージとセッションストレージを使用します。これにより、ガイド、クロス・ドメイン・サポートをサポートするブラウザ上で提供することができる。それは、ガイドがブラウザーのCookieを使用しないということでもあります。

実稼働環境にリリースする前に、Guideのカスタマイズをテスト環境でセットアップします。これにより、Webサイトの訪問者への影響を最小限に抑えることができます。また、カスタマイズが意図したとおりに機能することを確認するのにも役立ちます。

JavaScriptコールの追加

アプリセレクターをクリックして、次を選択します： ACD 。
デジタルに移動 > ポイントオブコンタクト(PoC)デジタル。
お客様のチャネルで、Webサイトのスクリプトをクリックします。
そのページからJavaScriptのコードをコピーし、お客様のコードまたはテキスト編集プログラムに貼り付けます。必ず<script>タグの開始と終了を含めてください。
貼り付けたコードの終了する</script>タグのすぐ上に、使用するJavaScriptコールを追加します。以下の画像例では、コメントは通話を追加する場所を示しています。

画像の表示

使用できるGuide JavaScriptコールについては、このページおよびGuideチャット関連APIとガイドレポート関連APIの下で説明します。
開始と終了<script>タグを含むスクリプト全体をコピーして、Webサイトのページのヘッダーに貼り付けます。
変更されたページにアクセスし、Guideのカスタマイズが意図したとおりに機能することを確認します。
全面的にテストされ、期待通りに動作したら、このGuideカスタマイズを持つはずの各ページのヘッダーにコピーします.

Guideウィジェットをカスタマイズします

このコールによって、Guideウィジェットの外観と動作を調整できます。

CSSを調整します

GuideウィジェットのCSS要素を変更します。例：

cxone('guide', 'setCustomCss', '[data-selector="GUIDE_ELEMENT"] {background: red !important;}');

このスニペットを使用するには、GUIDE_ELEMENTを次のテーブルの値で置き換え、波括弧{ }内のCSSの例をカスタムCSSで置き換えます：

Guideインターフェイス	GUIDE_ELEMENTの値
Guideウィジェットとボタン	GUIDE_CHANNEL_BUTTON GUIDE_CHANNEL_BACK_BUTTON GUIDE_SINGLE_MENU_CLOSE_BUTTON GUIDE_MULTIPLE_MENU_CLOSE_BUTTON GUIDE_CUSTOMER_PORTAL_CLOSE_BUTTON GUIDE_FRAME_CONTENT GUIDE_CHANNEL_ICON GUIDE_CHANNEL_MENU_ICON
ポータル	PORTAL_HEADER_iCON PORTAL_HEADER PORTAL_TITLE PORTAL_SUBTITLE GUIDE_CHANNEL_BUTTON_1 GUIDE_CHANNEL_BUTTON_2 GUIDE_CHANNEL_BUTTON_3 GUIDE_CHANNEL_BUTTON_4 GUIDE_MENU_BUTTON KB_WIDGET_TITLE KB_WIDGET_SEARCHBAR KB_SEE_MORE_BUTTON PORTAL_BODY KB_WIDGET CHANNELS_WIDGET
記事	KB_HEADER KB_BODY
チャットとEメール	PRECONTACT_SURVEY BEGIN_CHAT SEND_EMAIL INPUT TEXTAREA DROPDOWN TREE PRECONTACT_SURVEY_DESCRIPTION PRECONTACT_SURVEY_ICON TREE_POPUP_BACK_BUTTON CLOSE_TREE_POPUP CLOSE
プロアクティブオファー	OFFER_CLOSE_BUTTON OFFER_HEADER OFFER_BODY OFFER_BUTTON_1 OFFER_BUTTON_2 OFFER_BUTTON_3

チャネルボタンサイズを調整します

チャンルボタン用に使用するサイズを設定します。emsまたはピクセル単位で値を入力します。デフォルトのボタンサイズは3emです。

cxone('guide', 'setButtonSize', '80px');

チャネルボタンオフセットを調整します

チャネルボタンに使用するオフセット値を設定します。emsまたはピクセル単位で値を入力します。

cxone('guide', 'setOffsetX', '48px');

cxone('guide', 'setOffsetY', '3em');

Guideメニューを開く

ボタンのGuideメニューを表示します。

cxone('guide', 'openMenu');

Guideメニューを閉じる

ボタンのGuideメニューを閉じます。

cxone('guide', 'closeMenu');

フォントサイズを変更する

Guideウィジェットで使用されるデフォルトのフォントサイズを設定します。ピクセル単位で値を入力します。デフォルトのフォントサイズは13ピクセルです。ここで設定された値は、Guide全体で使用されるemサイズを決定します。

cxone('guide','setFontSize',12);

Guideウィジェットの高さを変更する

Guideウィジェットの高さを設定します。emsまたはピクセル単位で値を入力します。デフォルトの高さは40emです。最大高さは40remです。

cxone('guide','setDesiredGuideHeight','30em');

Guideウィジェットの幅を変更する

Guideウィジェットの幅を設定します。emsまたはピクセル単位で値を入力します。デフォルトの幅は23.125emです。

cxone('guide','setDesiredGuideWidth','608px');

フルスクリーンモードでGuideを表示する

Guideをフルスクリーンモードで表示できます。Guideのコンテンツは、 Guideウィジェットの代わりにウィンドウに表示されます。

cxone('guide','setFullDisplay');

フルスクリーンモードでのベストプラクティスは、最小化ボタンを非表示にすることです。それをするには、以下のコマンドを使用します：

cxone('guide','setFullDisplay');

cxone('guide', 'setCustomCss', '[data-selector="GUIDE_CHANNEL_CLOSE_BUTTON"] {display: none !important;}');

チャットによるプレコンタクトウェブアンケートの省略

このAPIを使用して、Guideにプレコンタクトウェブアンケートを表示せずにチャットを開始するように指示します。

cxone('guide','hidePreSurvey');

チャットAPIを使用して、プレコンタクトウェブアンケートの値を予め設定します。あるいは、hidePreSurvey APIのパラメーターとして指定することもできます。例：

cxone('guide','hidePreSurvey', 'Dre', 'dre@classics.com');

エントリーポイントを直接表示する

このAPIを使用して、ウィンドウにエントリーポイントを手動で表示します。エントリーポイントのデフォルトボタンが使用されます。

このAPIは、誰かが手動でウィンドウにエントリーポイントを表示する必要があるときの特定のケース用に提供されます。これは一般的には推奨されておらず、Guideのエンゲージメントルールと併用すべきではありません。

このAPIを使用するには、表示するエントリーポイントのIDを渡す必要があります。エントリーポイントの横にある編集をクリックし、ページURLの最後の部分をコピーすることで、エントリーポイントIDを取得することができます。

cxone('guide','openEntrypoint','e1348160-2016-4d91-958e-fd063c669fe6');