使用 JavaScript 自訂聊天通道

您可以使用 JavaScript 自訂 即時聊天 客服專員和聯絡人的實時互動和聊天訊息 非同步聊天，聯絡人隨時傳送訊息並等待回覆。 CXone提供預設自訂及其相關的 JavaScriptAPI 調用。 您必須在將聊天新增到網站的指令碼標記中包含這些 API 調用。 要新增這些功能，您需要存取您網站的代碼。 本頁說明了新增JavaScript的位置以及需要包含的確切代碼行。 您還應熟悉 JavaScript 或 web 開發，以便自信地使用本頁面上的資訊。

您可以自訂聊天通道 聯絡人與客服專員或機器人互動的方式。 通道可以是語音、電郵、聊天、社交媒體等等。的以下方面：

• 聊天行為：自訂聊天視窗的行為方式。 這包括開啟和關閉聊天視窗或啟用遊戲模式。 遊戲模式讓客戶在等待客服專員時玩貪吃蛇遊戲。
• 聊天資訊：自訂在聊天視窗中顯示的資訊。 這包括客戶姓名、客服專員圖像或活動狀態等內容。
• 自訂欄位、標籤和短語：定義自訂欄位或自訂欄位標籤。 您還可以為顯示給聯絡人的自動訊息配置替代文字。
• 聊天視窗外觀：自訂聊天視窗的外觀。 您可以變更網頁上視窗的大小和位置等。
• 自訂 CSS：為聊天視窗定義自訂 CSS。
• 主動行動：根據客戶行為，使用主動行動自訂體驗。
• 其他功能 ：您可以配置的其他內容包括：
  • 讓主機環境偵聽某些事件。
  • 將數位聊天通道整合到 iOS或 Android 應用程式中。
  • 啟用 OAuth 驗證。

新增 JavaScript 調用聊天通道

如果還未啟用，請設定即時聊天或聊天訊息通道。 在新增自訂項之前測試通道以確保它使用預設設定。 在將聊天自訂發布到生產環境之前，在測試環境中設定聊天自訂項。 這將有助於最大限度地減少對網站存取者的干擾。 此外，它還有助於確保您的自訂項按預期工作。

1. 點擊應用程式選擇器 並選擇 ACD。

2. 前往 Digital >數位聯絡點。

3. 在「您的通道」下，點擊網站指令碼。
4. 從頁面上複製 JavaScript 代碼並貼到 Notepad++ 等文字編輯程式中。 確保包含開頭和結尾的 <script> 標記。

5. 在 Notepad++ 中，在您貼上程式碼的結束標記 </script> 上方，新增您要使用的JavaScript調用。 在下列的範例圖像中，註釋指示了新增調用的位置。 本頁面的後續內容將介紹您可以使用的受支援調用。

   檢視圖像

   

6. 將整個指令碼（包括開頭和結尾的 <script> 標記）複製並貼上到您網站頁面的標頭中。

7. 造訪修改後的頁面並傳送測試聊天訊息，以確保您的自訂工作符合預期。

8. 當其被完全測試並按預期工作時，將最終指令碼複製到應該會有聊天小工具的每個頁面的標頭中。

聊天行為 JavaScript 調用

本節中的調用允許您變更聊天視窗的行為方式。

開啟聊天視窗

自動開啟聊天視窗。 預設行為是在聯絡人點擊聊天圖示時開啟聊天視窗。

關閉聊天視窗

自動關閉一個聊天視窗。 預設行為是在聯絡人點擊聊天圖示時關閉聊天視窗。

聊天始終在線上

即使沒有客服專員在線上時，亦如同有客服專員可用一樣，顯示聊天視窗。

保留先前聊天的自訂欄位

您可以選擇在互動啟動後是否希望自訂欄位保留或從本機儲存中清除。 這使您可以選擇哪些自訂欄位在與聯絡人的所有互動中繼續顯示。 「field_id」是指建立自訂欄位時Ident欄位的值。

從自適應卡傳送回傳資料

Studio 動作和機器人可以透過聊天傳送自適應卡給聯絡人。 為了讓數位聊天能夠將回傳資料傳送到Studio或機器人，您必須啟用處理程式。 自適應卡處理程式在機器人或Studio動作中發揮作用，以管理和回應與自適應卡的互動。 當使用者與自適應卡的元件互動時，例如點擊按鈕或從下拉式清單中選擇選項，該處理程式就會啟動。 處理程式破解使用者的輸入並確定要採取的適當回應或動作。 新增預設處理程式命令並傳送訊息命令，以便 Studio 或機器人可以做出相應回應或儲存自適應卡資料以用於報告目的。 您也可以使用自訂處理程式命令來覆寫預設處理程式。

