使用 API 自訂 Guide

要在您的網站上使用指南，您只需將指南嵌入到您想要提供參與的網站的每個頁面上。

但是，如果您熟悉 Web 開發，並且想要自訂指南小工具的外觀和行為，則可以使用 API API 讓您可以透過將您的 CXone 系統與組織使用的其他軟體連接，來實現某些功能的自動化。來呼叫JavaScript代碼。您可以進行以下類型的變更：

Guide小工具外觀和行為：自訂Guide小工具的外觀和行為。這包括更改小工具的大小、更改按鈕的大小、以全螢幕模式顯示小工具等。
在Guide小工具中提供的聊天首選項：在Guide小工具中提供聊天時自訂外觀和行為。這包括更改聊天視窗中的資訊、更改聊天視窗外觀、設定自訂 CSS 等。
報告首選項：自訂Guide如何追蹤參與和轉換。您可以在定義自訂事件、存儲訪客變數、存儲轉換資料、指派和刪除 Web 標籤等時使用這些 API。

了解指南如何工作

指南小工具是 CXone Loader 載入到您的網站上的 web 模組。 Web 模組包含使用 Svelte 框架構建的 JavaScript 應用程式。該應用程式使用基本狀態存儲來追蹤指南配置、活動範本、活動聊天狀態、UI 狀態等。這些狀態存儲的值決定了向訪客顯示的內容。

當您將指南嵌入網站頁面，並且訪客檢視該頁面時，指南會獲取您的租戶的特定配置。此請求返回一個 JSON 結果，其中包含規則、按鈕、入口點、翻譯、引用的文章和功能標誌。然後，它使用功能包規則引擎來處理可能會或不會導致頁面上出現範本或主動提議的規則和條件。

為了管理頁面重新載入之間的訪客資料，指南使用本地和會話存儲。這允許指南在支援的瀏覽器上提供跨網域支援。這也表示指南不使用任何瀏覽器 cookie。

在將聊天自訂發布到生產環境之前，在測試環境中設定 Guide 自訂項。這將有助於最大限度地減少對網站存取者的干擾。此外，它還有助於確保您的自訂項按預期工作。

點擊應用程式選擇器並選擇ACD。
前往 Digital >數位聯絡點。
在「您的通道」下，點擊網站指令碼。
從頁面複製 JavaScript 代碼並將其貼到您的代碼或文字編輯程式中。確保包含開頭和結尾的 <script> 標記。
在您貼上的代碼的結束</script>標記上方，新增要使用的 JavaScript 調用。在下列的範例圖像中，註釋指示了新增調用的位置。

檢視圖像

本頁下面介紹了您可以使用的GuideJavaScript調用以及Guide聊天相關 API和指南報告相關 API。
複製整個指令碼（包括開頭和結尾的 <script> 標記）並貼到您網站頁面的標頭中。
造訪修改後的頁面並確保Guide自訂能如預期工作。
當其被完全測試並按預期工作時，將最終指令碼複製到應該會有此 Guide 自訂的每個頁面的標頭中。

透過此調用，您可以調整Guide小工具的外觀和行為。

變更 Guide 小工具的 CSS 元素。範例：

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

在此 Snippet 中，請將 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
聊天和電郵	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 按鈕選單。

cxone('guide', 'openMenu');

關閉 Guide 按鈕選單。

cxone('guide', 'closeMenu');

設定 Guide 小工具中使用的預設字型大小。輸入圖元值。預設字型大小為 13 圖元。此處設定的值決定了整個 Guide 使用的 em 大小。

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

設定 Guide 小工具的高度。輸入 em 或圖元值。預設高度為 40em。最大高度為 40 rem。

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

設定 Guide 小工具的寬度。輸入 em 或圖元值。預設寬度為 23.125em。

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

可在全屏模式下顯示 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', 'dre@classics.com');

使用此 API 在視窗中手動顯示入口點。使用入口點的預設按鈕。

當有人需要在視窗中手動顯示入口點時，可為某些特定案例提供此 API 。通常不建議使用它，也不應將其與Guide參與規則結合使用。

若要使用此 API，您必須傳遞要顯示的入口點的 ID。點擊入口點旁邊的編輯，然後複製頁面 URL 的最後一部分，即可獲得入口點 ID。

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