How to embed TidyCal on your website

There are two main ways to embed TidyCal on your website:

Embed a specific Booking Type. This will display only the Booking Type you choose to embed.
Embed your entire Booking Page. This will show all public Booking Types on an embed unit.

1) Embed a specific Booking Type

Navigate to your dashboard and click on the "Embed on your website" link for the Booking Type you'd like to embed. You can only embed one Booking Type per page.

Click on the "Embed on your website" to embed a Booking Type.

The Booking Type embed code will look like this:

Copy the code and place it in the HTML of the active theme of your website. If you are unsure of how to do this, please contact your web platform's support team or your developer.

2) Embed your entire Booking Page

To embed your full Booking Page (that includes all public Booking Types), you just need to edit the embed code to remove the trailing slash from a Booking Type.

For example, this is the code to embed a 15-minute Booking Type:

<script src="https://asset-tidycal.b-cdn.net//js/embed.js"></script>
<div id="tidycal-embed" data-path="dkelly/15-minute-meeting"></div>

To embed the entire Booking page, you can remove the "/15-minute-meeting" like below:

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

When you embed your entire Booking Page, it will look like this:

An example of an entire Booking Page embedded.