Embed your booking page on your own website

🟢Beginner 5 min read

Learn how to easily embed your FlowDule booking page on your own website using an iframe or our widget script.

You can let your customers book directly from your own website — without leaving it. FlowDule offers two easy ways to embed your booking page.

Before you start

You need your booking slug — that’s the part of your booking address that comes before .flowdule.com. For example, if your booking page is klinik-nord.flowdule.com, your slug is klinik-nord.

You can find your slug under Settings → Online Booking in the FlowDule app.

---

Option 1: Direct iframe

The simplest method. Copy the HTML code below and paste it where you want the booking form to appear on your website.

<iframe
  src="https://klinik-nord.flowdule.com?embed=true"
  width="100%"
  height="700"
  frameborder="0"
  style="border: none; border-radius: 8px;"
  allow="payment"
  title="Book an appointment"
></iframe>

Benefits:

• Works in all CMS systems (WordPress, Wix, Squarespace, Webflow, etc.)
• No JavaScript required
• Full control over placement and size

Tips:

• Adjust the height value if the content is clipped. We recommend a minimum of 700.
• The iframe height adjusts automatically if your browser supports it.

---

Option 2: FlowDule Widget (recommended)

Our widget script handles everything automatically — iframe creation, automatic height adjustment, and optionally a “Book now” button with a pop-up.

Inline display

The booking form is displayed directly on the page:

<div id="flowdule-booking"></div>
<script
  src="https://booking.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-target="flowdule-booking"
></script>

Pop-up display (modal)

A button that opens the booking form in an overlay:

<script
  src="https://booking.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-mode="modal"
  data-button-text="Book now"
  data-button-color="#4A7C59"
></script>

The button is automatically inserted where you place the script tag.

---

Widget settings

Attribute	Required	Default	Description
data-slug	Yes	—	Your booking slug
data-target	No	Auto-created	ID of the HTML element where the booking should appear
data-mode	No	inline	inline (direct) or modal (pop-up)
data-button-text	No	”Book en tid”	Button text (modal mode only)
data-button-color	No	#4A7C59	Button colour (modal mode only)
data-locale	No	da	Language: da, en, or de

---

How to do it in WordPress

With Elementor

1. Add an HTML widget where you want the booking
2. Paste the iframe or widget code
3. Save and preview

With WordPress Block Editor (Gutenberg)

1. Add a Custom HTML block
2. Paste the code
3. Switch to “Preview” to see the result

With a WordPress theme

Insert the code in your template file (e.g. page-booking.php) where you want the form to appear.

---

How to do it in other CMS systems

Wix

1. Go to your page in the Wix Editor
2. Click Add → Embed Code → Custom Element or HTML iframe
3. Paste the code

Squarespace

1. Edit the desired page
2. Add a Code Block
3. Paste the code and save

Webflow

1. Drag an Embed component onto your page
2. Paste the code
3. Publish your site

---

Advanced: Listen for booking events

If you want to react when a customer has completed a booking (e.g. for tracking or displaying a thank-you message), you can listen for postMessage events:

<script>
  window.addEventListener("message", function (event) {
    // Verify the message comes from FlowDule
    if (!event.origin.includes("flowdule.com")) return;

    if (event.data.type === "flowdule:booked") {
      // The customer has booked!
      console.log("Booking completed:", event.data.bookingId);
      console.log("Confirmation code:", event.data.confirmationCode);
    }
  });
</script>

All available events

Event	Data	When
flowdule:ready	—	Booking form has loaded
flowdule:resize	{ height }	Content height has changed
flowdule:navigate	{ path, step }	Customer moves between steps (1–4)
flowdule:booked	{ bookingId, confirmationCode }	Booking completed

---

Troubleshooting

Booking not showing?

• Check that your slug is correct
• Check that online booking is enabled under Settings → Online Booking

Iframe too small?

• Increase the height value in your iframe code
• Use the widget script instead — it adjusts the height automatically

Booking works but looks odd?

• Make sure your site isn’t overriding iframe styling with global CSS
• Add style="border: none;" to the iframe