Webshop und Gutscheinverkauf auf der eigenen Website einbetten

🟢Beginner 3 min read

So zeigen Sie Ihren FlowDule-Webshop oder Ihren Gutscheinverkauf mit einem einzigen Codeausschnitt direkt auf Ihrer eigenen Website.

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