自訂Guide使用JavaScript

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

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

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

瞭解Guide的工作原理

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

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

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

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

點擊應用程式選擇器並選擇Guide。
點擊 Integrations。將出現一個頁面，其中包含特定於您的租戶的JavaScript代碼。
按兩下Copy code with Guide以複製代碼。
將複製的代碼片段粘貼到您的代碼或文字編輯程式中。
在您貼上的代碼的結束</script>標記上方，新增要使用的 JavaScript 調用。在下列的範例圖像中，註釋指示了新增調用的位置。

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

若要覆蓋任何瀏覽器語言設定並強制Guide訪客查看特定語言的內容，請修改嵌入指令碼。在指令碼末端的cxone('guide','init');命令中新增locale參數，並指定所需的語言。例如，您可以將其設定為法語，如下所示：

cxone('init','####'); 
cxone('guide','init', { locale: 'ja', templateId:'xxxxxxx'});

將 #### 替換為四位數租戶 ID。

您在主動提議中撰寫的內容仍會以撰寫時使用的語言顯示。這假設您已設定法語的Guide翻譯字串。

預設情況下，Guide小工具會在使用者的瀏覽器中快取在聊天前和電郵前聯絡表單中輸入的資料。這可讓資訊在頁面重新載入或後續工作階段中持續存在。

不過，在某些環境中，特別是具有合規性、隱私權或安全性需求的環境，此行為可能並不可取。您可以在初始化 Guide 小工具時使用 disableFormCaching 配置標誌來停用此行為。

當disableFormCaching未設定或設定為false時（預設）：

cxone('guide', 'init', { locale: 'en-US', disableFormCaching: false});

當disableFormCaching設定為true且頁面已重新整理時，小工具會重新載入，或使用者會開始新的工作階段：

因此，使用者必須為每次新的互動重新輸入聊天前資訊。