To add a scheduling widget to your website, paste one script tag into your page and put a single div (or a button) where you want the calendar. The widget checks your connected calendar, shows times you're free in the visitor's time zone, and books the meeting without sending them anywhere else. The rest of this guide shows the exact code, the three formats (inline, popup, floating button), where to paste it on each website builder, and how to fix the problems people usually hit.
An embedded scheduling widget puts your booking calendar directly on your own page, so a visitor picks a time and confirms without leaving your site. Whether that books more meetings than a plain link depends on your page and your visitors — we don't have data that says one always wins — but it removes a redirect, and that is worth testing on the pages where people already intend to book. This guide walks through exactly how to add one, with the code you'll need, the limits of the widget, 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. Still choosing a tool? See the best embeddable scheduling widgets in 2026.
Try the widget on this page
This is the real SynqSlot widget, installed on this page with the same two lines shown below, pointed at a sample booking link. It runs in sample mode: the times are generated examples, and when you fill in the form you see the confirmation screen, but nothing is booked, no calendar event is created and no email is sent. Times show in your own time zone, and on a narrow screen the widget switches to a one-column layout.
Source on this page: <div data-synqslot="demo/30min">
Inline or popup: which one you want
There are two ways to place a widget. Which one fits depends on what the page is for.
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.
Where to find your embed code
In SynqSlot, open Settings → Embed on your site in the dashboard sidebar. The page shows the script tag once, then for every booking link a ready-made inline div, a popup link and a floating-button tag, each with a Copy button, plus a Preview link — so you don't have to type the slug yourself. (Menu path checked against the dashboard on October 24, 2026.)
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 tells the browser to fetch the script without blocking the rest of the page from rendering. The script itself is small, but the widget it injects is an iframe that loads a full booking page as soon as the script runs, so it does add weight and requests to your page. The iframe starts at 700px tall and then resizes to fit, which can move the content below it (layout shift). If performance on that page matters, measure before and after with Lighthouse rather than assuming.
You only need this tag once per page, no matter how many widgets you place on it.
Step 2: Place the widget
Inline calendar
Put a div wherever you want the calendar to appear, with a data-synqslot attribute naming the booking link, and a plain link inside it as the fallback. This is the complete copy-paste example, script included:
<script src="https://synqslot.com/embed.js" async></script>
<div data-synqslot="yourname/30min">
<a href="https://synqslot.com/yourname/30min">Book a time</a>
</div>The value is your booking URL without the domain — the same yourname/event-slug you'd see in your public link. The script replaces the link with the calendar; if the script is blocked or JavaScript is off, visitors see the link instead and it opens your booking page.
What we saw when testing this on a separate page (October 24, 2026, sample booking link): the frame grows as the visitor moves from picking a date to filling in their details, so the page — not the widget — does the scrolling. It does not shrink back after it has grown, so a shorter step can leave white space below it, and on narrow screens the list of times scrolls inside its own box. Required fields left empty are caught by the browser's own validation, which jumps to the first empty field.
Popup trigger
For a popup, put the attribute on the button or link itself and add data-mode="popup". The calendar opens in an overlay when the visitor clicks. Complete example:
<script src="https://synqslot.com/embed.js" async></script>
<a href="https://synqslot.com/yourname/30min" data-synqslot="yourname/30min" data-mode="popup">
Book a call
</a>Keep the real booking URL in href: if the script is blocked, the link still opens your booking page. A booking link uses data-synqslot="yourname/30min". A routing form — a few qualifying questions that send the visitor to the right person or meeting length — uses a different attribute with the form's slug: data-synqslot-form="discovery-call" (plus data-mode="popup" for the overlay).
Floating button
To keep a "Book a meeting" button in the corner of every page, add data-synqslot-float to the script tag itself. The text, colour and side are attributes on the same tag. This one tag is the complete install; if the script is blocked, no button appears, so keep an ordinary booking link somewhere on the page as well:
<script src="https://synqslot.com/embed.js" async
data-synqslot-float="yourname/30min"
data-text="Book a meeting" data-color="#4F46E5" data-position="right"></script>One floating button per page. It suits blogs and documentation, where a reader might decide to book from any page; on a dedicated booking page the inline calendar is the better choice.
The overlay closes with its × button or a click outside it. Escape also closes it while focus is on your page or the close button; once the visitor has clicked inside the calendar, keyboard focus is in the frame and Escape no longer reaches the overlay, so the × is the dependable way out.
Step 3: Put it in the right place
Placement is the decision that matters most. These are reasonable defaults, not rules — test them on your own pages.
One thing people get wrong: burying the widget below three screens of copy, where visitors have to hunt for it.
Platform-specific instructions
Webflow
Add the script tag in Site settings → Custom code → Footer code, so it loads site-wide. Then place a Code Embed element wherever you want the calendar and paste the div. Scripts show as a placeholder on the Designer canvas, so check Preview mode or the published site. Custom code needs a paid Site plan or a Core, Growth, Agency or Freelancer Workspace (Webflow's custom code docs). Full walkthrough with sizing: embed a booking calendar in Webflow.
WordPress
In the block editor, add a Custom HTML block and paste both the script tag and the div together. Which WordPress matters: on a self-hosted site the script is kept only for users allowed to post unfiltered HTML (typically Administrators), and on WordPress.com scripts are stripped unless the site is on a paid plan with plugins/hosting features enabled (WordPress.com's Custom HTML block). If you're using a page builder like Elementor, use its HTML widget. For a site-wide script, use a header-and-footer plugin rather than editing theme files, which get overwritten on update. Check the published page, not only the editor. Step by step, including Elementor and Divi: embed a booking calendar in WordPress.
Squarespace
Use a Code Block (set to HTML) for the div, and Code Injection → Footer for the script tag. Code blocks that run JavaScript and Code Injection need a Core, Plus or Advanced plan, and Squarespace may hide custom code while you're logged in, so check the page logged out (Squarespace code blocks). More detail: embed a booking calendar in Squarespace.
Wix, Notion and other URL-only builders
Not every builder treats code the same way, so these are not interchangeable. Wix's Embed HTML element runs your code inside its own frame (Wix embed docs), so the widget works but cannot grow the Wix element — set the element tall enough yourself (about 750px on desktop). Notion runs no scripts at all and accepts only a URL (Notion embeds): paste the widget's direct URL, https://synqslot.com/embed/yourname/30min, into an Embed block and drag it tall enough, as shown in embedding a booking calendar in Notion. A URL embed has no auto-resize, popup or floating button.
Plain HTML or React
For a static site, paste the script just before </body> and the div where the calendar should go, then open the page from a real web address (not a file on your computer) to test it. In React or Next.js, render the div as normal JSX and load the script with next/script or a useEffect — the script looks for widgets once, when it loads, so it must run after the div exists in the DOM or it'll have nothing to attach to.
What happens after someone books
With a real booking link (not the sample above), the whole booking happens inside the widget, in three steps: pick a time, enter details, confirmed. After the visitor confirms:
Test the whole path once with your own booking link before you announce it: open the live page in a private window, book a slot with an address you control, check both inboxes and your calendar, reschedule from the email, then cancel. Your booking link must stay active and your account must keep booking access (a trial or plan that has lapsed shows visitors an unavailable notice instead of times).
Passing information into the booking
Your page's query string is forwarded into the embedded booking flow. The booking form reads four parameters: name, email, company and jobTitle. So if someone lands on yoursite.com/contact?name=Jane&company=Acme, those fields arrive filled in and the invitee doesn't retype what you already know.
Two cautions. Other parameters, such as UTM tags, are passed along to the frame but are not stored on the booking, and the widget does not run your analytics tags inside its frame — so forwarding UTMs does not by itself attribute a booking in your analytics; use a redirect to your own thank-you page if you need that. And keep personal details out of public campaign links: anything in a URL can end up in browser history, server logs and analytics tools. Prefill from your own form's redirect, not from a link you post publicly.
Troubleshooting
The widget doesn't appear
Most often the script tag is missing, or it ran before the div 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. On builders that wrap custom HTML in their own frame (Wix, and some Framer setups), the auto-resize stops at that frame, so set its height by hand. White space below the widget after the visitor moves to a shorter step is expected: the frame grows but does not shrink back.
Scrolling feels stuck on mobile
The widget turns off scrolling on its own frame and grows to its full height, so the page scrolls normally. The one exception is the list of times, which scrolls inside its own box when there are many slots. A "stuck" scroll on a phone usually means the container around the widget has a fixed height with overflow: auto or scroll, which creates a second scroll area inside the page. Remove the fixed height (or use min-height) and the page scrolls as one.
It loads slowly or the page jumps
The calendar is a full booking page in an iframe, loaded as soon as the script runs. Load the script once per page (several widgets share it), keep async on it, and give the container a min-height of about 700px so the space is reserved before the calendar arrives. That stops the content below from jumping. If the calendar sits far down a long page, a popup button avoids loading it until someone asks for it.
Times show in the wrong time zone
The widget shows times in the visitor's time zone, detected from their browser, and labels it above the times. Visitors can change it from the time zone menu at the bottom of the calendar. If the hours themselves look wrong, check the time zone on your own availability in SynqSlot; your working hours are set in that zone and converted for each visitor.
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 you used the right attribute for what you're opening. A booking link uses data-synqslot="yourname/30min" (your username, a slash, then the booking link slug). A routing form uses data-synqslot-form="discovery-call" (the form's slug, no username). Putting a booking link slug in data-synqslot-form, or a form slug in data-synqslot, opens a "not found" page. Also confirm the script tag is on the page: without it, the link simply navigates to its href.
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. It is still an iframe, so it will not inherit your site's fonts or CSS; the colour and the removed mark are what you control.
The short version
Add one script tag, drop a div where you want the calendar, and pick inline, popup or floating button based on what the page is for. On most builders that takes a few minutes and no developer, as long as your plan allows custom code. The part worth thinking about is placement: put the calendar on the page where someone has already decided to book, then compare bookings before and after. Some things the widget does not do: it is an iframe, not a native component, so it won't inherit your CSS; it needs third-party iframes allowed; and if your site sets a Content-Security-Policy you must allow synqslot.com in script-src and frame-src.
Don't have a booking link yet? Start a 15-day trial, connect your calendar, and copy the code from Settings → Embed on your site. Every plan includes the widget, popup and floating button, with no per-seat charge for embedding.
Ready to try it? The embeddable scheduling widget page has a sample-mode demo, the snippet with a copy button, and step-by-step instructions for WordPress, Webflow, Squarespace, Wix, Shopify, Framer, Carrd, Notion and React. Comparing tools first? See the best embeddable scheduling widgets.
Related: set up your booking page in 5 minutes before you embed it, see how scheduling works in SynqSlot, or read how to schedule meetings without the back-and-forth.