Webflow

第一步:登入您的 ChatsLink 帳戶並設置您的 ChatsLinkBot

  1. 如果您尚未擁有 ChatsLink 帳戶,請註冊一個免費的 ChatsLink 帳戶。
  2. 登入您的 ChatsLink 帳戶,並導航至機器人創建頁面。
  3. 通過上傳文本片段、文檔、網站內容或問答對等來為您的新機器人提供訓練數據。
  4. 在 ChatsLink 中訓練和測試您的機器人,直到它能夠準確回答查詢。

不熟悉如何創建 ChatsLinkBot?這裡有一個 使用 ChatsLink 創建 ChatsLinkBot 的分步指南

第二步:複製您的 ChatsLinkBot 嵌入代碼

設置並測試您的 ChatsLinkBot 後,您將需要嵌入代碼來在您的網站上顯示機器人小部件。要做到這一點:

1. 前往您的 ChatsLink 帳戶的儀表板

2. 您應該會看到一個 ChatsLinkBot 列表,點擊您希望集成到 Webflow 網站中的 ChatsLinkBot,然後您應該會進入 ChatsLinkBot 的預覽頁面。

3. 在 ChatsLinkBot 預覽頁面上,點擊 嵌入到網站 選項卡。

4. 點擊 公開 按鈕(如果您之前已經公開過機器人,則可能不會顯示此按鈕)。

5. 會彈出一個窗口。點擊 複製 iframe 以從此窗口複製提供的 HTML 代碼。

第三步:設置容器以顯示您的 ChatsLinkBot 小部件

在將嵌入代碼添加到您的 Webflow 網站之前,您需要創建一個容器來顯示小部件。這將確保小部件顯示在您網站的正確位置,並且不會延伸到整個頁面的寬度。

1. 要創建容器,在 Webflow 上,登入您的 Webflow 帳戶並前往您的儀表板。

2. 在您的 Webflow 儀表板上,您將找到所有網站項目的列表,將滑鼠懸停在您想要添加 ChatsLinkBot 的網站上,然後點擊 打開設計師

3. 在設計師頁面上,點擊 Webflow 網站設計師的左上角的文件圖標 (頁面),然後選擇您要嵌入 ChatsLinkBot 的頁面。

4. 選擇頁面後,點擊設計師屏幕左上角的加號按鈕 (添加元素),然後應該會出現可用元素的列表。

5. 將區域元素拖到您想要嵌入 ChatsLinkBot 的頁面部分。

6. 將容器元素拖到 區域上。

7. 將Div元素拖到容器元素上,並設置 Div 元素的大小,以確保機器人將包含在 Div 內,並且不會延伸到整個頁面的寬度。

8. 現在,向下滾動元素列表,並將 嵌入元素拖到您在 Webflow 畫布上添加的 Div 上。

9. 選擇並雙擊嵌入元素,以顯示 HTML 嵌入代碼編輯器。

10. 將第 2 步中的 ChatsLinkBot 嵌入代碼粘貼到其中,然後點擊 保存並關閉

如果一切順利,您應該會在設計師內部的 Webflow 網站的實時預覽中看到 ChatsLinkBot 的預覽。

完成這些步驟後,您的 ChatsLinkBot 應該已經準備好為您的網站訪客提供服務!


如果您在管理嵌入和 ChatsLinkBot 元素的尺寸方面遇到困難,這是一個常見問題。Webflow 元件需要一點時間來熟悉。您可以查看這個 Webflow 官方文檔中關於嵌入元素 的內容,以了解如何在 Webflow 網站上嵌入像 ChatsLink ChatsLinkBot 這樣的第三方工具。


注意:您可以在您的 ChatsLink 儀表板上自定義機器人的外觀和顏色。要做到這一點,前往您的 儀表板,選擇一個機器人,點擊頁面頂部的 設置 選項卡,然後點擊左側邊欄中的 聊天界面 以顯示 ChatsLinkBot 的自定義選項