Bädda in din bokningssida på din webbplats

Du kan låta dina kunder boka direkt från din egen webbplats - utan att de behöver lämna den. Du kan också bädda in dina event, din webbshop eller försäljning av presentkort. FlowDule erbjuder två enkla sätt att integrera.

Innan du börjar

Du behöver din boknings-slug - det är den del av din bokningsadress som kommer före .flowdule.com. Om din bokningssida t.ex. är klinik-nord.flowdule.com är din slug klinik-nord.

Du hittar din slug under Inställningar → Onlinebokning i FlowDule-appen.

Alternativ 1: Direkt iframe

Den enklaste metoden. Kopiera HTML-koden nedan och klistra in den där du vill att bokningsformuläret ska visas på din webbplats.

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

Fördelar:

• Fungerar i alla CMS-system (WordPress, Wix, Squarespace, Webflow m.fl.)
• Ingen JavaScript krävs
• Full kontroll över placering och storlek

Tips:

• Justera height-värdet om innehållet klipps. Vi rekommenderar minst 700.
• En ren iframe har fast höjd. Vill du ha automatisk höjdanpassning, använd widget-scriptet (alternativ 2) - eller lyssna själv på flowdule:resize-eventet, som beskrivs under “Avancerat” längst ner.

Alternativ 2: FlowDule Widget (rekommenderas)

Vårt widget-script sköter allt automatiskt - skapande av iframe, automatisk höjdanpassning och valfritt en “Boka en tid”-knapp med popup.

Scriptet ligger på din egen bokningsadress, så src börjar alltid med din slug: https://klinik-nord.flowdule.com/widget.js.

Inline-visning

Bokningsformuläret visas direkt på sidan:

<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 öppnar bokningsformuläret i ett overlay:

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

Knappen infogas automatiskt där du placerar script-taggen.

Välj vad widgeten ska visa

Med data-view bestämmer du vilken del av din FlowDule-sida som bäddas in. Widgeten håller sig inom det valda området, så besökare kan inte navigera vidare till dina andra moduler inne i iframen.

Utelämnar du data-view beter sig widgeten precis som tidigare: den visar bokningsflödet.

Exempel 1: Bokning, inbäddad på sidan

Minsta möjliga uppsättning:

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

Exempel 2: Webbshop i mörkt tema

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

Exempel 3: Ett specifikt event som knapp

Knappen öppnar eventet i ett overlay - perfekt för en “Köp biljett”-knapp bredvid din egen beskrivning av evenemanget:

<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öp biljett"
></script>

Exempel 4: Presentkort

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

Starta på ett specifikt ställe i bokningsflödet

Har du flera platser kan du hoppa över platsvalet, och du kan förvälja en specifik tjänst:

<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, eftersom tjänsterna hör till en plats.

Du kan ha flera widgetar på samma sida - t.ex. bokning högst upp och webbshop längre ner. Ge varje widget sitt eget data-target-element.

Widget-inställningar

Så gör du i WordPress

Med Elementor

1. Lägg till en HTML-widget där du vill ha bokningen
2. Klistra in iframe- eller widget-koden
3. Spara och förhandsgranska

Med WordPress Block Editor (Gutenberg)

1. Lägg till ett Custom HTML-block
2. Klistra in koden
3. Växla till “Förhandsgranska” för att se resultatet

Med ett WordPress-tema

Klistra in koden i din mallfil (t.ex. page-booking.php) där du vill ha formuläret.

Så gör du i andra CMS-system

Wix

1. Gå till din sida i Wix Editor
2. Klicka på Lägg till → Embed Code → Custom Element eller HTML iframe
3. Klistra in koden

Squarespace

1. Redigera önskad sida
2. Lägg till ett Code Block
3. Klistra in koden och spara

Webflow

1. Dra in en Embed-komponent på din sida
2. Klistra in koden
3. Publicera din sida

Avancerat: Lyssna på boknings-event

Om du vill reagera på när en kund har slutfört en bokning (t.ex. för spårning eller ett tackmeddelande) kan du lyssna på postMessage-event:

<script>
  window.addEventListener("message", function (event) {
    // Bekräfta att meddelandet kommer från just din bokningsadress
    if (event.origin !== "https://klinik-nord.flowdule.com") return;

    if (event.data.type === "flowdule:booked") {
      // Kunden har bokat!
      console.log("Bokning slutförd:", event.data.bookingId);
      console.log("Bekräftelsekod:", event.data.confirmationCode);
    }
  });
</script>

Alla tillgängliga event

Felsökning

Bokningen visas inte?

• Kontrollera att din slug är korrekt
• Kontrollera att onlinebokning är aktiverad under Inställningar → Onlinebokning

Event, webbshop eller presentkort visas inte?

• Kontrollera att modulen är aktiverad för din kedja - widgeten kan bara visa moduler du använder
• Kontrollera att data-view är stavat events, shop eller giftcard
• Använder du data-event-id måste eventet vara publikt och inte ha passerat

Widgeten har fel tema eller språk?

• data-theme="auto" följer besökarens systeminställning. Sätt light eller dark om det ska låsas
• Utelämna data-locale om widgeten ska använda kedjans eget språk

Iframen är för liten?

• Öka height-värdet i din iframe-kod
• Använd widget-scriptet i stället: det anpassar höjden automatiskt

Bokningen fungerar men ser konstig ut?

• Se till att din sida inte skriver över iframe-stylingen med global CSS
• Lägg till style="border: none;" på iframen