Integrer din bookingside på din egen hjemmeside

Du kan lade dine kunder booke direkte fra din egen hjemmeside - uden at de behøver forlade den. Du kan også indlejre dine events, din webshop eller salg af gavekort. FlowDule tilbyder to nemme måder at integrere 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.
• En ren iframe har fast højde. Vil du have automatisk højdetilpasning, så brug widget-scriptet (mulighed 2) - eller lyt selv efter flowdule:resize-eventet, som beskrevet under “Avanceret” nederst.

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.

Scriptet ligger på din egen bookingadresse, så src starter altid med din slug: https://klinik-nord.flowdule.com/widget.js.

Inline-visning

Booking-formularen vises direkte på siden:

<div id="flowdule-booking"></div>
<script
  src="https://klinik-nord.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://klinik-nord.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.

Vælg hvad widgeten skal vise

Med data-view bestemmer du, hvilken del af din FlowDule-side der indlejres. Widgeten holder sig inden for det valgte område, så besøgende ikke kan navigere videre til dine andre moduler inde i iframen.

Udelader du data-view, opfører widgeten sig præcis som før: den viser bookingflowet.

Eksempel 1: Booking, indlejret på siden

Den mindst mulige opsætning:

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

Eksempel 2: Webshop i mørkt tema

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-view="shop"
  data-theme="dark"
></script>

Eksempel 3: Ét bestemt event som knap

Knappen åbner eventet i et overlay - god til en “Køb billet”-knap ved siden af din egen omtale af arrangementet:

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-view="events"
  data-event-id="3f9c1b8e-5d2a-4f7c-9a31-6b0e8c2d4a15"
  data-mode="modal"
  data-button-text="Køb billet"
></script>

Eksempel 4: Gavekort

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-view="giftcard"
></script>

Start et bestemt sted i bookingflowet

Har du flere lokationer, kan du springe lokationsvalget over, og du kan prævælge en bestemt ydelse:

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-view="booking"
  data-location-id="a41f0d92-77c5-4b1e-8f60-2c9e5a7d3b84"
  data-service-id="d7b3e610-9c48-42aa-b1f5-0e83c6d21947"
></script>

data-service-id kræver data-location-id, fordi ydelserne hører til en lokation.

Du kan have flere widgets på samme side - fx booking i toppen og webshop længere nede. Giv hver widget sit eget data-target-element.

Widget-indstillinger

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 netop din bookingadresse
    if (event.origin !== "https://klinik-nord.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

Fejlfinding

Booking vises ikke?

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

Events, webshop eller gavekort vises ikke?

• Tjek at modulet er slået til for din kæde - widgeten kan kun vise moduler, du bruger
• Tjek at data-view er stavet som events, shop eller giftcard
• Bruger du data-event-id, skal eventet være offentligt og ikke overstået

Widgeten står i forkert tema eller sprog?

• data-theme="auto" følger den besøgendes systemindstilling. Sæt light eller dark, hvis den skal låses
• Udelad data-locale, hvis widgeten skal bruge kædens eget sprog

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