How to integrate appointment scheduling software like Calendly, TidyCal or Youcanbookme
This page shows you how to integrate appointment scheduling software with SystemeScale.
The method below works with Calendly, TidyCal, and YouCanBook.me. Calendly is used as the main example.
What you will need:
- A SystemeScale account
- A sales funnel page
- A Calendly, TidyCal, or YouCanBook.me account
Step 1: Generate your scheduling embed code
Start inside your appointment scheduling software account.
1
Open your scheduling tool
Log in to your Calendly, TidyCal, or YouCanBook.me account.
2
Generate the embed code
Generate and copy the embed code for the calendar or event you want to display on your SystemeScale page.
βΉοΈ
Calendly example
In this article, Calendly is used as the example, but the same page-embed method also works with TidyCal and YouCanBook.me.
Step 2: Add the scheduling calendar to a SystemeScale page
After copying the embed code from your scheduling software, add it to your SystemeScale sales funnel page using the Raw HTML element.
1
Open your funnel page
In your SystemeScale account, open the sales funnel page where you want the calendar to appear.
2
Add Raw HTML
Add the Raw HTML element to your page.
3
Paste the calendar code
Paste the code provided by your calendar software into the Raw HTML element you added.
4
Save the page
Save the page after pasting the embed code.
5
Preview the result
Preview your page. You should now see the embedded scheduling calendar.
β
Tracking benefit
This method is useful because it lets you add the Facebook Pixel to your booking page, which is not always possible directly inside some scheduling platforms.
π
Need to track booking-page activity?
Use the Facebook Pixel guide if you want to track booking-page visits, leads, or appointment actions from your SystemeScale funnel page.
How to integrate Calendly into a popup
To integrate Calendly into a popup, follow the same basic process, but add the Raw HTML element inside the popup where you want the calendar to appear.
In your popup custom code
1
Add Raw HTML to the popup
Open the popup and add a Raw HTML element where the Calendly calendar should appear.
2
Add a unique id to the Calendly div
Add an
id attribute to the div element provided by Calendly. You can use any value, but it must be unique for the page.π§©
Example id
A common id value is
calendly-container. If you choose a different id, use that same id in the footer code snippet.On the main editor page
3
Open footer code
Go to Settings, then click Edit footer code.
4
Add the Calendly initialization code
Paste the Calendly popup initialization code in the footer code area.
π»
Calendly footer code example
<script>document.addEventListener('open_popup', function() {Calendly.initInlineWidget({url: 'https://calendly.com/YOUR_CALENDLY_LINK',parentElement: document.getElementById('calendly-container')})})</script>β οΈ
Match the id value
If you choose an id name other than
calendly-container, replace calendly-container in the code after pasting it.How to integrate TidyCal into a popup
For TidyCal, split the embed code between the popup Raw HTML element and the page footer code.
Example TidyCal embed code
TidyCal may provide an embed code similar to this:
π»
TidyCal embed example
<div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div><script src="https://asset-tidycal.b-cdn.net/js/embed.js"></script>Add the TidyCal div to the popup
1
Add Raw HTML to the popup
Add a Raw HTML element to your popup.
2
Paste only the div line
Copy only this line from your TidyCal code and paste it into the Raw HTML element:
<div class="tidycal-embed" data-path="YOUR_DATA_PATH"></div>Add the remaining TidyCal code to the footer
3
Open footer code
Go to the page settings and click Edit footer code.
4
Paste the script and initialization snippet
Paste the rest of the code provided by TidyCal, then include the initialization snippet below.
π»
TidyCal footer code example
<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>Testing your scheduling integration
After adding your scheduling calendar to the page or popup, preview and test it before sending traffic to the page.
1
Preview the page
Open the page preview and confirm that the scheduling calendar loads correctly.
2
Test the popup if used
If the calendar is inside a popup, open the popup and confirm that the scheduler appears after the popup loads.
3
Submit a test booking
Run through a test booking to confirm that the scheduling tool, confirmation flow, and any tracking setup work correctly.
π
Using Google Calendar too?
Connect Google Calendar if your booking and calendar workflows need to stay synchronized with SystemeScale.
Was this article helpful?