新增預設的自適應卡處理程式命令：

傳送訊息命令：

建立自訂處理程式命令：

設定授權代碼

為 OAuth 流程設定授權碼。 Oauth 是一種驗證通訊協定。 它用於使一個應用程式代表您與另一個應用程式互動，無需洩露您的密碼。 其必須在聊天初始化前調用。

自動啟動新的聊天工作階段

如果目前沒有進行中的工作階段，建立一個新的聊天訊息 非同步聊天，聯絡人隨時傳送訊息並等待回覆或線上聊天 客服專員和聯絡人的實時互動工作階段。 在您網站流量較低的頁面上使用此調用，以避免客服專員負擔過重。

Digital Experience 建立一個新案例，並在發送聊天工作階段的第一條訊息時將其新增到佇列中。 聊天工作階段開始時，會代表客戶發送隱藏的自動訊息。 這可以透過更快地啟動流程來減少聯絡人等待客服專員的時間。 當聯絡人點擊聊天圖示開始對話或開啟自動啟動的聊天工作階段的聊天視窗時，聊天工作階段即已開始。 儘管初始訊息對客戶隱藏，但客服專員仍可以看到。

您可以自訂初始隱藏訊息的文字。

自動啟動聊天工作階段會跳過聯絡前調查表。 因此，您需要使用其他方法來收集有關聯絡人的資訊。 例如，您可以讓客服專員將資訊手動輸入到客戶卡中。 您還可以使用 OAuth 整合來配置客戶驗證。

自動啟動個案的路由是根據Digital Experience中配置的路由佇列 系統使用路由佇列以確定將案例路由給哪些客服專員。 您的系統管理員會建立路由佇列，以便將某些案例路由至具該類型案例專業知識的客服專員。。 對於即時聊天工作階段，如果沒有可用的客服專員，聊天視窗會顯示等待空閒客服專員訊息。

若要自動啟動聊天工作階段，請按所示順序使用這些調用：

如果向指令碼新增其他調用，則 autoStartSession 必須是指令碼中的最後一個調用。 範例：

啟用並行聊天會話

您可以讓聯絡人在同一瀏覽器中啟動多個聊天會話。 如果他們正在一個瀏覽器標籤中進行活躍聊天，則這可以讓聯絡人在新的瀏覽器標籤或視窗中開始第二個聊天。

若要啟用此行為，您必須指定聊天資料的儲存方式。 您有兩個選項：

• localStorage：標籤或視窗關閉後，資料仍保留在瀏覽器中。 這是預設的儲存方法。 如果在不同標籤中同時開啟多個聊天會話，則其都被視為相同的互動。 所有標籤中的聊天對話和體驗都是相同的。

• sessionStorage：儲存單一標籤或視窗的資料，然後在標籤或視窗關閉時清除。 使用者可以跨不同的標籤或視窗建立多個聊天會話。 每個標籤中的聊天會話被視為唯一的互動。

若要啟用並行聊天會話，請新增值為 sessionStorage 的 storageType 鍵，如下列範例所示。

如果您使用 localStorage 選項並且仍想清除對話記錄，則可以事件偵聽程式，並在聊天結束後刪除 customerID。

brandembassy(
	'init',
	'MY_BRAND_ID_123',
	'MY_CHANNEL_ID_321',
	undefined,
	{
		storageType: 'sessionStorage',
	},
);

清除對話歷史

聊天對話結束後刪除對話歷史。 如果您使用聊天的預設儲存選項 (localstorage)，這可能會很有用。 即使瀏覽器實例關閉後，此儲存選項也會儲存資料。 在這種情況下，您可以透過從本地儲存中清除 customerID 來專門刪除對話歷史。 以下範例建立一個事件偵聽器來偵聽聊天中的 caseStatusChanged 事件。 這表示聊天會話結束。 然後，呼叫removeItem命令，該命令會從瀏覽器的本地儲存中刪除 customerID。

brandembassy('onPushUpdate', ['CaseStatusChanged'], pushUpdatePayload => { 
	if (typeof pushUpdatePayload === 'undefined' || typeof pushUpdatePayload.data === 'undefined') { 
		return; 
	}  
	const { status } = pushUpdatePayload.data.case || {};   
	if (typeof status === 'undefined') { 
		return; 
	}   
	// When a previous case has been closed, this will set the custom fields again. 
	if (status === 'closed') { 
		localStorage.removeItem('_BECustomerID') 
		); 
	} 
}); 

