You have two options: embed the full calendar as an iframe, or add a floating button that opens the scheduler as a popup.
Open the embed options
Go to Settings > Schedulers.
Click the three dots next to the scheduler you want to embed and choose Embed scheduler.
You will see two tabs: Embed and Widget.
Note: embedding only works for schedulers set to Public. If your scheduler is not public, the code will not be available. You can change this via the three dots > Edit.
Option A: Embed (iframe)
This displays the full booking calendar directly on your page. Visitors see the calendar without being sent anywhere else.
You can configure the following:
Background color — Choose a color that matches your branding using the color picker or enter a hex code.
Auto-resize — When enabled, the iframe height adjusts automatically to fit the content. The embed code updates accordingly.
Copy the Embed code at the bottom and paste it into the HTML of your website where you want the calendar to appear.
Option B: Widget (floating button)
This adds a floating button to your website. Clicking it opens your booking calendar as a popup. Useful when you do not want the calendar visible at all times, but always within reach.
You can configure the following:
Position — Bottom-right or bottom-left of the page.
Button label — The text on the button, for example Book a call.
Button color — Enter a hex code or use the color picker.
Size — Small, Medium, or Large.
Copy the Widget code and paste it into the HTML of your website. Your web developer can help if you do not work in code yourself.
Tip: preview before you copy
On the right side of the screen you can see a live preview of your scheduler. Switch between desktop and mobile view using the icons at the top right. This way you know exactly what visitors will see before you copy the code.
Frequently asked questions
My scheduler is not public. Can I still embed it?
No, embedding only works for public schedulers. Go to the three dots next to your scheduler and choose Edit to update the visibility.
How do I make sure the calendar always shows my current availability?
Make sure your calendar is connected via Connect your calendar on the Schedulers page. TracklerPro will then sync automatically with Google or Microsoft.
Where do I set the appointment duration and availability?
You do this in the scheduler itself via the three dots > Edit.
🔗 Back to: Schedulers in Trackler