把轉盤嵌入你的網站
輸入選項,挑選配色和尺寸,複製一行程式碼。只要頁面能放 HTML 或嵌入連結,訪客就能直接在你的頁面上轉動轉盤。
配色主題
<iframe src="https://randompickerwheel.app/zh-hant/embed/wheel?t=%E8%AA%B0%E5%85%88%E4%BE%86%EF%BC%9F&items=%E5%B0%8F%E6%98%8E%2C%E5%B0%8F%E8%8F%AF%2C%E9%98%BF%E5%82%91%2C%E6%80%A1%E5%90%9B%2C%E5%AE%B6%E8%B1%AA%2C%E9%9B%85%E5%A9%B7&theme=prism" width="420" height="540" style="border:0;max-width:100%" title="誰先來?" loading="lazy"></iframe>
https://randompickerwheel.app/zh-hant/embed/wheel?t=%E8%AA%B0%E5%85%88%E4%BE%86%EF%BC%9F&items=%E5%B0%8F%E6%98%8E%2C%E5%B0%8F%E8%8F%AF%2C%E9%98%BF%E5%82%91%2C%E6%80%A1%E5%90%9B%2C%E5%AE%B6%E8%B1%AA%2C%E9%9B%85%E5%A9%B7&theme=prism- 課程網站與 LMS在 Google 協作平台、Moodle 或 Canvas 的課程頁放上抽籤、抽題轉盤。
- Notion 團隊頁面值日生、午餐吃什麼、晨會發言順序,在 Notion 裡直接轉。
- 部落格互動文章今天吃什麼、寫作題目、讀者抽獎,都能做成轉盤。
- 社團與活動頁面破冰遊戲、懲罰轉盤、下一輪玩什麼,放在活動頁隨時使用。
一分鐘把轉盤嵌進網頁
填寫轉盤內容
輸入標題和選項,每行一個。右側預覽就是實際的嵌入效果,可以直接轉轉看。
調整外觀
從四種配色與三種尺寸中選擇。標題、彩紙效果和 Made with 連結不需要的話都能關閉。
複製並貼上
把 iframe 程式碼貼到頁面的 HTML 區塊。Notion 這類只接受連結的工具,複製下方連結即可。
為什麼選這個嵌入轉盤
常見平台的貼上方式
多數架站工具和部落格都能在 HTML 區塊貼上 iframe 程式碼;Notion 只接受連結;也有平台會過濾 iframe。遇到無法嵌入時,放一般連結讓訪客在新分頁開啟即可。
| 平台 | 貼上位置 | 小提醒 |
|---|---|---|
| Google 協作平台 | 插入 → 嵌入 → 嵌入程式碼 | 貼上後按 下一步 → 插入,再拖曳四角調整大小。 |
| WordPress(區塊編輯器) | 新增自訂 HTML 區塊並貼上 | 自架 WordPress 可直接顯示;WordPress.com 部分方案會移除 iframe,可改用連結。 |
| Blogger | 文章的 HTML 檢視,或 HTML/JavaScript 小工具 | 用小工具的話,每一頁的側邊欄都會出現轉盤。 |
| Notion | 輸入 /embed,貼上連結(不是程式碼) | 把區塊下緣拖到約 540 像素高,才看得到轉動按鈕。 |
| Moodle、Canvas | 編輯器切換到 HTML 原始碼 | 儲存後消失的話,可能是網站限制了 iframe,請詢問管理員。 |
| Google Classroom | 不支援 iframe | 張貼連結,讓學生在新分頁開啟。 |
連結中的參數說明
所有設定都是網址的一部分,下週換名單時不用回到本頁,直接改連結也可以。
| 參數 | 範例 | 作用 |
|---|---|---|
| items | items=A%2CB%2CC | 選項,以逗號分隔並經 URL 編碼,至少兩個。 |
| t | t=%E8%AA%B0%E5%85%88%E4%BE%86 | 轉盤上方的標題,留空則不顯示。 |
| theme | theme=ocean | 可選 prism、ocean、candy、mono。 |
| title | title=0 | 隱藏標題列。 |
| confetti | confetti=0 | 關閉抽中後的彩紙效果。 |
| brand | brand=0 | 隱藏 Made with Random Picker Wheel 小連結。 |
選項直接寫在連結裡,任何人查看網頁原始碼都看得到。請不要放成績、電話等個人資料。
如何選尺寸
尺寸決定程式碼中的寬和高。框內轉盤會自動填滿,max-width 讓它在手機上縮到螢幕寬度,選大尺寸也不會出現水平捲動。
| 尺寸 | 框架 | 適合 |
|---|---|---|
| 小 | 320 × 440 px | 側邊欄、Notion 窄欄 |
| 中 | 420 × 540 px | 部落格文章、Google 協作平台、課程頁 |
| 大 | 560 × 680 px | 滿版頁面、教室投影 |
常見問題解答
嵌入轉盤要付費嗎?
完全免費,不用註冊、沒有次數限制,框內也沒有廣告。
如何在 Notion 放轉盤?
在 僅連結 欄位複製連結,於 Notion 輸入 /embed,貼上連結並建立嵌入。再把區塊下緣拖到約 540 像素,就能看到完整轉盤。
嵌入後還能修改選項嗎?
選項寫在連結裡,修改就要換上新的程式碼。可以在這裡重新產生,或直接修改網址中的 items 部分。
為什麼網站把 iframe 刪掉了?
部分平台為了安全會過濾 iframe,例如某些 WordPress.com 方案、權限受限的 Moodle,以及多數通訊軟體。這時請改貼一般連結,讓訪客在新分頁開啟。
結果真的隨機嗎?
是的。每次停在哪裡由訪客瀏覽器中的 crypto.getRandomValues 決定,每個選項機率相同,站長也無法預設結果。
手機上能正常顯示嗎?
可以。框架會縮到螢幕寬度,轉盤跟著縮放,寬約 280 像素時依然清楚,轉動按鈕也夠大好按。
可以拿掉 Made with 連結嗎?
可以,複製程式碼前關閉 顯示 Made with 連結 即可。若願意保留,我們會非常感謝。