适配Google预约嵌入代码，用自定义HTML按钮替代默认按钮

核心思路 #

隐藏Google自动生成的默认按钮，使用完全自定义样式的按钮，通过代码触发Google预约弹窗，既保留官方弹窗功能，又实现样式自由定制。

步骤1：修改Google嵌入代码，隐藏默认按钮 #

保留官方脚本和样式，但在加载完成后隐藏自动生成的按钮，并保存按钮实例以便后续调用：

<!-- Google Calendar Appointment Scheduling begin -->
<link href="https://calendar.google.com/calendar/scheduling-button-script.css" rel="stylesheet">
<script src="https://calendar.google.com/calendar/scheduling-button-script.js" async></script>
<script>
let googleScheduleBtnInstance;
(function() {
  const target = document.currentScript;
  window.addEventListener('load', () => {
    googleScheduleBtnInstance = calendar.schedulingButton.load({
      url: 'https://calendar.google.com/calendar/appointments/schedules/AcZssZ3NyjuNO6hzeazbQfHqzDb0iI1_MSX1qu4Nqq6y7NJmpUIqmE8NeI6mM6rW0GX_Qplfis6v4aIN?gv=true',
      color: '#039BE5',
      label: 'Book an appointment',
      target,
    });
    // 隐藏默认按钮
    googleScheduleBtnInstance.button.style.display = 'none';
  });
})();
</script>
<!-- end Google Calendar Appointment Scheduling -->

步骤2：添加自定义样式按钮 #

编写完全符合页面风格的HTML按钮，自定义圆角、字号、字间距等样式：

<button id="customBookBtn" style="
  padding: 14px 28px;
  background: #039BE5;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 18px;
  letter-spacing: 0.6px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s ease;
">
  预约咨询
</button>

步骤3：绑定点击事件触发弹窗 #

给自定义按钮添加点击事件，调用Google官方的弹窗打开方法：

<script>
document.getElementById('customBookBtn').addEventListener('click', () => {
  if (googleScheduleBtnInstance) {
    // 调用官方方法打开预约弹窗
    googleScheduleBtnInstance.open();
  }
});
</script>

备选方案：模拟默认按钮点击 #

如果open()方法无法调用，可通过DOM选择器找到默认按钮并模拟点击：

<script>
document.getElementById('customBookBtn').addEventListener('click', () => {
  const googleDefaultBtn = document.querySelector('[data-calendar-scheduling-button]');
  googleDefaultBtn?.click();
});
</script>

关键注意点 #

• 确保Google脚本加载完成后再执行自定义按钮的绑定逻辑，避免实例未定义的错误。
• 自定义样式可根据页面需求任意调整，不受官方样式限制。
• 确认你的页面域名已添加到Google预约调度的允许嵌入域名列表中，避免跨域问题。

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