Bygg inn nettbutikken og gavekortsalget på nettsiden din

🟢Beginner 3 min read

Slik viser du FlowDule-nettbutikken din eller gavekortsalget ditt direkte på din egen nettside med én kodesnutt.

Har du nettbutikk-modulen slått på, kan kundene dine kjøpe produkter og gavekort direkte på din egen nettside - uten å forlate den. Det er den samme widgeten som til booking, bare med en annen visning.

Før du starter

• Nettbutikk-modulen må være aktiv for kjeden din. Du slår den på under Innstillinger → Moduler.
• Du trenger din booking-slug - delen før .flowdule.com i bookingadressen din. Er siden din klinik-nord.flowdule.com, er sluggen din klinik-nord.

Nettbutikk på siden

Lim inn kodesnutten der butikken skal vises. Widgeten oppretter selv sin iframe og tilpasser høyden automatisk:

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

Besøkende kan legge produkter i handlekurven og betale, uten å kunne navigere videre til de andre modulene dine inne i visningen.

Gavekortsalg

Samme prinsipp, bare 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

Vil du heller ha en “Kjøp gavekort”-knapp i navigasjonen eller footeren, bruker 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="Kjøp gavekort"
></script>

Flere widgeter på samme side

Du kan fint kombinere - f.eks. booking øverst og nettbutikk lenger ned. Gi hver 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 og bakgrunn

Widgeten følger som standard den besøkendes lyse/mørke systeminnstilling og kjedens eget språk. Det styrer du med data-theme (light, dark, auto), data-locale (da, en eller de) og data-background="surface", som gir widgeten sin egen bakgrunnsfarge.

Den fulle listen over innstillinger, steg-for-steg-veiledninger til WordPress, Wix, Squarespace og Webflow samt feilsøking finner du i Bygg inn bookingsiden på nettsiden din.

Feilsøking

Nettbutikken eller gavekortsiden vises ikke?

• Sjekk at nettbutikk-modulen er slått på for kjeden din - widgeten kan bare vise moduler du bruker
• Sjekk at data-view er stavet nøyaktig shop eller giftcard
• Sjekk at sluggen din er riktig