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.

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

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>