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

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

您需要：

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

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

我们以 Calendly 为例。

1. 在你的 Calendly 账户上

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

2. 在您的 systeme.io 账户上：

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

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

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

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

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

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

1. 在弹出窗口自定义代码中

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

2. 在主编辑器页面

进入 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 集成到弹出式窗口中

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

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

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

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

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

3. 然后，进入页面设置，点击 “编辑页脚代码”。你需要粘贴 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>