Gutscheinverkauf auf der eigenen Website: drei Wege im Vergleich

Hier entsteht das häufigste Missverständnis. „Gutscheine auf meiner Website verkaufen“ klingt so, als müsste deine Website den Verkauf abwickeln: Warenkorb, Zahlung, Rechnung, Versand.

Muss sie nicht, und sie sollte es auch nicht. Zahlung, Gutscheincodes, Rechnungen und Einlösung gehören auf eine Plattform, die dafür gebaut ist und die auch dann noch funktioniert, wenn deine Website nächstes Jahr neu gemacht wird. Deine Website zeigt nur den Einstieg.

Das ist der eigentliche Gewinn dieser Aufteilung: Ein Relaunch deiner Seite kostet dich dann einen kopierten Codeschnipsel und nicht den halben Gutscheinverkauf.

Dieser Beitrag setzt voraus, dass die Grundsatzfrage geklärt ist. Falls nicht, klärt der Vergleich der vier Wege, Gutscheine online zu verkaufen, sie zuerst.

Du verlinkst von deiner Seite auf eine gehostete Verkaufsseite. Bei MomentPass ist das eine eigene Shop-Seite für dein Studio.

Unterschätze diesen Weg nicht. Er funktioniert auf jeder Website, auf jedem Baukasten, in jeder E-Mail-Signatur und in deiner Instagram-Bio. Er lässt sich in fünf Minuten einrichten und geht nie kaputt.

Der Nachteil: Der Gutschein ist nur da sichtbar, wo du den Link setzt. Wer auf deiner Startseite landet und nichts von Gutscheinen liest, kommt nicht auf die Idee.

Die Angebote erscheinen direkt auf deiner Seite, an der Stelle, an der du das Element platzierst. Optisch gehören sie zu deiner Website, technisch kommen sie von MomentPass.

Das ist der richtige Weg für eine eigene Gutscheinseite, für einen Abschnitt auf der Startseite oder für das Ende einer Leistungsseite. Der Besucher sieht Preise und Angebote, ohne vorher irgendwohin zu klicken.

Ein kleiner Button bleibt beim Scrollen am Bildschirmrand stehen und öffnet die Angebote in einer Überlagerung.

Sinnvoll, wenn Gutscheine auf jeder Seite erreichbar sein sollen, ohne dass du jede Seite anfassen musst. Besonders vor Weihnachten, wenn der Gutschein für ein paar Wochen die wichtigste Sache auf deiner Website ist und danach wieder in den Hintergrund treten soll.

Sparsam einsetzen. Zwei schwebende Elemente auf derselben Seite, etwa noch ein Cookie-Banner und ein Chat, und aus dem Angebot wird eine Belästigung.

Fast jede fehlgeschlagene Einbindung, die wir bisher gesehen haben, ging auf einen dieser beiden Punkte zurück.

type="module" am Script-Tag. Das Widget ermittelt seine eigene Herkunft über document.currentScript. Bei einem Modul-Script ist dieser Wert null, und das Widget weiß nicht mehr, wo es seine Daten holen soll. Nutze defer, nicht type="module".

Ein umgebendes Element mit transform, filter oder contain. Der schwebende Button ist position: fixed. Sobald ein Elternelement eine dieser CSS-Eigenschaften trägt, verschiebt sich sein Bezugsrahmen, und der Button landet irgendwo mitten auf der Seite. Viele Themes setzen so etwas auf Animationscontainer. Deshalb gehört das schwebende Element direkt vor das schließende </body> und nicht in einen Inhaltsbereich.

Das Script selbst brauchst du übrigens nur einmal pro Seite, auch wenn du mehrere Gutscheinbereiche einbaust.

Teste die Einbindung auf einer echten Seite unter deiner eigenen Domain, nicht nur in der Vorschau. Vorschauen laufen oft unter anderen Adressen und mit anderen Sicherheitsregeln als die spätere Live-Seite.

Prüfe dabei drei Dinge: Erscheinen die Angebote mit den richtigen Preisen? Öffnet sich der Kauf? Und sieht das Ganze auf einem Telefon vernünftig aus? Die Mehrheit der Gutscheinkäufe passiert auf dem Handy, oft abends auf dem Sofa.