How to integrate appointment scheduling software like Calendly, TidyCal or Youcanbookme

This page shows you how to integrate appointment scheduling software with systeme.io.

What you'll need:

• A systeme.io account
• A sales funnel page
• A Calendly, TidyCal, or YouCanBook.me account

The following method works with Calendly, TidyCal, and YouCanBook.me.

We'll use Calendly as an example.

1. On your Calendly account: Generate and copy the embed code for your calendar/event.

2. On your systeme.io account:

Add the Raw HTML element to your page.

Paste the code provided by your calendar software into the 'Raw HTML' element you just added, then save the page.

Finally, when you preview your page, you will see the Calendly calendar.

How to integrate Calendly into a popup

Follow the previous steps, but add a Raw HTML element to the popup where you want your calendar to appear.

1. In your popup custom code

Add an id attribute to the div element provided by Calendly. You can use any value; however, make sure it's unique for the page.

2. On the main editor page

Go to Settings, click Edit footer code.

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

If you chose an id name other than calendly-container, make sure you replace it after pasting the code.

How to integrate TidyCal into a popup

Here is an example:

1. TidyCal provided an embed code similar to the one below:

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

2. First, add a Raw HTML element to your popup. Then, copy only the following line from your TidyCal code and paste it into the element: <div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div>  and paste it into your HTML element.

3. Then, go to the page settings and click 'Edit footer code'. You need to paste the rest of the code provided by TidyCal <script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script> and include the snippet below:

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