WebTalk 333
WebTalk Embed

在任何網站加入 WebTalk 333

WebTalk 333 有兩個獨立選項：選擇只有聊天或聊天＋AI，再選擇全站共用聊天室或每頁各自聊天室。 因此共有四種組合；不知道怎麼選時，直接使用第一個範例。

適合哪些站長使用？

WebTalk 333 是讓同一個網站裡的人一起討論、一起看內容、一起把氣氛炒熱的即時交流工具，不是傳統一對一的客服聊天視窗。

目前版本不是客服工具：沒有客服專線、客服人員分流、工單系統或客服後台介面。請把它定位為多人即時交流與現場互動工具，而不是讓訪客聯繫客服的管道。

程式碼要放在哪裡？

一般情況：把下方範例中的完整 <script>...</script> 貼到每個要啟用聊天頁面的 HTML </body> 前。它有 async，不會阻塞頁面載入。

若選「每頁各自聊天室」：<meta name="webtalk-page-id" ...> 要放在頁面的 <head> 內；<script> 仍放在 </body> 前。

不知道怎麼選時，直接將第一個範例完整貼到 </body> 前即可。

選擇你的接入組合

webtalk-chat.js 是只有聊天；webtalk.js 是聊天＋AI。origin 表示全站共用聊天室；預設 meta 表示每頁各自聊天室。

聊天＋AI ＋ 全站共用聊天室（建議）

不知道怎麼選就用這個。全站共用聊天室，並提供 AI 摘要、頁面對話與 @ai。

<script
  async
  src="https://webtalk-nine.vercel.app/webtalk.js"
  data-webtalk-scope="origin"
  data-webtalk-ai-endpoint="https://webtalk-nine.vercel.app/api/webtalk/ai"
></script>

只有聊天 ＋ 全站共用聊天室

適合首頁、社群或整個網站共用一個公開聊天室，不會發出 AI 請求。

<script
  async
  src="https://webtalk-nine.vercel.app/webtalk-chat.js"
  data-webtalk-scope="origin"
></script>

只有聊天 ＋ 每頁各自聊天室

適合文章、商品、知識庫與 Share 頁；每頁必須輸出不同的 page ID。

<meta name="webtalk-page-id" content="{{此頁穩定且唯一的 ID}}" />
<script
  async
  src="https://webtalk-nine.vercel.app/webtalk-chat.js"
></script>

聊天＋AI ＋ 每頁各自聊天室

每個內容頁各有聊天室，並提供 AI 摘要、頁面對話與 @ai。

<meta name="webtalk-page-id" content="{{此頁穩定且唯一的 ID}}" />
<script
  async
  src="https://webtalk-nine.vercel.app/webtalk.js"
  data-webtalk-ai-endpoint="https://webtalk-nine.vercel.app/api/webtalk/ai"
></script>
AI 前置條件：兩個「聊天＋AI」組合都需要可用的 data-webtalk-ai-endpoint；只有聊天的組合不會發出 AI 請求。

手機與版面

桌機為右側可調整寬度的聊天室。手機會變成半螢幕覆蓋層，不修改你的 DOM、CSS 或捲動行為：另一半畫面仍顯示你的網站。 

<script
  src="https://webtalk-nine.vercel.app/webtalk-chat.js"
  data-webtalk-mobile-placement="bottom"
></script>

bottom（預設）讓網站顯示在上半部、聊天在下半部；設為 top 則聊天在上半部、網站顯示於下半部。

所有參數

參數 可用值 用途
data-webtalk-scope meta、origin、path 房間策略；預設 meta，最安全。
data-webtalk-page-id 穩定頁面 ID 覆寫 webtalk-page-id meta，通常建議使用 meta。
data-webtalk-site-id 穩定字串 選填；未填時自動使用目前網站網域。多網域要共用聊天室時，才在各網域填相同的固定字串。
data-webtalk-room-id 任意穩定字串 完全指定房間，優先權最高。
data-webtalk-meta-name meta 名稱 改用自訂的 page ID meta 名稱。
data-webtalk-auto-mount true、false 是否載入後立即掛載；可用於登入後才啟用。
data-webtalk-virtual-room true、false 是否加入跨站 presence；預設關閉。
data-webtalk-mobile-placement bottom、top 手機半螢幕覆蓋位置；預設 bottom。
data-webtalk-ai-endpoint URL 只在混合版需要；指定 server-side AI proxy。
進階選項：若要依網址路徑自動分成不同聊天室，使用上方任一範例，並加入 data-webtalk-scope="path"。例如 /share/a 與 /share/a/ 會是同一間聊天室。

隱私與資料流

聊天訊息：聊天內容透過 WebRTC DataChannel 在使用者瀏覽器間傳輸，訊息與本機歷史不會寫入 AI endpoint。純聊天室版不會發出 AI 請求。
連線建立：WebRTC 仍需要 Artico signaling service 交換 SDP／ICE 連線資訊；它不是聊天室訊息儲存服務。請勿將產品描述為「所有資料完全不經過任何伺服器」。
混合版 AI：當使用者使用摘要、AI 對話或 @ai 時，頁面文字與提問會送往你設定的 AI endpoint，並由該服務呼叫 LLM provider。請在隱私政策中揭露此流程。

與 Chrome extension 共存

當使用者已安裝 WebTalk Chrome extension，而你的網站已掛載 WebTalk embed 時，extension 會自行偵測官方 widget 並停止自己的 UI 與連線。站長不需要新增額外判斷，也不需要偵測瀏覽器 extension。

尚未安裝 extension 的使用者可前往 WebTalk 333 安裝。

常見問題

沒有出現聊天室？
預設 meta 模式必須有 webtalk-page-id。若你要全站共用，明確改為 data-webtalk-scope="origin"。
網頁有 CSP？
在你的 script-src allowlist 加入 WebTalk 網域；混合版也需要在 connect-src 放行 AI endpoint。
AI 不能用？
確認使用混合版 webtalk.js，並檢查 data-webtalk-ai-endpoint 是否可從你的網站連線。
多個網域想共用同一個聊天室？
一般情況不必填 data-webtalk-site-id，WebTalk 會自動使用目前網站網域。 只有同一品牌的多個正式網域要共用聊天室時，才在每個網域使用相同、固定的 site ID： 
<script
  async
  src="https://webtalk-nine.vercel.app/webtalk-chat.js"
  data-webtalk-site-id="my-brand-2026"
  data-webtalk-scope="origin"
></script>
例如 brand.com 和 brand.tw 都填 my-brand-2026。請使用固定名稱，不要每次產生不同的隨機數。
登入後才顯示聊天室？
此進階整合仍有效：先載入程式但不掛載，登入成功後呼叫 mount()，登出時呼叫 unmount()。 
<script src="https://webtalk-nine.vercel.app/webtalk-chat.js"
  data-webtalk-auto-mount="false"></script>
<script>
  // 在你的登入流程完成後執行
  window.WebTalk.mount({
    scope: 'origin',
    mobilePlacement: 'bottom'
  })

  // 在你的登出流程執行
  window.WebTalk.unmount()
</script>
若使用聊天＋AI，請改載入 webtalk.js，並在 mount() 內加入 aiEndpoint；關閉自動掛載時，script 標籤上的 AI endpoint 不會自動帶入。