分享方式

開發自訂即時聊天 widget

Microsoft 提供建立自訂即時聊天小工具的選項，您可以將其附加至 Dynamics 365 Customer Service 帳戶。 自訂即時聊天小工具的每個元件都可以針對功能和使用者介面進行自訂。

根據您的需求和結果，您可以使用下列其中一個選項來自訂聊天小工具：

  • 使用可定制的實時聊天小部件 2.0
  • 開發您自己的小工具

使用可定制的實時聊天小部件 2.0

可自定義的實時聊天小部件 2.0 可讓您編輯小部件的所有元素，例如字體、顏色和樣式，以便您可以將小部件與您的品牌形象相匹配。 客製化小部件可協助您培養信任和信譽、區分您的品牌、培養積極的情感聯繫，並增加客戶對您的產品的價值。

新的即時聊天小工具 2.0 建立在全通路聊天 SDK 和即時聊天小工具 UI 元件庫之上。

入口網站開發人員 — 自訂現成可用的指令碼型 UI

入口網站開發人員選項可讓您個人化聊天小工具的 UI，但不會修改 Copilot 服務系統管理中心中現成的功能設定。 若要自訂，您可以使用「data-customization-callback」指令碼，將現成可用的小工具連線至 JavaScript 函式。 此函式可以包含聊天元件的 CSS 樣式自訂，其先例與 全通路即時聊天小工具 UI 元件程式庫相同。

編輯即時聊天小工具腳本以啟用即時聊天小工具 2.0

若要使用即時聊天小工具 2.0 和腳本型自訂，請修改現成可用的即時聊天小工具 2.0 的程式碼片段，如下所示。

  1. 在 Copilot 服務系統管理中心，開啟聊天工作流，然後選取 複製即時聊天小工具 2.0 指令碼 以複製程式碼片段。
  2. 建立具有所有元件樣式的新 JavaScript 函數。 其他資訊： 全通路聊天小工具
  3. 在腳本屬性後面新增「v2」。
  4. 新增「data-customization-callback」並引用JavaScript函數。

更新的程式碼片段如下所示。

自定義實時聊天小部件代碼的屏幕截圖。

自訂以增加其大小的聊天小工具 2.0 的範例螢幕擷取畫面如下。

即時聊天小工具 2.0 的範例螢幕擷取畫面。

觀看即時聊天小工具設定的 逐步解說影片 。

使用 Web 參與協調流程來自訂小工具

Web 參與協調流程可讓您將設定覆寫從頁面的 JavaScript 移至系統管理中心。 若要深入瞭解，請參閱使用單一標籤跨網站部署聊天小工具。

開發您自己的小工具

使用下列各節中的資訊來建置您自己的小工具。

全通路即時聊天小工具 UI 元件程式庫

全通路即時聊天小工具 UI 元件程式庫提供可重複使用的 React 元件架構。 這些元件是使用 Fluent UI 程式庫建置的。 深入瞭解全通路即時聊天小工具 UI 元件程式庫。

全通路聊天 SDK

全通路聊天 SDK 是一個開放原始碼套件，提供聊天方法和功能，以將功能新增至即時聊天小工具。 深入瞭解全通路聊天 SDK。

自定義您的實時聊天小部件

安裝最新版本的全通路聊天 SDK 後，請使用全通路聊天 SDK 方法並編輯全通路即時聊天小工具 UI 元件的基本 CSS 樣式來自訂您的即時聊天小工具。

備註

全通路聊天 SDK 是安裝全通路即時聊天小工具 UI 元件庫的先決條件。

自訂行動應用程式的即時聊天 widget
開始聊天
關閉聊天
lcw：close聊天
lcw：執行緒更新
lcw：chat已擷取
lcw：聊天佇列

  • Last updated on