An embedded scheduling widget puts your booking calendar directly on your own page, so a visitor picks a time and confirms without ever leaving your site. That matters more than it sounds: every redirect to an external booking page is a moment where someone gets distracted, loses trust, or simply doesn't come back. This guide walks through exactly how to add one, with the code you'll need and the mistakes worth avoiding.
If you'd rather see it than read about it, SynqSlot's embeddable scheduling widget page has the widget running live, plus copy-paste instructions for ten website builders.
Inline or popup: which one you want
There are two ways to place a widget, and picking the wrong one costs you bookings.
An inline embed renders the calendar directly in the page, as part of your layout. Use it where someone has already decided to talk to you — a contact page, a dedicated "Book a call" page, the bottom of a service page. The calendar is visible immediately, which removes a click.
A popup opens the booking flow in an overlay when someone clicks a button or link. Use it where the calendar would be a distraction from the main message — a pricing page, a landing page, a navigation bar. The page stays focused, and the calendar appears only for people who want it.
Step 1: Add the script
Every SynqSlot embed needs one script tag. Add it once, anywhere on the page — most people put it just before the closing body tag, or in their site's global "footer code" setting so it loads everywhere.
<script src="https://synqslot.com/embed.js" async></script>The async attribute matters. It tells the browser to fetch the script without blocking the rest of the page from rendering, so the embed can't slow down your page load or hurt your Core Web Vitals.
You only need this tag once per page, no matter how many widgets you place on it.
Step 2: Place the widget
Inline calendar
Drop an empty div wherever you want the calendar to appear, with a data-synqslot attribute naming the booking link you want people to book:
<div data-synqslot="yourname/30min"></div>The value is your booking URL without the domain — the same yourname/event-slug you'd see in your public link. The script finds the div, injects the calendar, and resizes it automatically as the visitor moves between picking a date and filling in their details, so you never end up with a scrollbar inside your page or a big gap underneath.
Popup trigger
For a popup, put the attribute on the button or link itself and add data-mode="popup":
<a href="#" data-synqslot-form="discovery-call" data-mode="popup">
Book a call
</a>Popups are wired to routing forms rather than a single booking link, which is what makes them useful on a pricing page: you can ask one or two qualifying questions and send the visitor to the right calendar — the right team member, the right meeting length — instead of guessing.
The overlay closes on Escape or a click outside it, so it behaves the way people expect a modal to behave.
Step 3: Put it in the right place
Placement changes conversion more than styling does.
One thing people get wrong: burying the widget below three screens of copy. If someone has to hunt for it, most won't.
Platform-specific instructions
Webflow
Add the script tag in Project Settings → Custom Code → Footer Code, so it loads site-wide. Then place an Embed element (in the Add panel, under Components) wherever you want the calendar and paste the div. Publish — custom code doesn't run in the Designer preview, only on the published site, which trips people up constantly.
WordPress
In the block editor, add a Custom HTML block and paste both the script tag and the div together. If you're using a page builder like Elementor, use its HTML widget. For a site-wide script, most themes have a "footer scripts" field, or you can use a header-and-footer plugin rather than editing theme files, which get overwritten on update.
Squarespace
Use a Code Block for the div, and Settings → Advanced → Code Injection → Footer for the script tag. Note that Code Blocks are disabled on Squarespace's Personal plan — you'll need Business or higher.
Plain HTML or React
For a static site, paste both tags directly. In React or Next.js, render the div as normal JSX and load the script with next/script or a useEffect — just make sure the script runs after the div exists in the DOM, or it'll have nothing to attach to.
Passing information into the booking
Anything in your page's query string is forwarded into the embedded booking flow. So if someone lands on yoursite.com/contact?email=jane@acme.com&company=Acme, those values prefill the booking form and the invitee doesn't retype what you already know.
This is worth wiring up if you're sending traffic from an email campaign or an ad — every field you prefill is one less reason to abandon the form. UTM parameters come through the same way, so your analytics still attribute the booking correctly.
Troubleshooting
The widget doesn't appear
Nine times out of ten the script tag is missing, or it's placed before the div in a way that means it ran before the element existed. Check your browser's developer console for a 404 on embed.js. Also confirm the booking link is active — a deactivated booking link has no public page to embed.
It appears but the height is wrong
The widget sizes itself by messaging the parent page. If your CSS forces a fixed height on the container, or the container has overflow: hidden, that fights the auto-resize. Let the container size itself.
It works locally but not on the live site
Usually a Content Security Policy. If your site sets a CSP header, it needs to allow synqslot.com in script-src and frame-src. Your browser console will say so explicitly if this is the problem.
The popup doesn't open
Check that data-mode="popup" is present and that the value of data-synqslot-form matches a routing form slug, not a booking link slug. The two attributes look similar and are easy to mix up.
Make it look like your site
A widget that obviously belongs to another company undermines the page it's on. Set your booking link's colour to match your brand, and turn on the option to remove the SynqSlot mark — it's included on every plan, not held back for an enterprise tier. Done properly, most visitors won't register that the calendar is a third-party embed at all.
The short version
Add one script tag, drop a div where you want the calendar, and pick inline or popup based on what the page is for. That's the whole job — it takes about five minutes and doesn't need a developer. The part worth thinking about is placement: a calendar on the page where someone decided to book will out-convert a link to a booking page every time.
Ready to try it? The embeddable scheduling widget page has a live demo, the snippet with a copy button, and step-by-step instructions for WordPress, Webflow, Squarespace, Wix, Shopify, Framer, Carrd, Notion and React.