網站聊天小工具可讓網站訪客透過即時聊天或透過您已連接的其他訊息管道與您聯繫。

連結網站聊天小工具

觀看下面的視頻，了解如何將網站聊天連接到 respond.io 的分步指南。

How to Connect Website Chat to respond.io

步驟 1： 前往 設定 > 頻道

第 2 步： 點選 新增頻道 > 網站聊天 > 連線

步驟 3： 填寫將新增小工具的網站。

請參閱以下內容，了解如何將網站列入白名單。

如果使用者加入https://app.respond.io，那麼只有https://app.respond.io會被列入白名單。任何其他子域或根都不應起作用。
如果使用者加入https://*.respond.io，則包括根域在內的所有子網域都將被列入白名單。
若使用者加入https://respond.io，則只有根域會被列入白名單。

步驟 4：使用互動式顏色選擇器為小工具選擇主題顏色。

選擇與您的品牌顏色和網站相符的顏色。

步驟 5：為小工具選擇圖示以在網站上顯示。如果您希望上傳自訂圖標，您可以上傳方形圖標，建議尺寸為 256px x 256px。

一旦連接，小部件就可以進一步定制。

第 6 步：點選下一步> 將腳本加入您喜歡的網站。或者，您可以透過電子郵件將安裝說明傳送給其他人。

安裝聊天小工具

您可能需要網站管理員或技術管理員協助在網站上安裝聊天小工具。如有需要，請尋求協助。

根據您用於建立和管理網站的系統，我們建立了逐步指南，指導您在網站上安裝聊天小工具。

對於其他平台或服務，請導覽至頁面的 HTML 原始碼。將腳本貼到 </body> 標籤之前。

<body>
...
...
...
<Paste Script Here>
</body>

如果您需要協助，您可以選擇將腳本連同安裝說明一起轉發給您的網站管理員。選中相應的複選框並輸入可以幫助您安裝聊天插件的人的電子郵件地址。

一旦腳本成功安裝，respond.io 網站聊天小工具就會出現在您的網站上。

自訂聊天小工具

步驟 1：在您的工作區中，前往設定>頻道

第 2 步： 找到網站聊天頻道 > 點選自訂

自訂網站小部件以配合網站'的外觀，這樣小部件看起來就天衣無縫。在頁面的右側，有網站聊天小工具的預覽。對小部件所做的任何自訂都會反映在小部件上，以幫助您更好地了解您正在自訂的內容。

顯示 & 外觀

您可以自訂以下內容來變更網站上小工具的顯示外觀。

場地	描述
主題顏色	所選顏色將用作小部件的主要顏色。
文字顏色	所選顏色將用作小部件的主要文字顏色。
網站聊天圖標	選定的圖示與主題顏色一起在小部件氣泡內使用。如果需要，您可以上傳自訂圖示。
彈出訊息	彈出訊息每天在頁面載入 5 秒後向網站訪客顯示一次。如果未定義，則網站訪客不會看到任何彈出訊息。

網站聊天圖示驗證：

最大檔案大小：1MB
最大檔案尺寸：256 x 256 像素
形狀：方形

位置

場地	描述
對齊到	使用者可以選擇指定位置，是否在平台的左側或右側顯示小工具。
垂直間距	使用者可以指定網站聊天小工具和螢幕底部之間的垂直間距量。
水平間距	使用者可以指定網站聊天小工具和螢幕側面之間的水平間距量。
小部件大小	使用者可以從小、標準或大中選擇小部件的尺寸。
顯示選項	使用者可以選擇在桌面、行動裝置或兩者上顯示此小工具。

標題元素

場地	描述
標題	標題將顯示在聊天小工具的頂部。
標語	標語將顯示在標題下方。
網站聊天標誌	將您的徽標圖像拖放到這裡，以便它顯示在網站聊天的頂部。格式可以是 PNG、SVG 或 JPG，檔案大小不超過 4.0 MB。
頻道圖示	此選項將使聯絡人能夠透過他們首選的管道與您聯繫（提供選項）。您最多可以新增六個頻道，它將顯示在網站聊天小工具的頂部。
頻道圖示顏色	頻道圖示可以在您的聊天小工具上以白色或彩色形式顯示。選擇白色或彩色以配合聊天小工具的主題顏色。

網站聊天標誌驗證：

最大檔案大小：4MB
最大檔案尺寸：1024 x 1024 像素
形狀：方形

頻道圖示

如果之前從未配置過網站聊天小部件，則具有足夠資訊的連接頻道將預設列為小部件頻道連結。

您可以新增小工具頻道連結並為所選頻道指定必要的資訊。

以下是每個支援的頻道連結所需的輸入欄位清單。

頻道連結	必填輸入字段
WhatsApp	WhatsApp 電話號碼
Facebook Messenger	Facebook 首頁 ID
電報	電報機器人名稱
推特	Twitter ID
LINE	LINE ID
Viber	Viber 公共帳戶名稱
簡訊	簡訊電話號碼
電子郵件	電子郵件地址
電話	電話號碼
自訂連結	URL 位址和圖標
自訂二維碼	QR 圖像和圖標

頻道圖示驗證：

最大檔案大小：1MB
最大檔案尺寸：256 x 256 像素
形狀：方形

聊天前表格

