📚 嵌入教程

详细教程:如何将转盘嵌入到网站、博客、PowerPoint 等各种平台

📖概述

幸运转盘支持通过 iframe 嵌入到几乎任何支持 HTML 的平台。无论是个人网站、博客、演示文稿还是在线文档,都可以轻松嵌入。

嵌入方式对比

平台 难度 是否支持 备注
HTML 网站 ⭐ 简单 ✅ 完全支持 直接复制粘贴代码
WordPress ⭐ 简单 ✅ 完全支持 使用 HTML 模块
PowerPoint ⭐⭐ 中等 ✅ 支持 需安装插件或使用 Web 版
Google Slides ⭐⭐ 中等 ⚠️ 有限支持 需使用第三方插件
Notion ⭐ 简单 ✅ 完全支持 使用 Embed 模块
微信公众号 ❌ 不支持 微信不支持 iframe

1嵌入 HTML 网站

将转盘嵌入到您的网站是最简单的方式。只需三步:

步骤 1:获取嵌入代码

  1. 访问 嵌入代码生成器
  2. 添加您需要的选项
  3. 选择配色方案和尺寸
  4. 点击"生成嵌入代码"

步骤 2:复制代码

点击"复制代码"按钮,或手动复制以下格式的代码:

<iframe src="https://wheelpicker.cc/emb/?o=选项1,选项2,选项3&c=vibrant" width="400" height="500" frameborder="0" style="border:none;border-radius:12px;" ></iframe>

步骤 3:粘贴到网页

将代码粘贴到您网页的 HTML 中,放在您希望转盘显示的位置。

💡 提示: 您可以通过修改 width 和 height 属性来调整转盘大小。建议保持宽高比约为 4:5。

2嵌入 PowerPoint

在 PowerPoint 中嵌入网页转盘,让您的演示更加生动有趣!

方法1:PowerPoint 网页版
方法2:桌面版 + 插件
方法3:链接跳转

使用 PowerPoint 网页版(推荐)

PowerPoint 网页版原生支持嵌入网页,是最简单的方法。

  1. 打开 PowerPoint Online 或 Microsoft 365
  2. 打开或创建一个演示文稿
  3. 点击菜单栏的 插入加载项
  4. 搜索并添加 Web Viewer 加载项
  5. 在 Web Viewer 中输入转盘网址:https://wheelpicker.cc/emb/?o=选项1,选项2
  6. 调整大小和位置,完成!
💡 提示: 演示时需要联网才能使用转盘功能。

使用桌面版 PowerPoint + LiveWeb 插件

如果您使用桌面版 PowerPoint,需要安装 LiveWeb 插件。

  1. 下载 LiveWeb 插件(免费)
  2. 安装插件并重启 PowerPoint
  3. 在 PowerPoint 中,点击 插入LiveWebWeb Page
  4. 输入转盘网址并按照向导完成设置
⚠️ 注意: LiveWeb 是第三方插件,请从官方来源下载。某些企业环境可能限制插件安装。

3嵌入 Google Slides

Google Slides 不直接支持嵌入网页,但可以通过以下方式实现:

方法1:使用 Web Page 插件

  1. 打开 Google Slides
  2. 点击 扩展程序插件获取插件
  3. 搜索并安装 Slides Toolbox 或类似插件
  4. 使用插件的网页嵌入功能

方法2:使用超链接(推荐)

  1. 在幻灯片中插入文本或图片
  2. 选中后按 Ctrl+K 添加链接
  3. 粘贴转盘网址
  4. 演示时点击即可打开

4嵌入 WordPress

使用 Gutenberg 编辑器(新版)

  1. 在文章编辑页面,点击 + 添加模块
  2. 搜索 自定义 HTML 模块
  3. 将 iframe 代码粘贴进去
  4. 预览并发布

使用经典编辑器

  1. 切换到 文本(HTML)模式
  2. 将 iframe 代码粘贴到合适位置
  3. 切换回可视化模式检查
💡 提示: 某些 WordPress 主题或安全插件可能会过滤 iframe 代码。如遇问题,请检查安全设置或联系主题开发者。

5嵌入 Notion

  1. 在 Notion 页面中,输入 /embed/嵌入
  2. 选择 Embed(嵌入)
  3. 粘贴转盘网址:https://wheelpicker.cc/emb/?o=选项1,选项2
  4. 按 Enter 确认
  5. 拖动边缘调整大小
💡 提示: Notion 嵌入的网页可以直接交互,非常适合团队协作场景。

⚙️URL 参数说明

您可以通过 URL 参数自定义嵌入的转盘:

参数 说明 示例
o 选项列表(逗号分隔) o=选项1,选项2,选项3
c 配色方案 c=vibrant / warm / cool / pastel / neon
t 标题 t=抽奖转盘
hideTitle 隐藏标题 hideTitle=1

完整示例

https://wheelpicker.cc/emb/?o=一等奖,二等奖,三等奖,参与奖&c=neon&t=年会抽奖

常见问题

转盘不显示?
  • 检查网络连接
  • 确认 iframe src 地址正确
  • 部分网站可能禁止 iframe 嵌入,请联系网站管理员
  • 尝试在新标签页直接打开转盘网址测试
转盘太大/太小?

修改 iframe 的 width 和 height 属性。建议保持 4:5 的宽高比。

width="300" height="375" 小尺寸
width="500" height="625" 大尺寸
选项包含特殊字符怎么办?

特殊字符需要进行 URL 编码:

  • 空格 → %20
  • & → %26
  • = → %3D

建议使用 嵌入代码生成器 自动处理编码。

可以离线使用吗?

嵌入的转盘需要联网才能使用。如果需要离线使用,可以考虑下载本项目的源代码自行部署。

准备好了吗?

立即生成您的嵌入代码,让转盘为您的网站增添乐趣!

🔗 生成嵌入代码