Calendly预约按钮点击后弹窗HTML不加载问题咨询

你的代码存在3处直接导致弹窗无法触发的问题：

• 引号嵌套语法错误：onclick属性本身用双引号包裹，但内部配置项里url的属性值也使用了双引号，会直接截断HTML属性，点击时JS直接执行报错。
• 地址存在多余空格：引入Calendly的CSS、JS资源的链接，以及传入的预约页面地址前后都加了无意义的空格，会导致资源加载失败、预约地址识别错误。
• 脚本加载时序问题：引入Calendly脚本时加了async异步加载标记，如果用户在脚本还没加载完成时点击按钮，会直接报Calendly is not defined错误，无法触发弹窗。

修正后完整代码 #

.calendly-widget {
  background-color: black;
  color: white;
  padding: 10px;
  border-radius: 50px;
  margin-top: 30px;
  display: block;
  width: 150px;
  text-align: center;
  font-size: 18px;
  font-family: sans-serif;
  text-decoration: none;
}

<!-- Calendly link widget begin -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>
<a href="" class="calendly-widget" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/simpla-worfklows-hannahm/30min'});return false;">Book a call</a>

补充说明：如果必须保留脚本的async属性，可以给点击逻辑增加Calendly对象存在性判断，等脚本加载完成后再执行初始化，普通场景下直接移除async即可，不会对页面加载体验造成明显影响。

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