将预约组件嵌入你的网站

更新于 2026年9月22日集成

设置 → 集成让访客可以直接在你自己的网站上预约你，使用嵌入式预约组件，而不必跳转到这里。

1. 允许你的域名

在允许的域名中，填入将展示预约组件的网站的确切来源，只填协议和主机，不带路径，也不带结尾斜杠：

https://apply.acme.com     ✓
https://acme.com:8443      ✓
acme.com                   ✗  缺少协议
https://acme.com/book      ✗  带有路径
https://acme.com/          ✗  结尾多了斜杠

https://www.acme.com 和 https://acme.com 属于不同的来源。如果访客两种写法都能访问你的网站，请把两个都加上。

这份列表同时也是开关：列表为空时，你的预约组件无法嵌入到任何地方。最多可添加 50 个域名，移除后立即生效。

2. 粘贴代码片段

每一项已审核通过的服务都有各自的代码片段。复制它，粘贴到网页中你希望预约组件出现的位置：

<div class="scheduling-embed" data-service="SERVICE_ID"></div>
<script src="https://embed.example.com/embed.js" async></script>

<div> 标记位置；script 标签可以放在页面任意位置，即使有多个预约组件也只需出现一次。如果提示暂无可嵌入的已审核服务，说明该服务仍在审核中，通过审核后其片段即会出现。

3. 设置语言

本页的组件语言决定访客看到的语言。保持跟随页面语言，预约组件就会读取你页面 <html> 标签上的 lang 属性。搜索引擎和屏幕阅读器用的也是这个属性，因此本地化规范的网站无需额外配置：

<!doctype html>
<html lang="es">      <!-- 预约组件以西班牙语显示 -->
  <head>…</head>
  <body>…</body>
</html>

地区标签同样有效：lang="pt-BR" 会归并到我们支持的最接近语言，而不会被拒绝。

若要针对某一个预约组件覆盖页面语言，请在嵌入 div 上加 data-locale。它同时优先于页面语言和本页的设置：

<div class="scheduling-embed" data-service="SERVICE_ID" data-locale="de"></div>

如果你的页面有自己的语言切换器，可以让预约组件跟随它。切换是就地完成的，访客已经填写的内容会被保留：

window.SchedulerEmbed.setLocale("sr");

简而言之，按以下顺序取第一个已设置的值：data-locale、你页面的 <html lang>、组件语言、访客的浏览器语言，最后是英语。

其他选项

将它们加到嵌入 div 上：

data-mode="popup"：显示一个按钮，点击后在浮层中打开预约组件，而不是直接嵌在页面里。

data-label="立即预约"：浮层模式下的按钮文字。

data-min-height="480"：预约组件报告真实高度之前的占位高度（像素）。若加载时出现跳动，可调大该值。

如果你的网站会动态插入内容或需要统计转化，还有两个调用可用：

// 新增预约组件 div 后重新扫描页面
window.SchedulerEmbed.refresh();

// 访客完成预约时触发
window.SchedulerEmbed.onBooking(function (e) {
  console.log(e.bookingId, e.serviceId);
});

如果预约组件加载不出来

页面来源不在允许列表中，或未完全匹配：把 https 写成 http，或漏掉 www，都会被拦截。

代码片段被放到了脚本无法运行的位置，例如网站编辑器中的纯文本或受限 HTML 区块。

data-service 的值被改动过。请原样粘贴片段，不要手动重新输入该 ID。

该服务已下架或不再处于已审核状态。