啟用此選項將向您的網站聊天新增預先聊天表單。如果啟用，您的網站訪客將在開始聊天之前看到一份需要填寫的表格。

啟用此選項後，您可以在必要時包含其他自訂欄位。除此之外，您還可以自訂預設欄位的標籤，以決定它們在聯絡人中的顯示方式。

字段標籤可以自訂為不同的語言以符合網站的語言。

其他設定

場地	描述
輸入欄文字	此文字將作為打字區域中的佔位符。
文字字體	將用於在網站聊天小工具中顯示字體的字體。

限制傳入附件

選取此選項後，網站訪客將無法在網站聊天小工具中附加附件。

保持網站聊天隱藏

使用此選項時，小部件將被完全隱藏。直到點擊「錨點引用」或透過程式設計 API 開啟聊天。

#webchat_widget

使用上述錨點，您可以在頁面上建立一個按鈕，點擊後即可開啟小工具。

隱藏 Respond.io 品牌

使用此選項，您可以從小部件中刪除 respond.io 品牌。

通道配置

步驟 1： 點選設定 > 頻道

第 2 步： 找到網站聊天 > 點選管理

步驟 3： 在 網站聊天設定頁 您將看到以下設定：

聊天連結 - 您的聯絡人造訪您的頻道的 URL 連結。
頻道名稱 - 頻道名稱可以更改，並在內部用於識別頻道。
網站網域名稱 - 與您的小工具連結的網站。
網站聊天程式碼 - 如果您需要擷取產生的程式碼片段，可以將此程式碼貼到您網站的 HTML 原始碼中。

如果您不將您的網站包含在此列表中，則小工具將無法加載。如果您'在多個網站上使用該插件，則可以新增多個 URL。

步驟 4：點選 儲存變更 以更新網站聊天設定頁面

識別登入用戶

透過在您的網站程式碼中新增簡單的JavaScript程式碼，即可識別您網站的登入使用者。一旦傳遞的標識符與現有聯絡人匹配，當前對話就會恢復。

術語「使用者」是在您的網站上下文中使用的。在 respond.io 平台中，我們繼續將它們稱為「聯絡人」。

window.__respond_settings = {
  identifier: "customer@example.com",
  firstName: "簡",
  lastName: "杜",
  phone: "60123456789",
  email: "customer@example.com",
  profilePic: "https://static.independent.co.uk/s3fs-public/thumbnails/image/2015/07/08/14/pic.jpg",
  countryCode: "MY",
  language: "en",
  // 自定義欄位
  custom_fields: {
    // 自定義欄位的標識符
    number: 123,
    description: "一些文本",
  },
};

代碼使用指南

編輯程式碼（如下所示）以向 respond.io 發送目前登入使用者的識別碼。這可以是電子郵件地址或聯絡人 ID，也可以基於任何其他聯絡人欄位。請注意， 標識符 是必填欄位。
將程式碼直接貼到您希望網站聊天出現的每個頁面的 head 標籤中。
- 用於識別登入使用者的腳本必須放在網站聊天程式碼上方，該程式碼可以在網站聊天配置對話方塊中找到。
您也可以傳送與您的聯絡人相關的 respond.io 聯絡人字段，以便我們在聯絡人建立過程中儲存聯絡人欄位。欄位名稱（或 slug）可以在聯絡人欄位模組中找到。
請注意，如果您使用此功能，聊天前表格將被忽略，這意味著聯絡人不需要在開始對話之前填寫他們的資訊。

上面的例子是傳遞一個電子郵件地址作為標識符，並且在聯絡人建立過程中，傳遞的所有聯絡人欄位都將儲存。

程式控制（用戶 API）

網站聊天小工具可以透過您的網站 JavaScript 程式碼開啟和關閉。這使您可以在您的網站上建立自訂的 "與我們聊天" 按鈕，並在訪客點擊該按鈕時觸發網站聊天小工具開啟。

行動

打開聊天
1. 說明：打開聊天小工具。
2. 文法： $respond.do("chat:open")
關閉聊天
1. 說明：關閉聊天小工具。
2. 文法： $respond.do("chat:close")

事件監聽器

聊天框已開啟
1. 說明：處理聊天小工具開啟事件（觸發您的 回呼 函數）。
2. 文法：$respond.on("chat:opened",callback)
聊天框已關閉
1. 說明：處理聊天小工具關閉事件（觸發您的 回呼 函數）。
2. 文法：$respond.on("chat:closed",callback)

狀態檢查方法

聊天功能開放嗎？
1. 說明：如果聊天小工具打開，則傳回 true ，否則回傳 false。
2. 文法： $respond.is("chat:open")
聊天關閉了嗎？
1. 說明：如果聊天小工具已關閉，則傳回 true ，否則回傳 false。
2. 文法： $respond.is("chat:closed")

常見問題和疑難排解

為什麼我的訊息沒有發送到聯絡人？

郵件無法送達可能有以下幾個原因：

聯絡人已離開網站。
聯絡人的不活動可能超過逾時時間。
聯絡人的客戶端可能會有網路連線問題。

為什麼我的小部件沒有出現在我的網站上？

確保代碼安裝正確。有關如何安裝網站聊天小工具，請參閱此處的說明。
確保將要安裝小工具的網站列入白名單。請參閱連接網站聊天小工具的步驟 3，以了解如何將您的網域列入白名單。

網站聊天小工具快速入門