How to embed TidyCal on your website
Embed your TidyCal booking page or a specific booking type directly on your website using a simple HTML code snippet. Embedding is available on all plans.
Embedding Options
TidyCal offers three ways to share your booking page:
| Method | What It Shows | Best For |
|---|---|---|
| Website Embed (single booking type) | One specific booking type inline on your page | Landing pages, service pages |
| Website Embed (full booking page) | All your public booking types | Portfolio sites, booking directory pages |
| Email Embed | Interactive time slot picker in emails | Email campaigns, newsletters |
Plan availability: Embedding is available on all plans (Free, Individual, and Agency).
Embed a Specific Booking Type
To embed a single booking type on your website:
- Go to Booking types in the sidebar
- Find the booking type you want to embed
- Click the menu icon (three dots) on the booking type card
- Select "Embed on website"
- Copy the embed code from the drawer that opens
- 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://tidycal.com/js/embed.js" async></script>
Note: Replace yourusername/booking-type-slug with your actual username and booking type URL slug.
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://tidycal.com/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:
| Attribute | Purpose | Example |
|---|---|---|
data-path |
Your booking page or type path (required) | "jsmith/30-min-call" |
data-showavatar |
Display your profile avatar | "true" |
data-name |
Pre-fill the booker's name field | "John Doe" |
data-email |
Pre-fill the booker's email field | "john@example.com" |
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://tidycal.com/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).
Embed in Email
TidyCal also supports embedding an interactive time slot picker directly in emails. This lets recipients select a time without leaving their inbox.
- Go to Booking types
- Click the menu icon (three dots) on the booking type
- Select "Embed in email"
- Copy the generated HTML code
- Paste it into your email template or campaign
Limitation: Email embeds are not available for recurring booking types. Only standard, one-time booking types support email embedding.
Email Signature Link
Add a booking link to your email signature:
- Go to Booking types
- Click the menu icon (three dots) on the booking type
- Select "Email signature"
- Copy the generated HTML snippet
- 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
Troubleshooting
Embed not loading on my website
- Verify the
data-pathmatches 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) allows loading 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. Make sure each embed
<div>has a uniquedata-path - The
<script>tag only needs to appear once on the page
Frequently Asked Questions
Is embedding available on the Free Plan?
Yes. Website embedding, email embedding, and email signature links are available on all plans, including the Free Plan.
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).
Will my booking page theme apply to the embed?
Yes. Themes configured in Settings → Themes apply to both your standalone booking page and embedded views.
Can I embed a Website Builder page?
Yes. If you have enabled the Website Builder, the embed code will display your Website Builder landing page instead of the Classic view. The embed code stays the same — it automatically uses whichever page type you have active.
Can I embed Date Polls?
Yes. Date Polls are a type of booking type, so they use the same embed code pattern. Copy the embed code from the poll's share options and paste it into your website.