Embed on your website
Add the ChronSync embed widget to your own site to show your booking page in a popup or inline, with optional name and email prefill.
Put your booking page directly on your own website so people can book without leaving your site. The ChronSync embed widget loads a small script and shows your booking page inside an iframe — either as a popup that opens from a button, or inline within the page.
Before you start
- Have at least one Active event type. See Create an event type.
- Know your ChronSync username and the event slug you want to embed. These come from your booking link:
chronsync.com/<your-username>/<event>. - Be able to add HTML to your website (a page template, a section block, or a custom-HTML element).
How the widget works
When you add the widget script to a page, it attaches window.ChronSync to the page. You then call ChronSync.init() once to configure it, and ChronSync.open() to show your booking page. The widget renders your booking page in an iframe and supports two modes:
- popup — opens your booking page in an overlay, typically from a button.
- inline — renders your booking page inside a container element you place on the page.
You can also prefill the booker's name and email so they don't have to type them.
The snippets below are illustrative. Replace username and the event slug with your own values, and load the script from https://chronsync.com/api/embed/widget.js.
Embed inline
Inline mode renders your booking page in a container that sits on the page. Add a container element, then point the widget at it.
Add a container where the booking page should appear:
<div id="chronsync-booking"></div>Load the widget script and initialize it in inline mode, pointing container at your element:
<script src="https://chronsync.com/api/embed/widget.js"></script>
<script>
ChronSync.init({
url: 'https://chronsync.com',
username: 'your-username',
eventSlug: 'your-event',
mode: 'inline',
container: '#chronsync-booking',
});
ChronSync.open();
</script>The booking page renders inside #chronsync-booking as soon as the page loads.
Embed as a popup
Popup mode opens your booking page in an overlay — a good fit for a "Book a call" button. Initialize in popup mode and call ChronSync.open() when the button is clicked:
<button id="book-btn">Book a call</button>
<script src="https://chronsync.com/api/embed/widget.js"></script>
<script>
ChronSync.init({
url: 'https://chronsync.com',
username: 'your-username',
eventSlug: 'your-event',
mode: 'popup',
});
document.getElementById('book-btn').addEventListener('click', function () {
ChronSync.open();
});
</script>Prefill the booker's name and email
If you already know who's booking — say, a signed-in customer — pass a prefill object so their name and email are filled in for them:
<script>
ChronSync.init({
url: 'https://chronsync.com',
username: 'your-username',
eventSlug: 'your-event',
mode: 'popup',
prefill: {
name: 'Jane Doe',
email: '[email protected]',
},
});
</script>The booker can still change these values before they confirm.
Want more — custom theming, booking callbacks, or managing bookings from your own UI? Developers can find the full embed and API reference under the ChronSync API.