如何集成 Calendly、TidyCal 或 Youcanbookme 等预约安排软件

本页将教你如何在 systeme.io 上集成预约安排软件。

您需要：

一个 systeme.io 账户
一个销售漏斗页面
一个 Calendly，*TidyCal** 或 YouCanBook.me 账户

以下方法可用于 Calendly，TidyCal 和 YouCanBook.me

我们以 Calendly 为例。

在你的 Calendly 账户上

生成并复制你的预约安排的 HTML 代码



在您的 systeme.io 账户上：

在页面中添加 “**HTML 代码**” 元素



将日历软件提供的代码放在您添加的 HTML 代码上，然后保存代码和页面。



最后，当你预览页面时，会看到 Calendly 日历。



注意：此功能非常有用，因为它允许您将 Facebook 像素添加到您的预约日程安排中，而某些预约日程安排软件并不总能直接做到这一点。

如何将 Calendly 整合到弹出窗口中

按照前面的步骤操作，然后

在弹出窗口自定义代码中

为 Calendly 提供的 div 元素添加 id 属性。您可以使用任何值，但要确保该值在页面中是唯一的。



在主编辑器页面

进入 Settings 页面，单击`Edit footer code` ，然后粘贴如下代码

<script>
  document.addEventListener('open_popup', function() {
    Calendly.initInlineWidget({
      url: 'https://calendly.com/YOUR_CALENDLY_LINK',
      parentElement: document.getElementById('calendly-container')
    })
  })
</script>

如果您选择的 id 名称不是`calendly-container` ，请确保在粘贴代码后替换它。

如何将 TidyCal 集成到弹出式窗口中

为清楚起见，我们将用一个例子来说明：

TidyCal 提供了如下代码用于集成：

<div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div>
<script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script>

您需要做的第一件事是在弹出窗口中添加一个 HTML 元素，然后复制这一行

<div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div> 并粘贴到您的 HTML 元素中。



然后，进入页面设置，点击 “编辑页脚代码”。你需要粘贴 TidyCal 提供的其余代码

<script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script> 并添加以下代码段

<script>
  document.addEventListener('open_popup', function(){
    const embedTarget = document.querySelector('div.tidycal-embed')
    window.TidyCal?.init(embedTarget) 
  })
</script>

更新于： 22/05/2025