Unbounce感谢页Calendly预填失败 报Calendly not defined错误

核心问题原因 #

• 脚本加载顺序错误：引入Calendly widget.js时添加了async属性，异步加载的脚本不会阻塞页面解析，手动调用Calendly.initInlineWidget时脚本尚未加载完成，全局不存在Calendly对象，直接触发未定义报错。
• 重复初始化冲突：Calendly默认逻辑会自动识别带calendly-inline-widget类名、配置了data-url的DOM节点自动渲染，同时手动调用初始化方法会导致逻辑冲突，就算脚本加载完成也无法正常执行预填。
• 无效参数干扰：DOM节点data-url末尾拼接的&email=email&name=first_name是无意义的静态占位符，不会自动读取页面URL参数，反而会传入无效值干扰预填逻辑。

可用修复代码 #

将Unbounce HTML组件内原有Calendly相关代码全部删除，替换为以下内容：

<!-- Calendly 内联嵌入模块 -->
<div class="calendly-inline-widget" id="my-calendly-embed" style="min-width:320px;height:830px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
<script>
window.addEventListener('load', function() {
    if (typeof Calendly === 'undefined') return;
    const urlParams = new URL(window.location.href).searchParams;
    Calendly.initInlineWidget({
        url: 'https://calendly.com/d/dns-sg1-kc3/try-demo?hide_event_type_details=1&hide_gdpr_banner=1',
        parentElement: document.getElementById('my-calendly-embed'),
        prefill: {
            name: urlParams.get('first_name') || '',
            email: urlParams.get('email') || ''
        }
    });
});
</script>

修复逻辑说明 #

• 移除widget.js的async属性，确保Calendly全局对象在后续初始化逻辑执行前完成注册，解决未定义报错。
• 删除DOM节点上的data-url属性，关闭Calendly自动初始化逻辑，仅保留手动初始化的单一入口，避免渲染冲突。
• 初始化逻辑绑定在window.load事件下执行，同时增加Calendly对象存在性兜底判断，避免网络波动导致的JS报错阻断页面其他功能。
• 移除原有data-url中拼接的无效静态参数，所有预填值通过官方prefill配置项传入，避免参数值被覆盖。
• 为URL参数读取增加空值兜底，URL未携带对应参数时传入空字符串，避免null值导致表单填充异常。

验证步骤 #

• 保存Unbounce页面修改并发布，清空浏览器缓存后访问测试地址：https://try.demopage.com/demothankyou/?first_name=john&email=test%40gmail.com
• 进入预约流程后，姓名、邮箱字段会自动填充对应参数值，浏览器控制台无Calendly相关报错。

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