Embed Zyncro on your website
Let visitors book you without leaving your site. Drop a widget into HTML, React, Next.js, Vue, or WordPress — auto-resize, theming, and security are built in.
On this page
1. Quick start
The fastest way: open the Embed Generator, pick your event and style, choose your framework, and copy the code. Or paste this HTML snippet anywhere on your site and replace the URL with your booking link:
<script src="https://zyncro.in/embed.js" async></script> <div data-zyncro-inline data-zyncro-url="zyncro.in/you/30min"></div>
That's it — no API keys, no build step. The widget loads your booking page in a sandboxed iframe and resizes itself automatically.
2. Embed types
Inline
Calendar sits directly inside a page section — always visible. Best for a dedicated “Book a call” page.
Popup
A link or button opens the booking in a centered modal. Best for a small CTA anywhere.
Floating
A button fixed to the bottom-right corner of every page. Best for always-available booking.
Popup (HTML)
<script src="https://zyncro.in/embed.js" async></script> <a data-zyncro-popup data-zyncro-url="zyncro.in/you/30min" data-zyncro-text="Book a call" href="#">Book a call</a>
Floating button (HTML)
<script src="https://zyncro.in/embed.js" data-zyncro-float data-zyncro-url="zyncro.in/you/30min" data-zyncro-text="Book a call" async></script>
3. Framework guides
The widget behaves identically everywhere — only the host wrapper differs. The Embed Generator outputs all of these for you. Inline examples below; popup and floating variants are available in the generator.
HTML / WordPress
Paste this where you want the booking to appear. The <script> only needs to load once per page.
<script src="https://zyncro.in/embed.js" async></script> <div data-zyncro-inline data-zyncro-url="zyncro.in/you/30min"></div>
React
Save as a component (e.g. ZyncroBooking.jsx) and render it where you want the booking. It loads the SDK itself — once per page.
import { useEffect } from "react";
export default function ZyncroBooking() {
useEffect(() => {
if (document.querySelector('script[src="https://zyncro.in/embed.js"]')) return;
const s = document.createElement("script");
s.src = "https://zyncro.in/embed.js";
s.async = true;
document.body.appendChild(s);
}, []);
return <div data-zyncro-inline="" data-zyncro-url="zyncro.in/you/30min" />;
}Next.js
Drop this component anywhere in your App Router or Pages app. next/script loads the SDK once. (Inline/Popup work in any component; Floating needs a Client Component — note the "use client".)
import Script from "next/script";
export default function ZyncroBooking() {
return (
<>
<div data-zyncro-inline="" data-zyncro-url="zyncro.in/you/30min" />
<Script src="https://zyncro.in/embed.js" strategy="afterInteractive" />
</>
);
}Vue
Save as a .vue single-file component and use it where you want the booking.
<script setup>
import { onMounted } from "vue";
onMounted(() => {
if (!document.querySelector('script[src="https://zyncro.in/embed.js"]')) {
const s = document.createElement("script");
s.src = "https://zyncro.in/embed.js";
s.async = true;
document.body.appendChild(s);
}
});
</script>
<template>
<div data-zyncro-inline data-zyncro-url="zyncro.in/you/30min"></div>
</template>4. Customization
Tune the widget with a few optional attributes:
| Attribute | What it does |
|---|---|
| data-zyncro-theme | Force light or dark to match your site. Defaults to light. |
| data-zyncro-color | Brand colour (hex, e.g. #16a34a) for buttons and accents. |
| data-zyncro-text | Label for the popup / floating button. |
| data-zyncro-name | Pre-fill the guest's name in the booking form. |
| data-zyncro-email | Pre-fill the guest's email. |
Example — a dark, green-accented inline embed:
<script src="https://zyncro.in/embed.js" async></script> <div data-zyncro-inline data-zyncro-url="zyncro.in/you/30min" data-zyncro-theme="dark" data-zyncro-color="#16a34a"></div>
5. Sizing & responsiveness
Width
The widget fills 100% of its container. Put it in any column or section and it adapts — including mobile.
Height (automatic)
The iframe measures its own content and reports height to the page, so it grows and shrinks as the visitor navigates. You never set a fixed height — no double scrollbars.
Under the hood it uses a postMessage resize signal (clamped 320–3000px) with a ResizeObserver — the same approach Calendly and Cal.com use.
6. Events & callbacks
When a visitor completes a booking, the widget posts a zyncro:booking-confirmed message to your page. Listen for it to fire analytics, show a thank-you, or redirect:
<script>
window.addEventListener("message", function (e) {
if (e.origin !== "https://zyncro.in") return; // trust only Zyncro
if (e.data === "zyncro:booking-confirmed" ||
(e.data && e.data.type === "zyncro:booking-confirmed")) {
// e.g. gtag("event", "booking_confirmed");
console.log("Booking confirmed!");
}
});
</script>Always check e.origin before trusting a message.
7. Security & privacy
- Sandboxed iframe: the booking runs in its own frame — it can't read or touch your page's DOM, cookies, or storage.
- Same-origin enforced: the SDK only ever frames Zyncro's own origin. A tampered URL can never point the widget at another site.
- No extra tracking: analytics, cookie banners, and tag managers are disabled inside the embed — zero added load or trackers on your site.
- Verified messages: resize and booking events are origin-checked on both sides.
8. Troubleshooting
Widget doesn't appear
Check the <script> actually loaded and your booking URL is correct (it must be a public, active event). On React/Vue, make sure the component mounted.
Two widgets / it loads twice
The SDK self-guards against double-loading. Make sure you only include one booking element per spot — the script tag can appear once or many times safely.
Old version showing after an update
Hard-refresh or clear your site's CDN cache. The SDK is cached for performance.
Still stuck? Reach us from your dashboard via the “Need help?” button.
Ready to embed?
Generate your copy-paste code in seconds.