自訂初始自動聯絡訊息

Digital Experience 建立一個新案例，並在發送聊天工作階段的第一條訊息時將其新增到佇列中。 聊天工作階段開始時，會代表客戶發送隱藏的自動訊息。 這可以透過更快地啟動流程來減少聯絡人等待客服專員的時間。 當聯絡人點擊聊天圖示開始對話或開啟自動啟動的聊天工作階段的聊天視窗時，聊天工作階段即已開始。 儘管初始訊息對客戶隱藏，但客服專員仍可以看到。

預設訊息是客戶點擊以開始對話的按鈕上的文字。 您可以透過三種方式自訂初始自動訊息的文字：

• 覆寫預設按鈕文字。

                brandembassy('sendFirstMessageAutomatically', 'Hello');

• 動態變更初始訊息。

                brandembassy('setFirstAutomatedMessageContent', 'Hello, I have a question');

• 變更翻譯頁面上的訊息文字。

使初始自動訊息對聯絡人可見

如果您希望聯絡人能夠看到初始自動訊息，請將此調用新增到指令碼中：

延遲建立個案

Digital Experience 建立一個新案例，並在發送聊天工作階段的第一條訊息時將其新增到佇列中。 聊天工作階段開始時，會代表客戶發送隱藏的自動訊息。 這可以透過更快地啟動流程來減少聯絡人等待客服專員的時間。 當聯絡人點擊聊天圖示開始對話或開啟自動啟動的聊天工作階段的聊天視窗時，聊天工作階段即已開始。 儘管初始訊息對客戶隱藏，但客服專員仍可以看到。

您可以配置 Digital Experience 在使用此調用建立個案之前等待聯絡人實際發出第一則訊息：

啟用遊戲模式

允許聯絡人在等待客服專員時玩貪吃蛇遊戲。

自動滿足度調查

可以自動偵測並在彈出式視窗中顯示滿足度調查。 此命令可以啟用或停用偵測和是否顯示。

聊天訊息JavaScript調用

這些調用允許您自訂聊天工作階段期間對聯絡人可用的資訊。

獲取客戶身份 ID

返回聊天中客戶的唯一識別碼。

隱藏聯絡前調查表

在聊天訊息 非同步聊天，聯絡人隨時傳送訊息並等待回覆工作階段開始時，會顯示聯絡前調查表。 此調查表會收集有關聯絡人的資訊，例如他們的姓名。 如果需要，您可以隱藏聯絡前調查表，並在聯絡人啟動聊天訊息工作階段時立即顯示聊天視窗。

隱藏佇列計數器

佇列計數器能夠讓聯絡人知道，根據聯絡人在客服專員佇列中的位置，客服專員多久能與其通話。 您可以在聯絡人被成功路由到客服專員後隱藏佇列計數器。 這允許客服專員從其收件匣中刪除客戶卡而不被聯絡人注意到。

將聊天通知音訊靜音

允許您關閉聊天通知聲音。 聊天通知聲音預設為開啟。 無論其他聊天聲音設定如何，都需要配置此項目。 您可以將該值變更為 「false」，以重新開啟聊天通知音訊。

覆寫瀏覽器語言翻譯

將使用者的瀏覽器語言設定或自訂區域設定覆寫為設定的翻譯。 例如，您可以確保某些文字始終以英文顯示，無論聯絡人的瀏覽器語言設定為何。

設定活動狀態

變更活動列中的訊息。 例如，您可以使用它來傳輸您對聊天訊息工作階段的回應時間。 這可能會有所幫助，因為聊天訊息是一種異步的聊天形式，聯絡人可能必須等待接收客服專員的訊息。

設定客服專員的圖像

動態變更聊天視窗中顯示的客服專員圖像。 依預設，Digital Experience 會使用客服專員設定檔中的圖像。 當您在指令碼中包含此調用時，會使用 snippet 中以 URL 指定的圖像。 將範例 URL 取代為您希望聊天使用的圖像的 URL。

設定客戶 ID

設定聊天中客戶的唯一識別碼。

設定客戶名稱

客戶名稱是聊天前調查表中的一個欄位，聯絡人需要在與聊天訊息 非同步聊天，聯絡人隨時傳送訊息並等待回覆通道中的客服專員聯絡前填寫。 此調用動態填充此欄位。

設定日期格式

可以設定為使用絕對日期格式 (12/03/2035) 或相對日期格式（今天，星期一）。

設定地區

設定聊天視窗中的翻譯區域。

展示個案資訊

