Embed your webshop and gift card sales on your website

🟢Beginner 3 min read

How to show your FlowDule webshop or gift card sales directly on your own website with a single snippet.

With the webshop module enabled, your customers can buy products and gift cards directly on your own website - without leaving it. It is the same widget as for booking, just with a different view.

Before you start

• The webshop module must be active for your chain. You enable it under Settings → Modules.
• You need your booking slug - the part before .flowdule.com in your booking address. If your page is klinik-nord.flowdule.com, your slug is klinik-nord.

Webshop on the page

Paste the snippet where the shop should appear. The widget creates its own iframe and adjusts the height automatically:

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

Visitors can add products to the cart and pay, without being able to navigate on to your other modules inside the view.

Gift card sales

Same principle, just with data-view="giftcard":

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

As a button with a pop-up

If you’d rather have a “Buy gift card” button in your navigation or footer, use modal mode:

<script
  src="https://klinik-nord.flowdule.com/widget.js"
  data-slug="klinik-nord"
  data-view="giftcard"
  data-mode="modal"
  data-button-text="Buy gift card"
></script>

Several widgets on the same page

You can combine freely - for example booking at the top and the webshop further down. Give each widget its own element with 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>

Theme, language and background

By default the widget follows the visitor’s light/dark system setting and the chain’s own language. You can control this with data-theme (light, dark, auto), data-locale (da, en, de) and data-background="surface", which gives the widget its own background colour.

The full list of settings, step-by-step guides for WordPress, Wix, Squarespace and Webflow, plus troubleshooting, live in Embed your booking page on your website.

Troubleshooting

The webshop or gift card page doesn’t show?

• Check that the webshop module is enabled for your chain - the widget can only show modules you use
• Check that data-view is spelled exactly shop or giftcard
• Check that your slug is correct