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

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

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

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

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', {email: "dre@classics.com"});

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

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

  • 名前

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

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

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

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

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

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

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

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

次の構文例は、カスタマーカスタムフィールドを指定する方法を示しています。

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

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

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

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

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

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

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

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