只適用於聊天訊息 非同步聊天，聯絡人隨時傳送訊息並等待回覆通道。 向聯絡人顯示個案資訊。

顯示/隱藏傳送轉錄按鈕

如果您將傳送轉錄按鈕設定為顯示，您必須配置聊天通道以允許聯絡人將聊天轉錄傳送給自己。 為聊天訊息或即時聊天配置此選項。

顯示/隱藏系統訊息

顯示或隱藏系統訊息，如客服專員指派歷程。

使用條款

您可以在聊天視窗中向聯絡人提供使用條款文件。 此功能會在視窗中新增一個按鈕。 您可以自訂按鈕的標籤和樣式，以及聯絡人點擊後會執行的動作。 點擊動作可以將使用條款顯示為：

• 一個內部視窗
• 外部連結

若要自訂按鈕或內部視窗的外觀，請使用本頁面中所述的 CSS API 調用。

自訂欄位、標籤和短語

建立和填充自訂欄位

您在此調用操作時可以使用的自訂欄位與您在 客戶卡 中使用的欄位相同。 如果您在打開聊天視窗前使用這些調用，聯絡前表單中的欄位將用您在 JavaScript 調用中包含的資料填充。

要定義一個個案自訂欄位的值：

要定義一個客戶卡自訂欄位的值：

自訂聊天標籤和短語

您可以自訂數位聊天通道使用的許多標籤和短語，以及定義自訂。 如果您需要動態變更短語或螢幕標籤，請使用這些 JavaScript 調用。

若要變更單個訊息或標籤：

若要變更多個訊息或標籤：

翻譯自訂欄位

您可以翻譯聊天視窗中顯示的自訂欄位。

聊天視窗外觀調用

您可以修改聊天視窗的外觀。

關閉聊天圖示

設定為 True 時，視窗上將顯示 X 圖示，而不是設定選單中的「結束聊天」選項。

隱藏指派的客服專員

隱藏標題

隱藏彈出視窗

顯示客戶頭像

顯示傳送按鈕

尺寸

自訂聊天視窗的寬度和高度。 您可以使用 CSS 規範支援的絕對或相對單位。

全螢幕顯示模式

位置和偏移

setPositionX 調用將螢幕的左側或右側定義為起始位置。 setOffsetX 和 setOffsetY 調用分別定義了聊天視窗從起點水平和垂直偏移多少圖元。

為回覆框設定字元限制

帶有資料選擇器的自訂 CSS

您可以新增自己的 CSS 來定制聊天視窗的外觀。 使用 data-selector 屬性指定要樣式化的聊天視窗部分。 下面的下拉式清單包含所有可使用 data-selector 屬性選擇的元件清單。 資料選擇器允許您指定要套用自訂 CSS 的聊天視窗部分。 在 data-selector 之後，在大括號內新增您的樣式。 如果您想要設定多個元素的樣式，則必須在單一 JavaScript 調用中新增所有 CSS。 如果多次使用相同的JavaScript 調用，最後一次JavaScript調用將覆寫先前的所有 CSS。 您也可以自訂 CSS以實現直接在CXone中進行聊天。

要使用資料選擇器新增自訂 CSS，請使用以下 JavaScript 調用作為參考：

主動動作

本節中的調用允許您根據客戶的行為主動參與聊天。

執行觸發器

啟動由 trigger_id 定義的工作流程自動化觸發器。

設定訪客事件

存儲用於報告的已定義的客戶行為（事件）。 當此調用與 CXone Mobile SDK 一起使用時，event_type將變更為 custom_event_type。

設定訪客變數

存儲用於報告的已定義的客戶資訊。

存儲轉換

存儲用於報告的可轉換的客戶行為。

網路訪客標記

您可以對在您的網站上表現出特定行為的聯絡人進行標記。 此功能使用Digital Experience的標記並需要指南。

要向聯絡人新增標記：

要刪除聯絡人的標記：

與第三方應用程式整合

本節中的叫用操作允許您在發生某些聊天事件時接收推送通知。

識別聊天視窗中的作用中執行緒

識別聊天視窗中正在進行的聯絡

接收特定聊天事件的推送通知

要接收一個聊天事件的通知：

要接收多個聊天事件的通知：

要接收所有聊天事件的通知：

整合到 Android 或 iOS 應用程式中

您可以將數位聊天整合到 Android 或 iOS 應用程式中。 原生應用程式必須使用新增JavaScript初始化程式碼的 WebView。 此程式碼範例使用本頁面中的JavaScript修改聊天功能的外觀和行為：