把转盘嵌入你的网页
输入选项,选择配色和尺寸,复制一行代码。只要页面支持 HTML 或嵌入链接,访客就能直接在你的页面上转动转盘。
配色主题
<iframe src="https://randompickerwheel.app/zh-hans/embed/wheel?t=%E8%B0%81%E5%85%88%E6%9D%A5%EF%BC%9F&items=%E5%B0%8F%E6%98%8E%2C%E5%B0%8F%E7%BA%A2%2C%E5%B0%8F%E5%88%9A%2C%E5%B0%8F%E4%B8%BD%2C%E5%B0%8F%E5%8D%8E%2C%E5%B0%8F%E7%BE%8E&theme=prism" width="420" height="540" style="border:0;max-width:100%" title="谁先来?" loading="lazy"></iframe>
https://randompickerwheel.app/zh-hans/embed/wheel?t=%E8%B0%81%E5%85%88%E6%9D%A5%EF%BC%9F&items=%E5%B0%8F%E6%98%8E%2C%E5%B0%8F%E7%BA%A2%2C%E5%B0%8F%E5%88%9A%2C%E5%B0%8F%E4%B8%BD%2C%E5%B0%8F%E5%8D%8E%2C%E5%B0%8F%E7%BE%8E&theme=prism- 课程网站与 LMS在 Moodle 或学校网站的课程页里放一个点名转盘、抽题转盘。
- Notion 团队页值日、午饭吃什么、站会发言顺序,在 Notion 里直接转。
- 博客互动文章今天吃什么、写作题目、读者抽奖,都可以做成一个转盘。
- 社团与活动页面破冰游戏、惩罚转盘、下一局玩什么,放在活动页上随时用。
一分钟把转盘嵌进网页
填写转盘内容
输入标题和选项,每行一个。右侧预览就是真实的嵌入效果,可以直接转一下试试。
调整外观
从四种配色和三种尺寸中选择。标题、彩纸效果和 Made with 链接不需要的话都可以关闭。
复制并粘贴
把 iframe 代码粘贴到网页的 HTML 区块里。Notion 这类只接受链接的工具,复制下方的链接即可。
为什么用这个嵌入转盘
常见平台怎么粘贴
大多数建站工具和博客系统都能在 HTML 区块里粘贴 iframe 代码;Notion 只接受链接;也有平台会过滤 iframe。遇到不能嵌入的情况,放一个普通链接,让访客在新标签页打开即可。
| 平台 | 粘贴位置 | 注意事项 |
|---|---|---|
| WordPress(区块编辑器) | 添加自定义 HTML 区块,粘贴代码 | 自建 WordPress 可直接显示;WordPress.com 部分套餐会过滤 iframe,可改用链接。 |
| Hexo、Hugo、VuePress 等静态博客 | 直接把代码写进 Markdown 正文 | 这些生成器通常保留原始 HTML,个别主题或配置可能需要开启 HTML 渲染。 |
| Notion | 输入 /embed,粘贴链接(不是代码) | 把区块下边缘拖到约 540 像素高,才能看到转动按钮。 |
| Moodle | 页面或标签的编辑器中切换到 HTML 源码 | 保存后消失的话,可能是站点限制了 iframe,请联系管理员。 |
| 学校官网 CMS | 编辑器的源码或 HTML 模式 | 各系统名称不同,一般是工具栏上的 源代码 按钮。 |
| 微信公众号、小红书 | 不支持 iframe | 放文字链接或二维码,读者在浏览器中打开。 |
链接里的参数说明
所有设置都是网址的一部分,下次换一批名单时,不必回到本页,直接改链接也可以。
| 参数 | 示例 | 作用 |
|---|---|---|
| items | items=A%2CB%2CC | 选项,用逗号分隔并做 URL 编码,至少两个。 |
| t | t=%E8%B0%81%E5%85%88%E6%9D%A5 | 转盘上方的标题,留空则不显示。 |
| 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 | 博客正文、课程页面 |
| 大 | 560 × 680 px | 通栏页面、教室投影 |
常见问题解答
嵌入转盘收费吗?
完全免费,不用注册,没有次数限制,框内也没有广告。
怎么在 Notion 里放转盘?
在 仅链接 一栏复制链接,在 Notion 中输入 /embed,粘贴链接并创建嵌入。再把区块下边缘拖到约 540 像素,就能看到完整转盘。
嵌入后还能修改选项吗?
选项写在链接里,要修改就需要换一段新代码。可以在这里重新生成,也可以直接改网址里的 items 部分。
为什么公众号里放不了?
微信公众号等平台不允许插入第三方 iframe。可以在文章里放文字链接或二维码,读者在浏览器里打开就能转。部分 WordPress.com 套餐和权限受限的 Moodle 也会过滤 iframe。
结果真的随机吗?
是的。每次停在哪里由访客浏览器中的 crypto.getRandomValues 决定,每个选项概率相同,站长也无法预设结果。
手机上能正常显示吗?
可以。框体会缩到屏幕宽度,转盘随之缩放,宽度约 280 像素时依然清晰,转动按钮也足够大,方便点按。
能去掉 Made with 链接吗?
可以,复制代码前关闭 显示 Made with 链接 即可。如果愿意保留,我们会很感谢。