> For the complete documentation index, see [llms.txt](https://blog.mantago.cc/zh/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://blog.mantago.cc/zh/she-qun-bang-ding/bang-ding-livechat.md).

# 綁定 LiveChat

本教學將帶您逐步完成 MantaGO Live Chat 小工具整合至網站的設定流程。從基本安裝、進階設定到前台顯示方式，您將學會如何打造流暢的即時聊天體驗，協助企業更有效地與網站訪客互動、蒐集潛在客戶資訊，並提升回覆效率。

現在就讓我們開始教學吧！

1\. 開啟您的聊天機器人，進入「設定」

<figure><img src="https://2020695379-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZHbJqepBvWr0vRrToIqo%2Fuploads%2FPAMYlIAgur1ygSSWCAam%2FScreenshot%202026-04-27%20at%2000.20.32.png?alt=media&amp;token=e789ebba-1381-4559-8b1f-c1f2e832d260" alt=""><figcaption></figcaption></figure>

2. 向下滑動至 「LiveChat」，點擊 「連結設定」。

<figure><img src="https://2020695379-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZHbJqepBvWr0vRrToIqo%2Fuploads%2F37O17m9p68lJMLq337FL%2FScreenshot%202026-04-27%20at%2000.22.09.png?alt=media&amp;token=fb6c3c58-ed23-4c30-b2d2-2f2b62d6bc3c" alt=""><figcaption></figcaption></figure>

在此您可以自訂將顯示於網站上的聊天小工具樣式。

<div><figure><img src="https://2020695379-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZHbJqepBvWr0vRrToIqo%2Fuploads%2FEYNwZWYfOympX8Y4vrXJ%2FScreenshot%202026-04-27%20at%2000.23.12.png?alt=media&amp;token=6d886180-1ea8-4133-bb48-06f3ece2eaf3" alt=""><figcaption></figcaption></figure> <figure><img src="https://2020695379-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZHbJqepBvWr0vRrToIqo%2Fuploads%2FfSYvXRE1T8vR96j0nqOW%2FScreenshot%202026-04-27%20at%2000.23.20.png?alt=media&amp;token=3d73fe8b-996a-467c-9e4d-5e344ce5dbe9" alt=""><figcaption></figcaption></figure></div>

3. 完成自訂後，請點擊 **「下一步」**。
4. 若要將小工具加入您的網站，請複製下方程式碼，並貼到官方網站每個頁面的 `</body>` 區段內。

<figure><img src="https://2020695379-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZHbJqepBvWr0vRrToIqo%2Fuploads%2Fb2496m0fDZuZa5u3tFro%2FScreenshot%202026-04-27%20at%2000.25.14.png?alt=media&amp;token=b1907a76-6e2e-46b1-9e00-762485265393" alt=""><figcaption></figcaption></figure>

完成設定後，網站前台將會呈現如下效果：

<figure><img src="https://2020695379-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZHbJqepBvWr0vRrToIqo%2Fuploads%2FFfOjsj6nE5gnTPb0Pdpg%2FScreenshot%202026-04-20%20at%2018.24.30.png?alt=media&amp;token=f37ae131-28d7-4dab-9497-24a4a8e0994f" alt=""><figcaption></figcaption></figure>

完成基本的 Live Chat 設定後，下一步就是透過 進階設定 進一步優化聊天小工具的使用體驗。

在此區域，您可以自訂 顧客資訊的蒐集方式，以及 前台聊天介面的顯示形式，讓整體互動流程更符合您的營運需求。

進階設定

<figure><img src="https://2020695379-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZHbJqepBvWr0vRrToIqo%2Fuploads%2Fy1yXhbNO8A85yVH6OoJ1%2FScreenshot%202026-04-27%20at%2000.26.58.png?alt=media&amp;token=9e0d0b54-2b75-49de-b63f-c02ef7e28991" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2020695379-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZHbJqepBvWr0vRrToIqo%2Fuploads%2Fg3Ao08RMy4YhNdFZSmk7%2FScreenshot%202026-04-27%20at%2000.27.27.png?alt=media&amp;token=59f9170f-28f6-40f8-a565-b008f6493c1a" alt=""><figcaption></figcaption></figure>

**1. 啟用指派功能**\
啟用後，具備相應權限的使用者將只能查看 被指派給自己的對話訊息內容，有助於客服分工與對話管理。

**2. 顯示姓名**\
當您啟用 「顯示姓名」 後，Live Chat 小工具將會要求顧客在開始對話前先輸入以下資訊：

* 姓名
* 電子郵件地址
* 手機號碼

此設定特別適合以下情境：

* 潛在客戶名單蒐集（lead capture）
* 後續追蹤與聯繫
* 客服紀錄保存

啟用後，這些欄位將自動顯示於網站前台的聊天小工具中。

若要確保能完整蒐集每位使用者的資料，請前往 LiveChat 區塊中的「設定」，確認 「蒐集用戶個資」 開關已開啟，並勾選您希望蒐集的欄位項目。

<figure><img src="https://2020695379-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZHbJqepBvWr0vRrToIqo%2Fuploads%2FrYKa2dHyye6fZj41bPrL%2FScreenshot%202026-04-27%20at%2000.35.14.png?alt=media&amp;token=6e566793-0c98-4504-9e3a-1d002f35c832" alt=""><figcaption></figcaption></figure>

**小提醒 💡**\
完成任何設定修改後，請務必記得更新您的聊天機器人，網站上的 Live Chat 小工具才會同步套用最新設定。

<figure><img src="https://2020695379-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZHbJqepBvWr0vRrToIqo%2Fuploads%2FNNuNpUWgg8WTWLddoRML%2FScreenshot%202026-04-27%20at%2000.36.25.png?alt=media&amp;token=9cdbb9e9-31c2-4acd-9fb3-0a57cc72bab3" alt=""><figcaption></figcaption></figure>

更新完成後，前台顯示效果將如下所示：

<figure><img src="https://2020695379-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZHbJqepBvWr0vRrToIqo%2Fuploads%2FFUj9T1A87b69RBsWDkPi%2Fezgif-1f3747308f3db057%20(1).gif?alt=media&amp;token=95bc7069-9356-4164-b3af-59adb23131a0" alt=""><figcaption></figcaption></figure>