Indlejr din webshop og gavekortsalg på din hjemmeside

🟢Begynder 3 min læsetid

Sådan viser du din FlowDule-webshop eller dit gavekortsalg direkte på din egen hjemmeside med én kodestump.

Har du webshop-modulet slået til, kan dine kunder købe produkter og gavekort direkte på din egen hjemmeside - uden at forlade den. Det er den samme widget som til booking, blot med en anden visning.

Før du starter

• Webshop-modulet skal være aktivt for din kæde. Du slår det til under Indstillinger → Moduler.
• Du skal bruge din booking-slug - delen før .flowdule.com i din bookingadresse. Er din side klinik-nord.flowdule.com, er din slug klinik-nord.

Webshop på siden

Indsæt kodestumpen der, hvor shoppen skal vises. Widgeten opretter selv sin iframe og tilpasser højden automatisk:

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

Besøgende kan lægge produkter i kurven og betale, uden at kunne navigere videre til dine andre moduler inde i visningen.

Gavekortsalg

Samme princip, blot med data-view="giftcard":

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

Som knap med pop-up

Vil du hellere have en “Køb gavekort”-knap i din navigation eller footer, bruger 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øb gavekort"
></script>

Flere widgets på samme side

Du kan sagtens kombinere - fx booking i toppen og webshop længere nede. Giv hver widget sit 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, sprog og baggrund

Widgeten følger som standard den besøgendes lyse/mørke systemindstilling og kædens eget sprog. Det kan du styre med data-theme (light, dark, auto), data-locale (da, en, de) og data-background="surface", som giver widgeten sin egen baggrundsfarve.

Den fulde liste over indstillinger, trin-for-trin-vejledninger til WordPress, Wix, Squarespace og Webflow samt fejlfinding finder du i Integrer din bookingside på din egen hjemmeside.

Fejlfinding

Webshoppen eller gavekortsiden vises ikke?

• Tjek at webshop-modulet er slået til for din kæde - widgeten kan kun vise moduler, du bruger
• Tjek at data-view er stavet præcis shop eller giftcard
• Tjek at din slug er korrekt