網站聊天小工具可讓網站訪客透過即時聊天或透過您已連接的其他 訊息管道 與您聯繫。
觀看下面的視頻，了解有關如何將網站聊天連接到 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 電話號碼 | |
Facebook Messenger | Facebook 首頁 ID |
Telegram | 電報機器人名稱 |
Twitter 帳號 | |
LINE | LINE 號碼 |
Viber | Viber 公共帳戶名稱 |
短信 | 短信電話號碼 |
電子郵箱 | 電子郵箱 |
電話 | 電話號碼 |
自定義鏈接 | URL 位址和圖標 |
自定義二維碼 | QR 圖像和圖標 |
頻道圖示驗證：
最大檔案大小：1MB
最大檔案尺寸：256 x 256 像素
形狀：方形
啟用此選項將會為您的網站聊天新增一個預先聊天表單。 如果啟用，您的網站訪客在開始聊天之前將看到一份需要填寫的表格。
啟用此選項後，您可以在必要時包含其他自訂欄位。 除此之外，您還可以自訂預設欄位的標籤，以決定它們在聯絡人中的顯示方式。
字段標籤可以定制為不同的語言，以匹配網站'的語言。
場地 | 描述 |
|---|---|
輸入欄文本 | 此文字將作為打字區域中的佔位符。 |
文字字體 | 用於顯示網站聊天小工具中的字體的字體。 |
選取此選項後，網站訪客無法在網站聊天小工具中附加附件。
當使用此選項時，小部件將完全隱藏。 直到點擊「錨點引用」或透過程式設計 API 開啟聊天。
#webchat_widget
使用上述錨點，您可以在頁面上建立一個按鈕，點擊後即可開啟該小工具。
使用此選項，您可以從小部件中刪除 respond.io 品牌。
步驟 1： 點選 設定 > 頻道
第 2 步： 找到網站聊天 > 點選 管理
步驟 3： 在 網站聊天設定頁 您將看到以下設定：
聊天連結 - 您的聯絡人造訪您頻道的 URL 連結。
頻道名稱 - 頻道名稱可以更改，並在內部用於識別頻道。
網站網域名稱 - 與您的小工具連結的網站。
網站聊天程式碼 - 如果您需要擷取產生的程式碼片段，可以將此程式碼貼到您網站的 HTML 原始碼中。
如果您沒有將您的網站包含在此列表中，您的小部件將無法載入。 如果您'在多個網站上使用該插件，則可以新增多個 URL。
步驟 4：點選 儲存變更 以更新網站聊天設定頁面
透過在您的網站程式碼中新增簡單的JavaScript程式碼即可識別您網站的登入使用者。 一旦傳遞的標識符與現有聯絡人匹配，當前對話就會恢復。
術語「使用者」是在您的網站上下文中使用的。 在 respond.io 平台中，我們繼續將它們稱為「聯絡人」。
window.__respond_settings = {
identifier: "[email protected]",
firstName: "Jane",
lastName: "Doe",
phone: "60123456789",
email: "[email protected]",
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: "some text",
},
};代碼使用指南
編輯程式碼（如下所示）以向 respond.io 發送目前登入使用者的識別碼。 這可以是電子郵件地址或聯絡人 ID，或基於任何其他聯絡人欄位。 請注意， 標識符 是必填欄位。
將程式碼貼到您希望網站聊天出現的每個頁面的 head 標籤中。
識別登入使用者的腳本必須放在網站聊天代碼上方，可以在網站聊天配置對話方塊中找到。
您也可以傳送與您的聯絡人相關的 respond.io 聯絡人字段，以便我們在聯絡人建立過程中儲存聯絡人欄位。 欄位名稱（或 slug）可以在聯絡人欄位模組中找到。
請注意，如果您使用此功能，聊天前表格將被忽略，這意味著聯絡人在開始對話之前不需要填寫他們的資訊。
上面的範例傳遞了一個電子郵件地址作為標識符，並且在聯絡人建立過程中，傳遞的所有聯絡人欄位都將儲存。
網站聊天小工具可以透過您的網站 JavaScript 程式碼開啟和關閉。 這使您可以在您的網站上建立自訂的 "與我們聊天" 按鈕，並在訪客點擊該按鈕時觸發網站聊天小工具開啟。
打開聊天
說明：打開聊天小工具。
文法： $respond.do("chat:open")
關閉聊天
說明：關閉聊天小工具。
文法： $respond.do("chat:close")
聊天框已開啟
說明：處理聊天小工具開啟事件（觸發您的 回呼 函數）。
文法：$respond.on("chat:opened", callback)
聊天框已關閉
說明：處理聊天小工具關閉事件（觸發您的 回呼 函數）。
文法：$respond.on("chat:closed", callback)
聊天功能開放嗎？
說明：如果聊天小工具打開，則傳回 true ，否則回傳 false。
文法： $respond.is("chat:open")
聊天關閉了嗎？
說明：如果聊天小工具已關閉，則傳回 true ，否則回傳 false。
文法： $respond.is("chat:closed")
郵件無法送達可能有以下幾個原因：
聯絡人已離開網站。
聯絡人'的不活動狀態可能會超過逾時期限。
聯絡'的客戶端可能有網路連線問題。
確保將要安裝小工具的網站列入白名單。 請參閱連接網站聊天小工具的第 3 步，以了解如何將您的網域列入白名單。
