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

Already use Calendly, TidyCal or YouCanBook.me for your sleep assessment calls? You can show this calendar on your SleepPRO™ pages. This example uses Calendly.

You will need a funnel page and an account with one of these tools.

1. In Calendly, create and copy the embed code for your event.
2. In SleepPRO™, add a Raw HTML element to your page.
3. Paste the embed code into the element and save the page.

Preview the page and your calendar shows.

Prefer the built-in booking calendar? See How to use the booking calendar feature on SleepPRO™.

Calendly in a popup

1. Add a Raw HTML element inside the popup and paste the Calendly code.
2. In this code, add an id to the div from Calendly, such as calendly-container. Any name works, as long as no other element on the page uses it.
3. In the page editor, go to Settings and click Edit footer code. Paste this, with your own Calendly link:

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

If you chose a different id, replace calendly-container with it.

TidyCal in a popup

TidyCal gives you code like this:

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

1. Add a Raw HTML element to your popup and paste only the first line, the div.
2. In the page settings, click Edit footer code. Paste the second line, the script, followed by:

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