All posts
GuidesSeptember 15, 2026·5 min read·By Mandeep Cheema

How to Embed a Booking Calendar in WordPress (No Plugin)

You can add a booking calendar to a WordPress site in about five minutes with two lines of HTML. This guide shows exactly where to paste them, what to do if the calendar looks clipped, and how to embed a routing form or a popup instead of a plain calendar.

The widget renders on the server, so the first available times are in the page HTML before any script runs. If a visitor has JavaScript blocked they still see a working link to book. Everything on every plan — there is no per-embed or per-seat charge.

The two lines you need

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

Replace yourname/30min with the slug of your own booking link (it is in the link's share panel). The <a> inside the div is a fallback: the script replaces it with the calendar when it runs, and it stays visible if the script cannot load.

Steps in the block editor

Open the page or post and click + where the calendar should go.
Search for the Custom HTML block and add it.
Paste both lines into the block.
Click Update or Publish, then open the live page. The editor preview does not run scripts, so the calendar only appears on the front end.

Elementor, Divi and other builders

Use the builder's HTML widget and paste the same two lines. Nothing else changes.

Many pages, one script

If the calendar appears on more than one page, put the script line in your theme's footer-scripts field or a header-and-footer plugin, and paste only the div on each page. One script handles every widget on the page, including several booking links side by side.

Do you need a plugin?

No. The widget is plain HTML. Plugins that wrap scheduling tools add an update cycle and another admin to keep secure; two lines in a Custom HTML block do the same job and survive theme changes.

Routing form or popup instead of a calendar

Swap data-synqslot for data-synqslot-form="your-form" to embed a routing form inline — it asks the visitor a few questions and sends them to the right person or team. To open the form from a button instead, use an <a> with data-synqslot-form and data-mode="popup". Both are on the embeds page with copy-ready snippets.

Prefill the visitor's details

The script forwards your page's own query string into the widget. Send a visitor to yoursite.com/book?name=Ada&email=ada@example.com&company=Acme and the booking form arrives prefilled. Handy when the visitor has already filled in a form on your site.

If the calendar looks cut off

Some builders render custom HTML inside a fixed-size frame and will not let the widget grow it. Give the embed element a starting height of about 750px on desktop. The widget auto-resizes inside its own iframe, so once the element is tall enough it stays correct as the month changes.

What it costs

Nothing extra. The embed is included on Solo ($6/mo) and both Team plans ($27/mo for up to 5 people, $35/mo for up to 10). See pricing, or compare with Calendly if you are switching.

Try SynqSlot free

Share one link and let your calendar fill itself — 15 days free, no card required.

Start free trial