使用 API 自訂Guide小工具

您可以使用這些 JavaScript API 自訂Guide小工具的外觀和行為。

調整 CSS

變更 Guide 小工具的 CSS 元素。 一次調用中進行所有 CSS 變更。 第二次調用將覆寫第一次調用的變更。

語法範例：

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

聊天和電郵

  • 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

調整通道按鈕大小

設定通道按鈕的大小。 輸入 em 或圖元值。 預設按鈕大小為 3em。

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

調整通道按鈕偏移

設定通道按鈕使用的偏移值。 輸入 em 或圖元值。

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 小工具的高度。 輸入 em 或圖元值。 預設高度為 40em。 最大高度為 40 rem。

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

變更 Guide 小工具的寬度

設定 Guide 小工具的寬度。 輸入 em 或圖元值。 預設寬度為 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');

使用 chat 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});

以下語法範例展示如何指定兩個聯絡人自訂欄位值。 電郵值在聯絡前調查中隱藏，並直接傳遞給聊天。 地址值可見，可以在聯絡前調查中編輯。

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