If you have a customer-facing website, you can embed a TimeZest scheduling page directly on it using an iFrame. This lets clients book appointments without leaving your site — no redirect required.
Note: This article is intended as a general guide. Implementing an iFrame requires editing your website's HTML. If you're unsure how to do that, please reach out to your web administrator or the person who manages your website.
Before You Begin
Make sure your appointment type is already configured to allow scheduling via Shareable URLs. If you haven't done that yet, follow the steps in Shareable URLs first, then come back here.
Step 1 — Copy Your Shareable URL
In TimeZest, go to Appointment Types.
Select the resource or team for the appointment type you want to embed.
Copy the Shareable URL that appears beneath the appointment type name.
Your URL will look something like this:
https://yourmsp.timezest.com/member-slug/appointment-type
Step 2 — Add the iFrame to Your Website
In your website's HTML, paste the following snippet where you want the scheduling page to appear:
html
<iframe src="YOUR_SHAREABLE_URL_HERE" width="100%" height="700" frameborder="0" style="border: none;"> </iframe>
Replace YOUR_SHAREABLE_URL_HERE with the URL you copied in Step 1.
Customizing the iFrame
Attribute | What It Controls | Suggested Value |
| Horizontal size |
|
| Vertical size |
|
| Border around the frame |
|
A note before you publish: Every website is built differently, and themes, page templates, and content blocks can all affect how an embedded iFrame renders. If the scheduling page isn't appearing or sizing the way you expect, reach out to your website designer or administrator to adjust the surrounding page so the iFrame displays correctly.
Tips
Test on mobile. Set
width="100%"to ensure the scheduler scales correctly on smaller screens.Check your container width. If the iFrame sits inside a narrow column, the scheduling page may feel cramped. A minimum container width of 600px is recommended.
Use a staging page first. Before publishing, verify the scheduler loads and completes a booking end-to-end in the embedded view.
Preview and test the sizing through the entire scheduling flow. Don't judge the height from the first screen alone. Walk through every step a client would see: date, time, contact details, confirmation, and confirm each fits inside the frame. Later steps are often taller, and a short frame forces visitors to scroll to find the button they need. Increase
heightuntil every step displays cleanly.
Frequently Asked Questions
Can any appointment type be embedded this way?
Only appointment types with Shareable URLs enabled can be embedded. You configure this in Appointment Types > Additional Settings in TimeZest.
Will TimeZest still create a ticket or activity when someone books through the iFrame?
Yes. The embedded experience works the same as the standalone Shareable URL — TimeZest will create the ticket or activity according to your appointment type configuration.
What happens if a visitor's email address isn't in my PSA?
TimeZest will handle new contacts based on the New Contact Handling setting on your appointment type. See Shareable URLs for the available options.
Why is my iFrame showing a scrollbar, or why isn't the full form displaying?
This is caused by the iFrame's height being too small for the content. Increase the height value in your iFrame code until the full form is visible — including during time slot selection, the contact details step, and the final confirmation screen. Each of those steps may render at a slightly different height, so test through the entire booking flow before settling on a value.
Why does the iFrame look too narrow or cut off on the sides?
The iFrame is styled to render at the full width of its parent container. If it looks too narrow, the fix is to widen the container element on your page that wraps the iFrame — not the iFrame itself. Once the container is wide enough, the scheduler will expand to fill it.