Bädda in din webbshop och presentkortsförsäljning på din webbplats

🟢Beginner 3 min read

Så visar du din FlowDule-webbshop eller din presentkortsförsäljning direkt på din egen webbplats med en enda kodsnutt.

Har du webbshop-modulen aktiverad kan dina kunder köpa produkter och presentkort direkt på din egen webbplats - utan att lämna den. Det är samma widget som för bokning, bara med en annan visning.

Innan du börjar

• Webbshop-modulen måste vara aktiv för din kedja. Du slår på den under Inställningar → Moduler.
• Du behöver din boknings-slug - delen före .flowdule.com i din bokningsadress. Är din sida klinik-nord.flowdule.com är din slug klinik-nord.

Webbshop på sidan

Klistra in kodsnutten där shoppen ska visas. Widgeten skapar själv sin iframe och anpassar höjden automatiskt:

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

Besökare kan lägga produkter i varukorgen och betala utan att kunna navigera vidare till dina andra moduler inne i visningen.

Presentkortsförsäljning

Samma princip, bara med data-view="giftcard":

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

Som knapp med popup

Vill du hellre ha en “Köp presentkort”-knapp i din navigation eller footer använder du modal-visningen:

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-view="giftcard"
  data-mode="modal"
  data-button-text="Köp presentkort"
></script>

Flera widgetar på samma sida

Du kan gott kombinera - t.ex. bokning högst upp och webbshop längre ner. Ge varje widget sitt eget element med data-target:

<div id="flowdule-booking"></div>
<div id="flowdule-shop"></div>

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

Tema, språk och bakgrund

Widgeten följer som standard besökarens ljusa/mörka systeminställning och kedjans eget språk. Det styr du med data-theme (light, dark, auto), data-locale (da, en, de) och data-background="surface", som ger widgeten en egen bakgrundsfärg.

Den fullständiga listan över inställningar, steg-för-steg-guider för WordPress, Wix, Squarespace och Webflow samt felsökning hittar du i Bädda in din bokningssida på din webbplats.

Felsökning

Webbshoppen eller presentkortssidan visas inte?

• Kontrollera att webbshop-modulen är aktiverad för din kedja - widgeten kan bara visa moduler du använder
• Kontrollera att data-view är stavat exakt shop eller giftcard
• Kontrollera att din slug är korrekt