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

This page will teach you how to integrate appointment scheduling software on systeme.io.

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

2. On your systeme.io account :

Add the "HTML Code" element to your page

Put the code provided by your calendar software on the HTML code that you had added, then save the code and your page.

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

Note: this feature is very useful because it allows you to add the Facebook pixel to your appointment scheduling, which is not always possible directly with some appointment scheduling software.

How to integrate Calendly into a popup

Follow all the previous steps and after that

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 the Settings page, click Edit footer code , and paste the code like this

<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

For clarity, we will illustrate it with an example :

1. A code like the one below was provided by TidyCal for integration :

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

2. The first thing you need to do is add an HTML element to the popup where you want to add your calendar, then copy this line <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> as well as adding the below snippet

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