网站嵌入

除了分享链接,你还可以把测验直接嵌进自己的网站——访客无需跳转,在你的落地页里就能完成作答。

三种嵌入方式

在目标测验中打开分享 → 网站嵌入,选择展示方式后复制生成的代码,粘贴到你网站的 HTML 中即可。

方式	适合场景	特点
内嵌(自适应)	融入页面内容流	高度随内容自动调整,推荐使用
弹窗	页面上放一个入口按钮	点击后以全屏弹窗打开测验
纯 iframe(固定高度)	不便加载脚本的环境	最简单,高度固定、内容在框内滚动

内嵌(自适应)

<div data-rooquiz-embed data-rooquiz-token="你的测验代码"></div>
<script src="https://你的作答域名/embed.js" async></script>

嵌入脚本会自动监听测验内容的高度变化(翻页、进入结果页等),实时调整 iframe 高度,无滚动条、无截断。

弹窗

<div data-rooquiz-embed data-rooquiz-token="你的测验代码" data-rooquiz-mode="popup" data-rooquiz-text="开始测评"></div>
<script src="https://你的作答域名/embed.js" async></script>

页面上会渲染一个按钮,点击后以全屏遮罩弹窗打开测验,支持 ESC 或点击遮罩关闭。

纯 iframe

<iframe src="https://你的作答域名/a/你的测验代码?embed=1" width="100%" height="600" style="border:0;" title="RooQuiz"></iframe>

iframe 始终指向测评稳定的 /a/<token> 地址,而不是它的自定义路径,所以之后改了自定义路径,也不会让已经贴在你网站上的嵌入代码失效。

「Made with RooQuiz」小字

在免费版上,嵌入会保留一行小小的 Made with RooQuiz 署名。它位于 iframe 之外、在你自己的页面上:内嵌和弹窗方式由 embed.js 自动渲染;纯 iframe 代码则在 iframe 正下方附带一个 <p>——请保留它。在 Pro 上,生成的代码不包含这行字。

可用属性

属性	说明
`data-rooquiz-token`	必填,测验的公开代码
`data-rooquiz-mode`	`inline`(默认)或 `popup`
`data-rooquiz-utm-source`	UTM 来源,会随每条作答一并记录,用于UTM 来源追踪与数据洞察的来源分析
`data-rooquiz-utm-medium`	UTM 媒介(可选)
`data-rooquiz-utm-campaign`	UTM 活动(可选)
`data-rooquiz-height`	内嵌模式的初始高度(px),自适应生效前的占位
`data-rooquiz-text`	弹窗模式的按钮文案

不设置 UTM 属性时,宿主页面网址上的 utm_* 参数会自动透传。

JS API

需要自定义触发时机(比如用你自己设计的按钮打开弹窗),可以直接调用:

<script src="https://你的作答域名/embed.js"></script>
<script>
  // 手动挂载内嵌
  RooQuiz.embed({ el: '#container', token: '你的测验代码', utmSource: 'homepage' })
  // 用任意元素触发弹窗
  document.querySelector('#my-button').onclick = () => RooQuiz.open('你的测验代码', { utmSource: 'homepage' })
</script>

嵌入页面会自动隐藏页脚与背景,以透明形态融入你的网站;主题色仍然生效。嵌入带来的作答会照常出现在答卷记录中。