Webshop und Gutscheinverkauf auf der eigenen Website einbetten | Buchungen

Ist das Webshop-Modul aktiviert, können Ihre Kunden Produkte und Gutscheine direkt auf Ihrer eigenen Website kaufen - ohne sie zu verlassen. Es ist dasselbe Widget wie für die Buchung, nur mit einer anderen Ansicht.

Bevor Sie starten

Das Webshop-Modul muss für Ihre Kette aktiv sein. Sie aktivieren es unter Einstellungen → Module.
Sie benötigen Ihren Buchungs-Slug - den Teil vor .flowdule.com in Ihrer Buchungsadresse. Ist Ihre Seite klinik-nord.flowdule.com, lautet Ihr Slug klinik-nord.

Webshop auf der Seite

Fügen Sie den Codeausschnitt dort ein, wo der Shop erscheinen soll. Das Widget erstellt sein iframe selbst und passt die Höhe automatisch an:

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

Besucher können Produkte in den Warenkorb legen und bezahlen, ohne innerhalb der Ansicht zu Ihren anderen Modulen weiternavigieren zu können.

Gutscheinverkauf

Dasselbe Prinzip, nur mit data-view="giftcard":

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

Als Button mit Pop-up

Möchten Sie lieber einen “Gutschein kaufen”-Button in Ihrer Navigation oder im Footer, nutzen Sie die Modal-Ansicht:

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

Mehrere Widgets auf derselben Seite

Sie können problemlos kombinieren - z. B. Buchung oben und Webshop weiter unten. Geben Sie jedem Widget sein eigenes Element mit 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, Sprache und Hintergrund

Das Widget folgt standardmäßig der hellen/dunklen Systemeinstellung des Besuchers und der Sprache der Kette. Das steuern Sie mit data-theme (light, dark, auto), data-locale (da, en, de) und data-background="surface", das dem Widget eine eigene Hintergrundfarbe gibt.

Die vollständige Liste der Einstellungen, Schritt-für-Schritt-Anleitungen für WordPress, Wix, Squarespace und Webflow sowie die Fehlerbehebung finden Sie unter Buchungsseite auf der eigenen Website einbetten.

Fehlerbehebung

Der Webshop oder die Gutscheinseite wird nicht angezeigt?

Prüfen Sie, ob das Webshop-Modul für Ihre Kette aktiviert ist - das Widget kann nur Module anzeigen, die Sie nutzen
Prüfen Sie, ob data-view genau shop oder giftcard geschrieben ist
Prüfen Sie, ob Ihr Slug korrekt ist