SeaX 小工具

簡介

在本文中，我們將介紹 SeaX 小工具，這是 SeaX 平台的一項功能，允許您整合一個網路聊天小工具，您的客戶只需點擊即可直接向您的 SeaX 帳戶發送訊息。您將學習如何設置 SeaX Widget 並將其整合到您的網站或應用程式中。

為什麼選擇 SeaX 小工具？

為客戶提供流暢的體驗對於任何業務至關重要。SeaX 小工具 可以整合到您的網站或應用程式中，讓客戶能直接向您的 SeaX 帳戶發送訊息。通過在您的網站或應用程式中整合 SeaX Widget，您的客戶只需點擊一下即可獲得所需的幫助。作為業務擁有者，您可以在 SeaX 中統一管理所有客戶互動，這使您更容易管理和回應客戶。

找到 網路聊天小工具 儀表板

首先，讓我們在 SeaX 中找到 網路聊天小工具 儀表板。在側邊欄選單中，點擊 網路聊天小工具 以進入 網路聊天小工具 儀表板。

網路聊天小工具 儀表板

設置您的 SeaX 小工具

在 網路聊天小工具 儀表板中，您可以自訂 SeaX 小工具 的外觀。您可以更改小工具按鈕的顏色、大小和圖像，以匹配您的網站或應用程式的設計。您還可以設置客戶使用小工具時看到的歡迎訊息。讓我們逐步了解這些設置。

💡 提醒：

每次進行更改時，記得點擊 儲存 按鈕以應用變更。

懸浮圖示

懸浮圖示 設置允許您自訂小工具按鈕的外觀。這是您的客戶在網站或應用程式上看到的內容。通過將 URL 貼上到 小工具標誌 中，您可以更改小工具的圖示，使其符合品牌設計。記得撰寫一條友好的 小工具彈出訊息，作為歡迎訊息。當氣泡按鈕顯示時，您的客戶會看到此訊息。

自訂您的 懸浮圖示 設計

以下是帶有自訂歡迎訊息的 懸浮圖示 按鈕示例：

懸浮圖示

彈出視窗

在 彈出視窗 中，您可以自訂客戶通過 SeaX 與您溝通的聊天介面的外觀。您需要提供 小部件標題 和聊天介面的顏色設置。

自訂 彈出視窗 聊天樣式

在同一頁面向下滾動設置您的聊天功能。請務必提供一條開場訊息，以便在客戶開始與您通過 SeaX 聊天時向他們打招呼。

Chat 設置

完成後，點擊 預覽 預覽窗口，查看 SeaX Widget 在您的網站或應用程式上的效果。滿意設計後，點擊 儲存 以應用變更。

預覽設計

自訂表單

自訂表單是一項強大的功能，允許您在客戶通過 SeaX 與您開始聊天之前收集他們的資訊。您可以創建具有不同字段（如文字、電子郵件和電話號碼）的表單。SeaX 將記錄這些表單回應以及完整的對話歷史。在儀表板中點擊 新增表單 來創建自訂表單。

自訂表單樣式

設置表單

  1. 啟用此表單 - 打開開關以啟用表單。在這裡，您還可以設置表單名稱和用戶將看到的標題。
  2. 同意框 - 您可以在表單中添加一個同意框。如果您希望將用戶重定向到隱私政策頁面，可以啟用 新增網址 添加連結。
  3. 提交訊息 - 自訂用戶提交表單後看到的訊息。

自訂表單

表單設計

設置表單的佈局。您可以添加不同類型的字段，例如文字、電子郵件和電話號碼。您可以選擇哪些字段為必填或選填，並可添加佔位符文本以指導用戶輸入內容。如果預設字段不夠用，您可以點擊 新增 添加自訂字段。

設計輸入字段

完成後，點擊 預覽 預覽最新更新的表單。如果表單已準備就緒，記得點擊 儲存 保存更改。

預覽自訂表單

📌 注意：

請注意，您無法刪除已啟用的表單。

安裝

現在，最後一步就是將 SeaX Widget 安裝到您的網站或應用程式中。您可以通過複製 安裝小工具 標籤中提供的代碼片段，並將其貼上到您的網站或應用程式 HTML 代碼的 <body> 標籤末尾來完成此操作。

  1. 找到您的網站或應用程式 HTML 代碼的 <body> 標籤。
   <body> ... 在結束標籤之前插入代碼 </body>
  1. 將安裝小工具標籤中提供的代碼片段貼上到 標籤的末尾。

範例:


<div id="messaging-webchat-tooltip"><div id="messaging-webchat-tooltip--inner"></div></div>
<button id="messaging-webchat-btn"></button>
<iframe id="messaging-webchat" src="https://seax.seasalt.ai/form/3de4426f-dd03-4fe6-a242-2a2d6ddb4e02"></iframe>
<style>
  /* 在此處添加您的自訂 CSS */
</style>
<script>
    var script = document.createElement('script');
    script.src = "https://seax.seasalt.ai/messaging/installWidget.js";
    script.onload = function() {
        init("https://seax.seasalt.ai",  "3de4426f-dd03-4fe6-a242-2a2d6ddb4e02");
    };
    document.head.appendChild(script);
</script>

此時，您應該能在安裝小工具頁面的右下角看到 SeaX 小工具。點擊該 小工具，試用我們剛剛構建的聊天介面。就是這樣！您已成功將 SeaX 小工具 安裝到您的網站或應用程式中。

預覽 Widget

測試 SeaX 小工具

為了正確測試該 小工具，我們建議使用 SeaX 儀表板右下角的 Test 小工具 按鈕。這將允許您在不進行安裝的情況下測試 小工具 在您的網站或應用程式上的效果。

測試 SeaX 小工具 介面

← SeaX 功能
新功能與版本更新 →