如何将站点URL参数传递给iframe内嵌的Calendly实现表单预填充

1. 提取当前站点URL的参数 #

首先编写通用参数提取函数，从你站点的URL中拿到姓名、邮箱、自定义参数a1的值：

function getQueryParam(name) {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(name);
}
// 调用示例
const userName = getQueryParam('你站点URL中姓名字段的参数名');
const userEmail = getQueryParam('你站点URL中邮箱字段的参数名');
const customA1 = getQueryParam('你站点URL中a1字段的参数名');

2. 拼接Calendly预填参数 #

Calendly内嵌iframe的预填参数遵循以下规则：

• 原生姓名字段对应参数名：name
• 原生邮箱字段对应参数名：email
• 自定义参数直接使用你在Calendly后台配置的参数名a1
• 所有参数值需做URL编码后拼接到Calendly基础链接的末尾，格式为基础链接?name=xxx&email=xxx&a1=xxx

3. 点击按钮时动态加载iframe #

因为是点击按钮才唤起日历，不要提前加载iframe，点击时拼接完参数再更新iframe地址即可，示例代码如下：

<!-- 触发按钮 -->
<button id="openCalendlyBtn">预约时间</button>
<!-- 预先隐藏的Calendly iframe容器 -->
<div id="calendlyContainer" style="display: none;">
  <iframe id="calendlyIframe" width="100%" height="700px" frameborder="0"></iframe>
</div>

<script>
document.getElementById('openCalendlyBtn').addEventListener('click', function() {
  // 提取参数
  const userName = getQueryParam('你站点的姓名字段参数名');
  const userEmail = getQueryParam('你站点的邮箱字段参数名');
  const customA1 = getQueryParam('你站点的a1字段参数名');
  
  // 替换为你自己的Calendly日历基础地址
  const calendlyBaseUrl = 'https://calendly.com/你的Calendly账号/你的日历名称';
  
  // 拼接参数
  const filledUrl = `${calendlyBaseUrl}?name=${encodeURIComponent(userName)}&email=${encodeURIComponent(userEmail)}&a1=${encodeURIComponent(customA1)}`;
  
  // 更新iframe地址并显示
  document.getElementById('calendlyIframe').src = filledUrl;
  document.getElementById('calendlyContainer').style.display = 'block';
});
</script>

注意事项 #

• 提前确认Calendly后台的自定义参数a1已完成配置，参数名和代码中填写的完全一致
• 如果参数值为空，可自行补充默认值或者跳过该参数的拼接，避免传递空值
• 如果使用Calendly官方的内嵌JS SDK，也可以直接在初始化时传入prefill配置项，规则和上述参数拼接逻辑一致

内容的提问来源于stack exchange，提问作者iw756