🧩 打造專屬 Discord 個人檔案小工具
前言
Discord Widget(小工具)可以讓你在 Discord 個人檔案中展示更多客製化資訊,不只能讓 Profile 看起來更有特色,也能呈現原本個人簡介放不下的內容,例如社群連結、遊戲資料、個人作品或動態資訊。
這篇教學會帶你從建立 Discord Application、解鎖 Widget Editor、設計版面,到最後傳送資料並把 Widget 加入個人檔案。
NOTEDiscord Widget v2 目前仍屬於實驗功能,部分設定需要使用尚未公開在一般介面中的功能,因此 Discord 未來可能修改、限制或移除相關操作。
1. 建立 Discord Application
首先,你需要準備一個 Discord 帳號和 Google Chrome 瀏覽器。首先,你需要準備一個 Discord 帳號和 Google Chrome 瀏覽器。前往 Discord Developer Portal 並登入帳號,登入後,點選左側的「應用程式」,接著按右上角的「新建應用程式」,輸入應用程式名稱、勾選相關條款,再按下「建立」。
建立完成後,點選左側「遊戲」選單中的 Social SDK。Social SDK 是 Discord 用來整合社交功能的一套開發工具,而 Widget v2 就包含在這個功能架構中。進入頁面後,Discord 會要求你填寫公司名稱、團隊所在地、姓名與其他基本資訊。這些資料不會影響 Widget 的外觀設計,但仍建議填寫合理且正確的內容,完成後按下提交。
2. 解鎖 Widget Editor
Widget Config Editor 預設被隱藏在 Discord 的實驗功能旗標後方,即使進入 Developer Portal,也不會直接看到。按下鍵盤上的 F12 開啟 Chrome 開發者工具,並切換到 Console 頁面。
這時瀏覽器可能會顯示「在這裡貼上任何資訊,均有可能讓惡意攻擊者存取您的 Discord 帳號」等警告。這是正常的安全提醒,因為在 Console 執行陌生程式碼確實可能造成帳號或資料外洩,因此不要隨意執行來源不明的程式碼。
將以下程式碼貼入 Console,並按下 Enter:
let _mods = webpackChunkdiscord_developers.push([[Symbol()], {}, r => r.c]);webpackChunkdiscord_developers.pop();
let findByProps = (...props) => { for (let m of Object.values(_mods)) { try { if (!m.exports || m.exports === window) continue;
if (props.every((x) => m.exports?.[x])) { return m.exports; }
for (let ex in m.exports) { if ( props.every((x) => m.exports?.[ex]?.[x]) && m.exports[ex][Symbol.toStringTag] !== "IntlMessagesProxy" ) { return m.exports[ex]; } } } catch {} }};
findByProps("getAll") .getAll() .find(e => e.getName() === "ApexExperimentStore") .createOverride("2026-03-widget-config-editor", 1);這段程式碼會從 Discord Developer Portal 的前端模組中找到實驗功能管理器,並將 2026-03-widget-config-editor 設定為 Variant 1,藉此解鎖 Widget Config Editor。它不會直接修改你的帳號密碼或 Bot Token,但使用的是 Discord 未公開的內部功能,因此未來可能失效。
執行完成後,先不要按 F5 或重新整理頁面。點選左上角的「← 應用程式」,回到應用程式列表,再重新進入剛才建立的 Application。接著展開左側的「遊戲」選單,這時應該會看到原本沒有出現的「小工具」選項,點進去後即可開啟 Widget 的客製化介面。
3. 設計 Widget 版面
進入 Widget Editor 後,左側選單中會看到 Widget Top 和 Widget Bottom,分別代表 Widget 的上半部與下半部。
先進入 Widget Top,點選「設計」,這裡以 Hero 版面為例。選擇 Hero 後切換到「內容」,其中 Image 與 Title 是必填欄位。Image 是顯示在 Widget 右側的圖片,數值類型選擇「應用程式素材」,接著點選素材金鑰下方的圖片圖示,按下「新增素材」並上傳想使用的圖片。
Title 則是顯示在 Widget 左側的主要文字。顯示類型選擇「文字」,數值類型選擇「自訂字串」,再輸入想呈現的內容。Widget Editor 右側會即時顯示預覽,可以一邊修改、一邊確認效果。除了 Image 和 Title,也可以設定 Subtitle 1、Subtitle 2 和 Subtitle 3,用來補充身份、職稱、狀態或其他簡短資訊。
接著進入 Widget Bottom,在「設計」中選擇 Collection。Collection 包含 Item 1 到 Item 4,四個項目都必須完成設定。以 Item 1 為例,Image 選擇應用程式素材並上傳圖片,Name 選擇自訂字串,例如輸入 YouTube,Description 則可以填入帳號或相關資訊,例如 @leowu-love。
其他 Item 也可以使用相同步驟,放入個人網站、GitHub、Discord 社群、Instagram、Steam、目前遊玩的遊戲或個人作品。全部設定完成後,先按下「儲存變更」,確認內容無誤後再按「發布」。
4. 設定 OAuth2 授權
若要讓 Widget 顯示使用者專屬資料,使用者必須授權你的應用程式更新他們的 Widget。進入 Application 左側的 OAuth2 頁面,在 Redirects 中新增一組 Redirect URI。你可以填入自己的網站;若只是測試,也可以使用 Discord 首頁。
接著往下找到 OAuth2 URL Generator,勾選 openid 和 sdk.social_layer,選擇剛才新增的 Redirect URI,並複製系統產生的 OAuth2 URL。
產生的網址通常會包含:
response_type=code將它修改成:
response_type=token修改完成後,在瀏覽器中開啟網址並完成授權。若授權頁面出現 invalid scopes 錯誤,通常代表前面的 Social SDK 表單尚未成功提交,或你的 Application 尚未取得相關功能權限。
5. 傳送 Widget 資料
若這個 Widget 只是製作給自己使用,而不是提供給其他使用者使用,這個步驟非常重要。若沒有建立 Application Identity,Widget 可能只會顯示:
Your game stats are still syncing. Keep playing!
也就是「你的遊戲數據仍在同步中,請繼續遊玩」,而不會呈現實際資料,其他使用者也可能看不到你的 Widget。
首先打開 Discord,進入「使用者設定 → 已授權的應用程式」,找到剛才建立的 Application,確認它具有存取個人資料、更新活動狀態與管理相關社交資料的權限。若沒有看到這些權限,請重新執行一次 OAuth2 授權流程。
接著回到 Discord Developer Portal,進入 Application 的 Bot 頁面。若尚未建立 Bot,先新增一個 Bot,再按下「Reset Token」產生新的 Bot Token,並將它複製下來。Bot Token 等同於機器人的登入密碼,請勿將它放進影片畫面、文章截圖、GitHub 或公開聊天室中。若不小心洩漏,請立即重新產生 Token。
接著從 Widget Editor 中複製範例 JSON,並在最外層加入 username 欄位:
JSON.stringify({ username: "your_username", data: { dynamic: [ { type: 1, name: "display_name", value: "Your Name" } ] }});將這段程式貼進瀏覽器 Console 並執行,Console 會輸出一段已經轉換完成的 JSON 字串,將它完整複製下來。
接著打開 Windows PowerShell,執行以下指令:
Invoke-RestMethod ` -Uri https://discord.com/api/v9/applications/{appId}/users/{userId}/identities/0/profile ` -Method PATCH ` -Headers @{ "Content-Type"="application/json"; "Authorization"="Bot {botToken}"; "User-Agent"="DiscordBot (https://github.com/discord/discord-api-docs, 1.0.0)" } ` -Body '{jsonString}'你需要將 {appId} 替換成 Discord Application ID、{userId} 替換成你的 Discord User ID、{botToken} 替換成剛才取得的 Bot Token,並將 {jsonString} 替換成 JSON.stringify() 產生的 JSON 字串。
Application ID 可以在 Discord Developer Portal 中開啟你的應用程式,接著前往左側的「概要」→「一般資訊」頁面找到。Discord User ID 則需要先在 Discord 設定中開啟「開發者模式」,再對自己的帳號按右鍵,選擇「複製使用者 ID」。若 PowerShell 指令執行完成且沒有出現錯誤訊息,就代表 Widget 資料已成功傳送。
6. 將 Widget 加入個人檔案
完成資料傳送後,回到 Discord,進入「使用者設定 → 個人資料 → 編輯個人資料」。在右側的個人檔案預覽區域找到「新增小工具」,點選後選擇剛才建立並發布的 Widget,完成後就會顯示在你的 Discord 個人檔案上。
若沒有看到 Widget,可以確認 Widget 是否已發布、OAuth2 是否授權成功、Bot 是否至少成功傳送過一次資料,以及 Application Identity API 是否有回傳錯誤。此外,也可以檢查 Widget Renderer 實驗功能是否已開啟,或重新啟動 Discord 用戶端。
總結
Discord Widget 雖然目前仍是實驗功能,設定流程也比一般 Discord 功能複雜,但它提供了很高的客製化空間。你可以把它做成社群名片、個人作品牆、遊戲數據卡、健身紀錄,甚至串接 API 顯示即時資訊。
這篇教學只是提供一個基本範例,更重要的是根據自己的興趣與需求,設計出真正屬於自己的 Discord Widget。使用這項功能時也請保持節制,不要冒充 Discord 官方人員、發布誤導內容或大量濫用 API。功能仍處於測試階段,一旦遭到濫用,Discord 隨時可能限制甚至收回它。
若這篇教學對你有幫助,歡迎按讚並分享給需要的人。過程中若有任何步驟看不懂,也可以在下方留言,我會盡量回覆每一個問題,也歡迎分享你製作完成的 Widget。