Embed Widget
Embed ChronSync booking directly on your website using a simple code snippet.
Embed Widget
Instead of sending clients to a separate booking page, you can embed ChronSync directly on your website. The embed widget displays your booking calendar inline within any web page.
How It Works
The embed widget is a lightweight JavaScript snippet that loads the booking interface inside an iframe on your page. It handles:
- Displaying your available time slots
- Collecting client details
- Confirming the booking
All within your website, matching your site's layout.
Adding the Widget
- Go to the event type you want to embed
- Copy the embed code snippet
- Paste it into your website's HTML where you want the booking calendar to appear
The embed code looks like this:
<div id="chronsync-embed"></div>
<script
src="https://chronsync.com/embed.js"
data-username="your-username"
data-event="your-event-slug"
></script>Replace your-username and your-event-slug with your actual values.
Customization Options
The embed script accepts optional attributes to customize its appearance:
| Attribute | Default | Description |
|---|---|---|
data-username | (required) | Your ChronSync username |
data-event | (required) | The event type slug |
data-theme | auto | Color theme: light, dark, or auto (matches user preference) |
Supported Platforms
The embed widget works on any website that supports custom HTML:
- WordPress -- Add using a Custom HTML block
- Squarespace -- Use a Code Block in the page editor
- Webflow -- Add an Embed element in the designer
- Static sites -- Paste directly into your HTML
- React / Next.js -- Load the script dynamically in a
useEffecthook or use a ref-based approach
Responsive Behavior
The embed widget is responsive by default. It adapts to the width of its parent container. On narrow containers (mobile screens or sidebars), the calendar and time slots stack vertically.
Performance
The widget script is lightweight and loads asynchronously. It does not block your page rendering. The booking calendar content loads after your page is ready, so it has no impact on your site's initial load time.
Alternative: Link Instead of Embed
If embedding is not practical for your setup, you can always link directly to your booking page:
<a href="https://chronsync.com/book/your-username/your-event-slug">
Book a meeting
</a>This opens the full booking page in a new tab or the same window, depending on the link configuration.