Embed Widget
Add a booking widget to your website so clients can schedule appointments without leaving your site.
Last reviewed
Getting the Embed Code
Allow your website, then copy the embed code.
- Navigate to Calendar > Booking Link in the sidebar
- Select the Embed tab
- In the Allowed Domains section, choose Edit, then Add website address
- Enter the address of each website you want to embed on, for example https://www.example.com, and choose Save
- Choose your preferred embed mode (Inline, Popup, or Badge)
- Copy the generated code snippet
- Paste the code into your website's HTML
Embed Modes
Choose how the booking widget appears on your website.
Inline
The booking form is embedded directly into your page content. It appears as part of the page and automatically adjusts its height to fit the content. Best for dedicated booking pages on your website.
Popup
A button on your page that opens the booking form in an overlay modal when clicked. The modal covers the page content and includes a close button. Best for adding booking to existing pages without changing the layout.
Badge
A floating button that appears in the corner of every page on your website. Clicking it opens the booking form in a popup. Best for making booking available from any page on your site.
Implementation Notes
Important technical details for website integration.
- The embed script loads asynchronously and does not block your page
- The booking form is displayed inside an iframe for security isolation
- Your brand colours and logo are automatically applied to the embedded form
- Inline embeds resize automatically to match the booking form content; the popup and badge modes open at a fixed size
- When a booking completes, the widget calls window.onTheWillBookingComplete and fires a thewill:booking-complete event on your page, so you can trigger your own analytics or a thank-you message
Add your website address first
For security, the booking page will only load inside another website when that website's address has been added to the allowed domains for your booking link. Until then the embed stays blank on your site, even though the code snippet is correct. Add your addresses in the Allowed Domains section at the top of the Embed tab, as described above.
Security Note
If your website uses a Content Security Policy (CSP), you may need to add Orchard72 to your frame-src directive to allow the embedded booking form to load.
Related Topics
Can’t find what you’re looking for?
Our support team is here to help. Contact us and we’ll get back to you as soon as possible.
Contact Support