Embeddable scheduling widget for your website

Add the scheduling widget to WordPress

1. 1Open the page or post in the block editor and click the + button where you want the calendar.
2. 2Search for the Custom HTML block and add it.
3. 3Paste both lines below into the block.
4. 4Click Update (or Publish) and check the published page, not only the editor.

<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>

Self-hosted WordPress keeps the script only for users allowed to post unfiltered HTML (typically Administrators). WordPress.com strips scripts from the Custom HTML block unless the site is on a paid plan with plugins/hosting features enabled. Using Elementor or another page builder? Use its HTML widget. Adding the widget to many pages? Put the script line in a header-and-footer plugin and just the div on each page.

Add the scheduling widget to Webflow

1. 1In Site settings → Custom code, paste the script line into Footer code and save.
2. 2Open the page in the Designer and add a Code Embed element where the calendar should go.
3. 3Paste the div into the Code Embed element and save.
4. 4Publish the site. Scripts show as a placeholder on the Designer canvas; check Preview mode or the published site.

<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>

Custom code needs a paid Webflow Site plan or a Core, Growth, Agency or Freelancer Workspace. Skipping Footer code? Paste both lines into the single Code Embed element instead — it works the same on one page.

Add the scheduling widget to Squarespace

1. 1Edit the page and add a Code block where the calendar should appear.
2. 2Paste both lines below into the Code block (leave the type set to HTML).
3. 3Save and view the live page.

<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>

Code blocks that run JavaScript, and Code Injection, need a Squarespace Core, Plus or Advanced plan. Squarespace may hide custom code while you're logged in, so check the page logged out or in Safe Mode preview. For a site-wide install, put the script line in Code Injection → Footer.

Add the scheduling widget to Wix

1. 1In the editor, click Add Elements → Embed Code → Embed HTML.
2. 2Choose Code, paste both lines below, and click Update.
3. 3Resize the element so the calendar has room — about 750px tall on desktop.
4. 4Publish the site.

<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>

Wix runs custom HTML inside its own fixed-size frame, so the widget can't grow the Wix element automatically — give it enough height. Alternatively use Embed a Site with the direct widget URL synqslot.com/embed/yourname/30min.

Add the scheduling widget to Framer

1. 1Press Insert and add an Embed component to the page.
2. 2Set the Embed type to HTML and paste both lines below.
3. 3Set the component's width to fill and give it a starting height (around 750px).
4. 4Publish.

<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>

If the calendar appears clipped on the published site, increase the Embed component's height — some builders render custom HTML in a fixed-size frame.

Add the scheduling widget to Shopify

1. 1Go to Online Store → Pages and open the page (or create one, e.g. "Book a call").
2. 2In the content editor, click the <> (Show HTML) button.
3. 3Paste both lines below where the calendar should go and click Save.

<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>

Prefer the theme editor? Add a Custom Liquid section and paste the same two lines.

Add the scheduling widget to Carrd

1. 1Add an Embed element to the page.
2. 2Set Type to Code and Style to Inline.
3. 3Paste both lines below and save. Publish the site.

<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>

Embed elements (Code or iframe) need Carrd Pro Standard or higher, and they only render on the published site, not in the builder.

Add the scheduling widget to Notion

1. 1Notion pages can't run scripts, so use the widget's direct URL instead.
2. 2Type /embed on the page and choose Embed.
3. 3Paste the URL below and press Enter.
4. 4Drag the frame's bottom edge to make it tall enough — Notion won't auto-resize it.

https://synqslot.com/embed/yourname/30min

This is a plain iframe embed: there's no script, so no auto-resize and no popup or floating button.

Add the scheduling widget to Plain HTML

1. 1Paste the script line once, anywhere on the page (just before </body> is conventional).
2. 2Paste the div where the calendar should appear. Add more divs for more booking links — the one script handles all of them.
3. 3Deploy. The link inside the div shows if the script is blocked, so nothing on the page breaks.

<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>

Add the scheduling widget to React / Next.js

1. 1Create a client component that renders the div.
2. 2Load the script in useEffect after the div is in the DOM — the snippet appends a fresh script on every mount so it also works after client-side navigation.
3. 3Render <BookingWidget /> wherever the calendar should appear.

"use client";
import { useEffect } from "react";

export function BookingWidget() {
  useEffect(() => {
    // Append a fresh <script> on every mount so the widget also initialises
    // after client-side navigation (a cached script tag won't re-run).
    const s = document.createElement("script");
    s.src = "https://synqslot.com/embed.js";
    s.async = true;
    document.body.appendChild(s);
    return () => {
      s.remove();
    };
  }, []);

  return (
    <div data-synqslot="yourname/30min">
      <a href="https://synqslot.com/yourname/30min">Book a time</a>
    </div>
  );
}

next/script also works for a single page load, but it won't re-run embed.js when the user navigates back to the page client-side — the useEffect version does.