嵌入

嵌入让你把 SupDesk 表单直接放到自己的网站上。访客无需离开你的站点，就能加入候补名单、给你留言或报名参加 Beta。

想要的是对话气泡而不是表单？在线客服有自己的加载器（chat.js）和代码片段——参见在线客服。

可嵌入的表单有三种：

表单	作用	前提条件
`waitlist`	收集候补名单注册	已启用候补名单
`contact`	在项目收件箱中新建一个会话	私信 Pro
`beta`	面向单个 Beta 计划的公开报名	已启用 Beta，且计划处于活跃状态并开启公开报名

添加嵌入

每个表单的代码片段都会在控制台中生成——复制它，粘贴到你自己页面中希望显示表单的位置：

候补名单 — 项目的候补名单板块，设置卡片下方
联系 — 项目的设置页面，嵌入联系表单处
Beta — Beta 计划页面，嵌入处

代码片段形如：


<script src="https://acme.supdesk.app/embed.js"
        data-supdesk="contact"
        data-title="联系 Acme" data-height="520" async></script>
<noscript>
  <iframe src="https://acme.supdesk.app/embed/contact" width="100%" height="520"
          style="border:0" title="联系 Acme"></iframe>
</noscript>

脚本会在标签所在位置插入表单，并随表单高度变化自动调整大小——例如出现校验错误时，或提交后收起为一行简短确认时。<noscript> 块是一个普通 iframe，因此禁用 JavaScript 的访客仍可正常使用表单。

所有内容都由你自己的门户域名提供。如果你配置了自定义域名，控制台会基于该域名生成代码片段；否则使用你的 *.supdesk.app 子域名。

自定义域名与根域名

你的自定义域名和代码片段指向的来源必须共享相同的根域名，嵌入的框架才能与加载器通信。控制台始终使用你当前生效的门户来源生成代码片段，因此在设置自定义域名之后复制的片段无需额外考虑：脚本和表单都由你的自定义域名提供，同一来源。

需要注意的是在添加自定义域名之前复制的片段。对你的旧来源的请求会被重定向到自定义域名，加载器只会在两者共享根域名时接受该重定向——例如门户子域名 feedback.apibot.dev 和自定义域名 www.apibot.dev 都位于 apibot.dev 上。如果你的自定义域名位于完全不同的根域名下，重定向就是跨域的，嵌入将无法工作：请在自定义域名生效后从控制台重新复制片段。

属性

属性	必填	说明
`data-supdesk`	是	要嵌入的表单：`waitlist`、`contact` 或 `beta`
`data-program`	仅 Beta	Beta 计划的 slug
`data-title`	否	框架的无障碍标题，默认为 `SupDesk form`
`data-height`	否	首次自动调整前的初始高度（像素），默认为 `360`
`data-ref`	否	用于归属此次注册的候补名单推荐码

一个页面可以放置多个嵌入——为每个嵌入使用各自的 <script> 标签。

内容安全策略（CSP）

如果你的网站发送了 Content-Security-Policy 响应头，需要在两个指令中允许你的门户源，否则浏览器会拦截嵌入内容：


script-src https://acme.supdesk.app;
frame-src  https://acme.supdesk.app;

如果你的代码片段使用自定义域名，这里也请填写该域名。除此之外无需再放行任何内容 ——嵌入不会向你的页面加载第三方脚本，也不会发起自己的网络请求。

反垃圾保护

嵌入表单与你的门户使用相同的保护措施：按访客和按项目限流；如果你为项目配置了 Turnstile，验证挑战也会出现在嵌入内容中。

由于你的 Turnstile 密钥是针对自己的域名注册的，而嵌入内容正是从同一域名提供的，因此密钥无需额外设置即可生效。

隐私与登录

嵌入表单从不读取或写入门户登录会话——按照浏览器的设计，这类 Cookie 不会发送到位于他人页面中的框架。因此每个嵌入都采用电子邮件优先的方式：访客提交邮箱地址，然后通过邮件收到链接。

放置嵌入时有一点值得注意：访客会在普通浏览器标签页中完成流程，而不是在你的页面内完成。

候补名单 — 注册会立即记录；邮件中包含其排名和专属推荐链接
Beta — 邮件中包含完成报名的接受链接
联系 — 留言会立即送达你的收件箱；邮件既是回执，也可用于查看你的回复

通过嵌入创建的候补名单条目会以 embed 作为来源记录，因此你可以在条目表格和 CSV 导出中将它们与门户注册区分开。

访客看到的内容

嵌入只显示表单本身——没有门户的页眉、页脚或导航。它会沿用项目的品牌色，因此无需任何样式工作即可继承你的强调色。

嵌入页面不会被搜索引擎收录；你的公开门户页面才是规范的、可被索引的版本。

旧版候补名单代码片段

在脚本加载器出现之前，候补名单嵌入是一个指向 /waitlist/embed 的普通 iframe：


<iframe src="https://acme.supdesk.app/waitlist/embed" width="100%" height="360"
        style="border:0" title="候补名单"></iframe>

它仍然可用 —— 你无需做任何更改。换成当前的代码片段可获得自动高度调整；旧 iframe 固定的 height 是它唯一实际的不足。