部落格 · Notion · Google 協作平台 · Moodle

把轉盤嵌入你的網站

輸入選項,挑選配色和尺寸,複製一行程式碼。只要頁面能放 HTML 或嵌入連結,訪客就能直接在你的頁面上轉動轉盤。

配色主題

尺寸
嵌入程式碼
<iframe src="https://randompickerwheel.app/zh-hant/embed/wheel?t=%E8%AA%B0%E5%85%88%E4%BE%86%EF%BC%9F&amp;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&amp;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 裡直接轉。
  • 部落格互動文章今天吃什麼、寫作題目、讀者抽獎,都能做成轉盤。
  • 社團與活動頁面破冰遊戲、懲罰轉盤、下一輪玩什麼,放在活動頁隨時使用。
使用方法

一分鐘把轉盤嵌進網頁

  1. 填寫轉盤內容

    輸入標題和選項,每行一個。右側預覽就是實際的嵌入效果,可以直接轉轉看。

  2. 調整外觀

    從四種配色與三種尺寸中選擇。標題、彩紙效果和 Made with 連結不需要的話都能關閉。

  3. 複製並貼上

    把 iframe 程式碼貼到頁面的 HTML 區塊。Notion 這類只接受連結的工具,複製下方連結即可。

大家為什麼用它

為什麼選這個嵌入轉盤

免註冊,不存伺服器所有設定都寫在連結裡,不必登入後台,也不會過期失效。
手機和側邊欄都適用轉盤會依框架大小自動縮放,大約 280 到 600 像素寬都清楚好用,窄欄也不會溢出。
每次都公平結果來自瀏覽器的密碼學亂數,每個選項被抽中的機率完全相同。
四套配色鮮豔的繽紛、清爽的海洋、柔和的糖果,以及適合簡約部落格的黑白。
框內沒有廣告訪客只會看到轉盤和轉動按鈕,底部的小連結也可以關掉。
也能當連結使用在新分頁開啟同一個網址就能全螢幕投影;不能嵌入的地方,直接分享連結。

常見平台的貼上方式

多數架站工具和部落格都能在 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張貼連結,讓學生在新分頁開啟。

連結中的參數說明

所有設定都是網址的一部分,下週換名單時不用回到本頁,直接改連結也可以。

參數範例作用
itemsitems=A%2CB%2CC選項,以逗號分隔並經 URL 編碼,至少兩個。
tt=%E8%AA%B0%E5%85%88%E4%BE%86轉盤上方的標題,留空則不顯示。
themetheme=ocean可選 prism、ocean、candy、mono。
titletitle=0隱藏標題列。
confetticonfetti=0關閉抽中後的彩紙效果。
brandbrand=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 連結 即可。若願意保留,我們會非常感謝。