How to embed TidyCal on your website

Embed a TidyCal booking type or your whole booking page on your website: open Booking types → three-dot menu → Embed on website and paste the code. All plans.

Embedding Options

TidyCal offers three ways to share your booking page:

Plan availability: Embedding is available on all plans (Free, Individual, Agency, and Pro). To share a plain link instead of embedding, see How do I share my TidyCal booking link?

Embed a Specific Booking Type

To embed a single booking type on your website:

1. Go to Booking types in the sidebar
2. Find the booking type you want to embed
3. Click the menu icon (three dots) on the booking type card
4. Select "Embed on website"
5. Copy the embed code from the drawer that opens
6. Paste the code into the HTML of your website

The embed code looks like this:

<div class="tidycal-embed" data-path="yourusername/booking-type-slug"></div>
<script src="https://asset-tidycal.b-cdn.net/js/embed.js" async></script>

Note: Replace yourusername/booking-type-slug  with your actual username and booking type URL slug. Older snippets that load tidycal.com/js/embed.js keep working.

Embed Your Entire Booking Page

To embed your full booking page showing all public booking types, modify the embed code to remove the booking type slug:

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

This displays all your public (non-private) booking types in a single embedded view, allowing visitors to choose the booking type that fits their needs.

Customization Options

You can customize the embed using optional data-  attributes on the embed div:

Example with pre-filled fields:

<div class="tidycal-embed" data-path="yourusername/consultation" data-name="John Doe" data-email="john@example.com"></div>
<script src="https://asset-tidycal.b-cdn.net/js/embed.js" async></script>

Pre-filling is useful when you already know the visitor's identity (e.g., in a members-only area or from a CRM link). data-name and data-email work on single booking type and date poll embeds, not on the full booking page embed, and the booker can still edit the values.

Embed in Email

TidyCal can also create a list of your available times to paste into an email. Each time is a link: recipients click one to open your booking page with that time selected, then finish booking there.

1. Go to Booking types
2. Click the menu icon (three dots) on the booking type
3. Select "Embed in email"
4. Select a day, then select one or more times
5. Click the Click to copy the email schedule button
6. Paste it into the body of your email

Limitation: Embed in email is not offered for Packages & Recurring booking types.

Email Signature Link

Add a booking link to your email signature:

1. Go to Booking types
2. Click the menu icon (three dots) on the booking type
3. Select "Email signature"
4. Copy the generated HTML snippet
5. Paste it into your email client's signature settings

Technical Details

• The embed loads as an iframe that auto-resizes to fit the booking page content
• Default minimum height is 500px, default height is 700px
• Embeds are fully responsive and adapt to mobile screen sizes
• You can embed multiple booking types on the same page - each gets a unique embed instance
• The embed script loads asynchronously and will not block your page rendering
• Themes applied to your booking page also apply to embedded views (see How to use the Booking Theme Editor)
• Payment support — Embedded booking pages support full payment processing, including Apple Pay, Google Pay, and Stripe Link (wallet payments)

Track Completed Bookings on Your Website

The embedded booking page runs in its own frame, so tags on your own page cannot see what happens inside it. When someone books through an embed, TidyCal sends a bookingComplete message to your page. Listen for it to fire your own conversion tags, for example a Google Ads conversion through Google Tag Manager:

<script>
window.addEventListener('message', function (e) {
  if (e.origin !== 'https://tidycal.com' || !e.data || e.data.event !== 'bookingComplete') return;
  var booking = e.data.data.booking;
  // booking.id, booking.starts_at, booking.ends_at, booking.timezone, booking.booking_type_id
});
</script>

The message is sent when the booker submits the booking and includes the booking ID, start and end time, time zone and booking type ID. It is not sent when someone opens your booking page directly rather than through the embed. For Google Analytics (GA4) events that TidyCal sends for you, see Google Analytics (GA4) & Google Tag Manager (GTM).

Troubleshooting

Embed not loading on my website

• Verify the data-path  matches your actual TidyCal username and booking type slug
• Ensure the embed <script>  tag is included on the page (only needs to appear once even with multiple embeds)
• Check your website's Content Security Policy (CSP): allow scripts from asset-tidycal.b-cdn.net and frames from tidycal.com
• Try opening the booking type URL directly (e.g., tidycal.com/yourusername/booking-type ) to confirm it works

Embed is too short or shows scrollbar

• The embed auto-resizes based on content, but some website builders may restrict iframe height
• Ensure the embed container does not have a fixed CSS height set
• If using a page builder (WordPress, Wix, Squarespace), use an HTML/Custom Code block to paste the embed code

Only one embed works on my page

• Multiple embeds are supported, including the same booking type twice. Give each one its own <div class="tidycal-embed">
• The <script>  tag only needs to appear once on the page

Frequently Asked Questions

How do I embed TidyCal in WordPress?

In the WordPress editor, add a Custom HTML block (or use the "Code Editor" view) and paste the embed code. If using a page builder like Elementor or Divi, use their HTML/Code widget.

Is there a popup/modal embed option?

TidyCal embeds display inline on your page. There is no built-in popup or modal option. If you need a popup effect, you can place the embed code inside a modal component from your website framework (e.g., a Bootstrap modal or a page builder popup element).

Can I embed a Website Builder page?

Yes. If your booking page is set to Website (see Website Builder), the full booking page embed (data-path="yourusername") shows your Website Builder page instead of the Classic list. Single booking type embeds are unchanged.

Can I embed Date Polls?

Yes. On the Polls page (in the TidyCal logo menu), open the poll's More options menu, choose Embed (available while the poll is open) and click Copy code. See Date Polls.

Can I pre-fill the booking form with a link?

Yes, for name and email. Add ?name= and ?email= to a booking type link, for example https://tidycal.com/yourusername/consultation?name=John%20Doe&email=john@example.com. On an embed, use data-name and data-email instead. Pre-filling works on booking type and date poll links, not on your full booking page, and bookers can still edit the values. Answers to custom questions cannot be pre-filled, and UTM parameters are not shown on your bookings.

Related Articles

• How to Create and Manage Booking Types in TidyCal
• How do I share my TidyCal booking link?
• How to use the Booking Theme Editor