如何将 LanderLab 测验嵌入到其他页面

• 在多个落地页中复用同一个测验，无需重新创建
• 为已经上线的落地页添加测验
• 在 LanderLab 之外搭建的网站上显示 LanderLab 测验

​

工作原理

​

分步指南

1

为测验创建空白落地页

• 进入 Landing Pages，点击 Create Landing Page
• 点击 Create From Template
• 选择 Blank Template，然后点击 Use Template
• 为页面起一个清晰的名称（例如 Quiz - Embed），然后点击 Create Landing Page

更多详情请参阅从零开始创建落地页。

2

添加 Quiz 元素

• 在编辑器中，点击左上角的 +（Add Elements）
• 在 Lead Capture 下点击 Quiz，将其添加到页面

此页面上只保留测验。你在这里添加的其他内容（如标题、图片或页脚）也会显示在嵌入区域中。

3

创建测验

• 选择 Create From Scratch 自行创建测验，或选择 Create From Template 从现成的测验开始。你也可以在输入框中描述测验，用 AI 生成。
• 在测验编辑器中添加和编辑步骤
• 点击 Update 保存测验

了解更多：从零开始创建测验漏斗。

4

发布测验页面

• 点击编辑器右上角的 Publish
• 选择 Domain 和 Path，然后点击 Publish Landing Page
• 复制页面的线上 URL（例如 https://yourdomain.com/quiz）。稍后需要将它粘贴到嵌入代码中。

5

在落地页中添加 Custom Code 元素

• 在编辑器中打开要显示测验的落地页
• 点击 +（Add Elements），在 Engagement 下点击 Custom Code
• 将该元素移动到测验需要显示的位置
• 选中该元素后，点击右侧面板中的 Edit Custom Code

6

粘贴嵌入代码

将以下代码粘贴到 Edit Code 窗口中，并把 src 的值替换为已发布测验页面的 URL：

<div style="width:100%;margin:0;padding:0;">
  <iframe
    src="https://yourdomain.com/your-quiz-page"
    width="100%"
    height="600"
    frameborder="0"
    style="display:block;width:100%;margin:0;padding:0;border:0;outline:0;box-shadow:none;background:transparent;">
  </iframe>
</div>

点击 Save 关闭窗口。

7

保存、预览并发布落地页

• 在编辑器中点击 Save
• 点击 Preview（眼睛）图标检查测验。Custom Code 元素不会在编辑器中渲染，因此测验只会在预览和线上页面中显示。
• 发布或重新发布落地页，使更改生效

​

最终结果

​

自定义嵌入效果

• 高度： 根据测验中最高的步骤调整 height="600"。如果某个步骤高于框架，访客会在测验内看到滚动条。
• 移动端： 在手机上检查落地页，测验步骤在移动端通常更高，必要时请增加高度。
• 宽度： 测验会占满其容器的整个宽度。如需更窄并居中显示，请将外层 <div> 的样式改为 width:100%;max-width:600px;margin:0 auto;padding:0;。

<style>
  .quiz-embed {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .quiz-embed iframe {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
  }
</style>

<div class="quiz-embed">
  <iframe
    src="https://yourdomain.com/your-quiz-page"
    width="100%"
    height="600"
    frameborder="0">
  </iframe>
</div>

​

在 LanderLab 之外嵌入测验

​

重要说明

• 线索归属于测验页面。 测验实际运行在空白测验页面上，因此线索和分析数据都会记录在该页面上，而不是记录在嵌入测验的落地页上。
• 测验更新会同步到所有位置。 编辑并重新发布测验页面后，所有使用它的落地页中的嵌入测验都会同步更新。只有在更改测验页面的域名或路径时，才需要更新 src。
• 跟踪在 iframe 内运行。 宿主落地页上的像素和 URL 参数不会自动传入嵌入的测验。请直接在测验页面上设置测验跟踪，例如 Meta Pixel Lead 事件。
• 发布后，务必在线上落地页中测试测验。