Bygg inn bookingsiden på nettsiden din

Du kan la kundene dine booke direkte fra din egen nettside - uten at de trenger å forlate den. Du kan også bygge inn eventene dine, nettbutikken din eller salg av gavekort. FlowDule tilbyr to enkle måter å integrere på.

Før du starter

Du trenger din booking-slug - det er den delen av bookingadressen din som kommer før .flowdule.com. Hvis bookingsiden din f.eks. er klinik-nord.flowdule.com, er sluggen din klinik-nord.

Du finner sluggen din under Innstillinger → Nettbooking i FlowDule-appen.

Mulighet 1: Direkte iframe

Den enkleste metoden. Kopier HTML-koden nedenfor og lim den inn der du vil ha bookingskjemaet vist på nettsiden din.

<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 time"
></iframe>

Fordeler:

• Fungerer i alle CMS-systemer (WordPress, Wix, Squarespace, Webflow m.fl.)
• Ingen JavaScript kreves
• Full kontroll over plassering og størrelse

Tips:

• Juster height-verdien hvis innholdet klippes. Vi anbefaler minimum 700.
• En ren iframe har fast høyde. Vil du ha automatisk høydetilpasning, bruk widget-scriptet (mulighet 2) - eller lytt selv etter flowdule:resize-eventet, som beskrevet under “Avansert” nederst.

Mulighet 2: FlowDule Widget (anbefalt)

Widget-scriptet vårt håndterer alt automatisk - oppretting av iframe, automatisk høydetilpasning og valgfritt en “Book en time”-knapp med popup.

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

Inline-visning

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

Popup-visning (modal)

En knapp som åpner bookingskjemaet i et overlegg:

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

Knappen settes automatisk inn der du plasserer script-taggen.

Velg hva widgeten skal vise

Med data-view bestemmer du hvilken del av FlowDule-siden din som bygges inn. Widgeten holder seg innenfor det valgte området, så besøkende ikke kan navigere videre til de andre modulene dine inne i iframen.

Utelater du data-view, oppfører widgeten seg akkurat som før: den viser bookingflyten.

Eksempel 1: Booking, bygget inn på siden

Minst mulig oppsett:

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

Eksempel 2: Nettbutikk 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: Ett bestemt event som knapp

Knappen åpner eventet i et overlegg - fint til en “Kjøp billett”-knapp ved siden av din egen omtale av 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="Kjøp billett"
></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 bookingflyten

Har du flere steder, kan du hoppe over stedsvalget, og du kan forhåndsvelge en bestemt tjeneste:

<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 krever data-location-id, fordi tjenestene hører til et sted.

Du kan ha flere widgeter på samme side - f.eks. booking øverst og nettbutikk lenger ned. Gi hver widget sitt eget data-target-element.

Widget-innstillinger

Slik gjør du det i WordPress

Med Elementor

1. Legg til en HTML-widget der du vil ha bookingen
2. Lim inn iframe- eller widget-koden
3. Lagre og forhåndsvis

Med WordPress Block Editor (Gutenberg)

1. Legg til en Custom HTML-blokk
2. Lim inn koden
3. Bytt til “Forhåndsvis” for å se resultatet

Med et WordPress-tema

Lim inn koden i malfilen din (f.eks. page-booking.php) der du vil ha skjemaet.

Slik gjør du det i andre CMS-systemer

Wix

1. Gå til siden din i Wix Editor
2. Klikk Legg til → Embed Code → Custom Element eller HTML iframe
3. Lim inn koden

Squarespace

1. Rediger ønsket side
2. Legg til en Code Block
3. Lim inn koden og lagre

Webflow

1. Dra en Embed-komponent inn på siden din
2. Lim inn koden
3. Publiser siden din

Avansert: Lytt etter booking-eventer

Hvis du vil reagere på når en kunde har fullført en booking (f.eks. til sporing eller visning av en takkemelding), kan du lytte etter postMessage-eventer:

<script>
  window.addEventListener("message", function (event) {
    // Bekreft at meldingen kommer fra nettopp din bookingadresse
    if (event.origin !== "https://klinik-nord.flowdule.com") return;

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

Alle tilgjengelige eventer

Feilsøking

Bookingen vises ikke?

• Sjekk at sluggen din er riktig
• Sjekk at nettbooking er aktivert under Innstillinger → Nettbooking

Eventer, nettbutikk eller gavekort vises ikke?

• Sjekk at modulen er slått på for kjeden din - widgeten kan bare vise moduler du bruker
• Sjekk at data-view er stavet events, shop eller giftcard
• Bruker du data-event-id, må eventet være offentlig og ikke over

Widgeten står i feil tema eller språk?

• data-theme="auto" følger den besøkendes systeminnstilling. Sett light eller dark hvis den skal låses
• Utelat data-locale hvis widgeten skal bruke kjedens eget språk

Iframen er for liten?

• Øk height-verdien i iframe-koden din
• Bruk widget-scriptet i stedet: det tilpasser høyden automatisk

Bookingen virker, men ser rar ut?

• Sørg for at siden din ikke overstyrer iframe-stylingen med global CSS
• Legg til style="border: none;" på iframen