Integrer din bookingside på din egen hjemmeside

🟢Begynder 5 min læsetid

Lær hvordan du nemt kan integrere din FlowDule bookingside på din egen hjemmeside med iframe eller vores widget.

Du kan lade dine kunder booke direkte fra din egen hjemmeside — uden at de behøver forlade den. FlowDule tilbyder to nemme måder at integrere din bookingside på.

Før du starter

Du skal bruge din booking-slug — det er den del af din bookingadresse, der kommer før .flowdule.com. Hvis din bookingside f.eks. er klinik-nord.flowdule.com, er din slug klinik-nord.

Du finder din slug under Indstillinger → Online booking i FlowDule-appen.

---

Mulighed 1: Direkte iframe

Den simpleste metode. Kopier nedenstående HTML-kode og indsæt den, hvor du vil have bookingformularen vist på din hjemmeside.

<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 en tid"
></iframe>

Fordele:

• Virker i alle CMS-systemer (WordPress, Wix, Squarespace, Webflow, m.fl.)
• Ingen JavaScript påkrævet
• Fuld kontrol over placering og størrelse

Tips:

• Juster height værdien, hvis indholdet klippes. Vi anbefaler minimum 700.
• Iframe’ens højde tilpasser sig automatisk, hvis din browser understøtter det.

---

Mulighed 2: FlowDule Widget (anbefalet)

Vores widget-script håndterer alt automatisk — oprettelse af iframe, automatisk højdetilpasning, og valgfrit en “Book en tid”-knap med pop-up.

Inline-visning

Booking-formularen vises direkte på siden:

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

Pop-up-visning (modal)

En knap som åbner bookingformularen i et overlay:

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

Knappen indsættes automatisk, hvor du placerer script-tagget.

---

Widget-indstillinger

Attribut	Påkrævet	Standard	Beskrivelse
data-slug	Ja	—	Din booking-slug
data-target	Nej	Automatisk	ID på det HTML-element, hvor booking skal vises
data-mode	Nej	inline	inline (direkte) eller modal (pop-up)
data-button-text	Nej	”Book en tid”	Knaptekst (kun modal-visning)
data-button-color	Nej	#4A7C59	Knapfarve (kun modal-visning)
data-locale	Nej	da	Sprog: da, en eller de

---

Sådan gør du i WordPress

Med Elementor

1. Tilføj en HTML-widget, hvor du vil have booking
2. Indsæt iframe- eller widget-koden
3. Gem og forhåndsvis

Med WordPress Block Editor (Gutenberg)

1. Tilføj en Custom HTML-blok
2. Indsæt koden
3. Skift til “Forhåndsvis” for at se resultatet

Med et WordPress-tema

Indsæt koden i din template-fil (f.eks. page-booking.php) der, hvor du vil have formularen.

---

Sådan gør du i andre CMS-systemer

Wix

1. Gå til din side i Wix Editor
2. Klik Tilføj → Embed Code → Custom Element eller HTML iframe
3. Indsæt koden

Squarespace

1. Rediger den ønskede side
2. Tilføj en Code Block
3. Indsæt koden og gem

Webflow

1. Træk en Embed-komponent ind på din side
2. Indsæt koden
3. Publicer din side

---

Avanceret: Lyt efter booking-events

Hvis du vil reagere på, hvornår en kunde har gennemført en booking (f.eks. til tracking eller visning af en tak-besked), kan du lytte efter postMessage-events:

<script>
  window.addEventListener("message", function (event) {
    // Bekræft at beskeden kommer fra FlowDule
    if (!event.origin.includes("flowdule.com")) return;

    if (event.data.type === "flowdule:booked") {
      // Kunden har booket!
      console.log("Booking gennemført:", event.data.bookingId);
      console.log("Bekræftelseskode:", event.data.confirmationCode);
    }
  });
</script>

Alle tilgængelige events

Event	Data	Hvornår
flowdule:ready	—	Bookingformularen er indlæst
flowdule:resize	{ height }	Indholdet har ændret højde
flowdule:navigate	{ path, step }	Kunden skifter trin (1–4)
flowdule:booked	{ bookingId, confirmationCode }	Booking gennemført

---

Fejlfinding

Booking vises ikke?

• Tjek at din slug er korrekt
• Tjek at online booking er aktiveret under Indstillinger → Online booking

Iframe er for lille?

• Forøg height-værdien i din iframe-kode
• Brug widget-scriptet i stedet — det tilpasser højden automatisk

Booking virker, men ser underligt ud?

• Sørg for at din side ikke overskriver iframe-styling med global CSS
• Tilføj style="border: none;" til iframe’en