WidgetBot 直接將 Discord 文字頻道嵌入網站，即時與網友溝通交談

發表日期：

2019.07.27

分類：

Dev

Discord 是一款專為電子遊戲社群設計的免費網路即時通話軟體與數位發行平台，主要用戶為遊戲玩家，玩家之間可以在軟體的聊天頻道通過資訊、圖片、視訊和音訊

Discord 是一款專為電子遊戲社群設計的免費網路即時通話軟體與數位發行平台，主要用戶為遊戲玩家，玩家之間可以在軟體的聊天頻道通過資訊、圖片、視訊和音訊進行互動。

因為在 Discord 語音群中內建的網頁小工具僅能顯示當前伺服器的線上人數與即時邀請按鈕，暫時無法達到與 Messager 顧客洽談外掛程式同樣的效果，實在令人惋惜。所以 WidgetBot 這個 Discord 機器人就出現了，他能夠在網頁上將文字頻道直接嵌入，讓使用者直接在上面發送訊息。

使用教學

第一步 開啟這個連結邀請 DisWeb 機器人到你的 Discord 伺服器。

第二步 WidgetBot 有提供兩種嵌入方式：一個是『Crate』，就是網頁右下角會出現個圓形小按鈕，按下去後會彈出聊天室；另一種是『HTML-Embed 』，會直接將文字頻道嵌入在側邊欄。
在這邊請自選一個嵌入方式，並將對應的程式碼放到你的網站中。

Crate（官方推薦）

<script src="https://cdn.jsdelivr.net/npm/@widgetbot/crate@3" async defer>
  new Crate({
    server: '伺服器ID',
    channel: '文字頻道ID',
    shard: 'https://disweb.deploys.io'
  })
</script>

HTML-Embed

<widgetbot
  server="伺服器ID"
  channel="文字頻道ID"
  width="800"
  height="600"
  shard="https://disweb.deploys.io"
></widgetbot>
<script src="https://cdn.jsdelivr.net/npm/@widgetbot/html-embed"></script>

第三步 進入 Discord 的使用者設定，切換到外觀設定，將『開發者模式』開啟。