APIを使用したGuideウィジェットのカスタマイズ

これらのGuide APIを使用して、JavaScriptウィジェットの外観と動作をカスタマイズできます。

CSSを調整します

GuideウィジェットのCSS要素を変更します。 CSSのすべての変更を1回のコールで行います。 2回目の呼び出しでは、最初の呼び出しからの変更がオーバーライドされます。

構文の例：

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

データセレクターを非表示にするには、display:noneを使用します。 たとえば、Guideメニューボタンを非表示にするには：

cxone('guide', 'setCustomCss', '[data-selector="GUIDE_MENU_BUTTON"] {display: none;}');
Guideインターフェイス データセレクター
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');

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

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

チャットプレコンタクトアンケートを非表示にする

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

cxone('guide','hidePreSurvey');

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

cxone('guide','hidePreSurvey', 'Dre', {email: 'dre@classics.com'});

プレコンタクトアンケートのカスタムフィールド値の設定

このAPIを使用して、プレコンタクトアンケートに表示されるカスタムフィールドの値を設定します。 以下の値を設定できます。

  • 名前

  • 任意のコンタクトカスタムフィールド

  • 任意の顧客カスタムフィールド

カスタムフィールド値をhidden:trueとしてマークできます。 プレコンタクトアンケートフォームには、非表示のフィールドは表示されません。 ただし、非表示フィールドに設定した値は、チャットウィンドウに渡されます。

hidden:falseとマークされていないカスタムフィールドについては、GuideはAPIコマンドで指定された値を使用してプレコンタクトアンケートのカスタムフィールドをプリセットします。 訪問者は、デフォルト値を使用するか、自分の好みに合わせて変更できます。

カスタムフィールドは1024文字に制限されています。

次のJavaScript構文の例は、非表示にしてチャットに直接渡される名前を指定する方法を示しています。

cxone('guide','setCustomFields', {customerName: {value:'Francis', hidden: true}});

次のJavaScript構文例は、2つのコンタクトカスタムフィールド値を指定する方法を示しています。 Eメールの値はプレコンタクトアンケートでは非表示され、チャットに直接渡されます。 アドレスの値がプレコンタクトアンケートに表示され、編集できます。

cxone('guide','setCustomFields', 
{contactCustomFields:[
{ident:'email', value: 'josey@nice.com', hidden:true}, 
{ident: 'address', value: '123 Main St', hidden:false}
]});

次のJavaScript構文の例は、顧客のユーザー設定フィールドを指定する方法を示しています。

cxone('guide','setCustomFields', 
{contactCustomerFields:[
{ident: 'email', value: 'kaya.sanchez@acme.com'}
]});

次のJavaScript構文の例は、コンタクトのカスタムフィールドと顧客のカスタムフィールドの両方を指定する方法を示しています。

cxone('guide','setCustomFields', 
{contactCustomFields:[{ident: 'email', value: 'josey@nice.com', hidden:true}, {ident:'address', value: '123 Main St', hidden:false}], contactCustomerFields:[{ident: 'email', value: 'kaya.sanchez@acme.com'}]});

利用規約

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

依存関係：

  • display、typeおよびurlプロパティは必須です。

  • displayは256文字未満にする必要がありますが、空にすることはできません。

  • url は https: または https: で始まり、2048 文字未満である必要があります。

内部ウィンドウ：

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

外部リンク：

cxone('guide','showTermsOfUse', {display: 'Terms of Use', type: 'externalLink', url: 'https://yourdomain.com/'});

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

cxone('guide','hideTermsOfUse');

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

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

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

2024 年の秋以降にエントリ ポイントを作成した場合は、エントリ ポイント ID の決定についてアカウント担当者にお問い合わせください。

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

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

シングルページアプリケーション(SPA)のルール再評価の有効化

シングルページアプリケーションで動的ルーティングをサポートするために、ユーザーが新しいページに移動したときにルールを自動的に再評価するようにGuideを構成できます。 ダイナミックルーティングを有効にするには、埋め込みスクリプトのresetRulesOnNewPage関数にcxone('guide','init');パラメーターを追加します。

cxone('guide','init', {resetRulesOnNewPage: true});

resetRulesOnNewPageがtrueに設定されている場合。

  • Guideは、分析モジュールを使用してページ遷移を監視します。

  • 新しいページを検出すると、ルールエンジンは初期状態にリセットされます。

  • 静的評価のあるルールや既に起動したルールを含むすべてのルールは、すぐに再評価されます。

  • ルールリスナーとタイマーは、ページが読み込まれたばかりのように再起動します。

デフォルトでは、パラメータはfalseに設定されています。