Checkout einbetten

Den Einbettungscode kopieren und auf der eigenen Seite einsetzen, in WordPress, im Baukasten oder in reinem HTML. Wie es funktioniert, wie du die Einwilligung deines eigenen Cookie-Banners an den Checkout übergibst und wann Verlinken die bessere Wahl ist.

Du kannst deinen Checkout entweder verlinken (der Kunde wechselt auf die Checkout-Seite) oder einbetten (der Checkout erscheint mitten auf deiner Seite). Beides ist gleichwertig; die Einbettung fühlt sich nahtloser an, das Verlinken ist robuster.

Einbettungscode holen#

1. Im Dashboard unter Design auf Checkout Flows.
2. In der Zeile des Flows rechts auf das Symbol mit den spitzen Klammern (</>, „Einbettungscode abrufen"). Am Handy liegt derselbe Punkt im Menü mit den drei Punkten.
3. Code kopieren.

Der Code besteht aus zwei Zeilen:

<!-- RabbitCheckout Embed Code -->
<script src="https://dein-shop.rabbit-checkout.de/embed.js"></script>
<div data-rc-checkout-link="https://dein-shop.rabbit-checkout.de/dein-flow"></div>

Das Skript lädt den Checkout in das div. Alles, was du auf deiner Seite tun musst, ist beides an der Stelle einzufügen, an der der Checkout erscheinen soll.

Einbauen#

WordPress (Block-Editor). Einen Block Individuelles HTML einfügen und den Code hineinkopieren. Kein Plugin nötig. Es gibt auch keins.

WordPress (Classic Editor). In den Reiter Text wechseln und den Code einfügen.

Baukästen (Wix, Squarespace, Webflow, Jimdo …). Das Element für eigenen Code oder HTML-Einbettung verwenden.

Eigene Website. Beides direkt ins HTML, an die gewünschte Stelle.

Größe und Aussehen#

Der eingebettete Checkout füllt 100 % der Breite seines Containers. Steuere die Größe über den Container:

<div style="max-width: 640px; margin: 0 auto;">
  <div data-rc-checkout-link="https://dein-shop.rabbit-checkout.de/dein-flow"></div>
</div>

Die Höhe passt sich dem Inhalt an. Das Aussehen des Checkouts selbst: Farben, Felder, Reihenfolge, änderst du im Checkout-Seiten-Editor, nicht über CSS auf deiner Seite: Der eingebettete Inhalt liegt in einem eigenen Rahmen und lässt sich von außen nicht umgestalten.

Mehrere Checkouts auf einer Seite#

Das Skript reicht einmal pro Seite. Für ein zweites Angebot genügt ein weiteres div mit einer anderen Adresse:

<script src="https://dein-shop.rabbit-checkout.de/embed.js"></script>
<div data-rc-checkout-link="https://dein-shop.rabbit-checkout.de/angebot-a"></div>
<div data-rc-checkout-link="https://dein-shop.rabbit-checkout.de/angebot-b"></div>

Gutscheincode vorbelegen#

Der Parameter coupon funktioniert auch in der eingebetteten Adresse:

<div data-rc-checkout-link="https://dein-shop.rabbit-checkout.de/dein-flow?coupon=SOMMER20"></div>

→ Gutschein erstellen

Name und E-Mail vorbelegen#

Kommt der Käufer aus einem anderen Tool, das seinen Namen und seine E-Mail-Adresse schon kennt — einem Buchungstool, einem Formular, einer E-Mail-Kampagne —, kannst du beides an die Adresse hängen:

https://dein-shop.rabbit-checkout.de/dein-flow?name=Max%20Mustermann&email=max%40example.com

Die Felder sind dann ausgefüllt, aber ganz normal änderbar. Umlaute und das @ gehören URL-kodiert (%40 statt @), sonst schneidet der Browser die Adresse womöglich ab.

Werkzeuge wie Calendly, Cal.com und FluentBooking hängen diese Werte auf Wunsch selbst an die Weiterleitungsadresse — dann musst du nichts bauen, nur die Weiterleitung auf deinen Checkout-Flow zeigen lassen.

Alle Parameter, die eine Checkout-Adresse versteht, stehen in der Referenz → Checkout-Parameter.

Eigenes Cookie-Banner an den Checkout übergeben#

Hat deine Website bereits ein Cookie-Banner, fragt der eingebettete Checkout ein zweites Mal dasselbe: derselbe Verantwortliche, derselbe Zweck, zwei Abfragen hintereinander. Das lässt sich auflösen, und zwar in zwei Schritten. Beide werden gebraucht: Das Banner auszuschalten sorgt nur dafür, dass Rabbit nicht mehr fragt. Erst die Weitergabe sorgt dafür, dass die Antwort deines Besuchers auch ankommt.

Das ist derzeit der einzige Weg, die Einwilligung deiner eigenen Seite an den Checkout durchzureichen — und er funktioniert nur beim eingebetteten Checkout, nicht beim verlinkten.

Schritt 1: Das Rabbit-Banner für diesen Flow ausschalten#

Im Checkout-Flow, im Einstellungsfeld des Checkout-Kastens, das Feld Cookie-Einwilligungsbanner auf „In diesem Funnel nie anzeigen“ stellen. Es liegt direkt unter dem Schalter Vor Suchmaschinen verbergen.

Die Einstellung gilt pro Flow. Verkaufst du denselben Shop zusätzlich über normale Checkout-Links, behalten die ihr Banner → Checkout-Flow erstellen.

Schritt 2: Die Entscheidung übergeben#

Aus den Accept- und Reject-Handlern deines eigenen Banners:

// Besucher hat zugestimmt
RabbitCheckout.setMarketingConsent(true);

// Besucher hat abgelehnt
RabbitCheckout.setMarketingConsent(false);

Den fertigen Aufruf findest du auch im Einbettungsdialog unter „Du hast bereits ein Cookie-Banner?“.

embed.js legt RabbitCheckout.setMarketingConsent an, sobald das Skript gelesen wird, also bevor der Checkout-Rahmen überhaupt gebaut ist. Du darfst die Funktion deshalb jederzeit aufrufen, auch bevor der Checkout fertig geladen ist: Die Entscheidung wird gemerkt und zugestellt, sobald sich der Checkout meldet. Genau das ist sonst die häufigste Ursache für „bei mir geht es, beim Kunden nicht“.

Der Aufruf gibt ein Promise zurück, das erfüllt ist, wenn der Checkout die Entscheidung angewendet hat, nicht schon beim Empfang:

RabbitCheckout.setMarketingConsent(true).then(() => {
  // Der Checkout weiß Bescheid.
});

Was die Entscheidung bewirkt#

true lässt Meta Pixel, Google Tag Manager, deine eigenen Skripte und den Cookie für die Affiliate-Zuordnung laufen. Die Bestellung wird mit der Einwilligung gespeichert.

false blockiert all das — auch auf einem Flow, dessen Banner aus ist. Ein weitergegebenes Nein ist die Aussage der verantwortlichen Stelle von gerade eben, kein alter Cookie, und wird deshalb in beide Richtungen befolgt.

Nichts übergeben ändert nichts. Keine Antwort ist keine Ablehnung.

Wo die Entscheidung gespeichert wird#

In einem partitionierten Cookie, das der Server setzt. Ein Checkout in einem Rahmen auf fremder Domain kann dieses Cookie nicht selbst schreiben.

Partitioniert heißt: Das Cookie hängt an deiner Seite. Eine Einwilligung, die in deiner Einbettung gegeben wurde, ist auf dem normalen Rabbit-Checkout und in der Einbettung einer anderen Website nicht sichtbar. So arbeiten die Browser, das ist keine Entscheidung von Rabbit.

Was an der Bestellung steht#

An Bestellung und Abo wird gespeichert, woher die Entscheidung kam:

Die Version 0 ist Absicht: Der Käufer hat den Einwilligungstext von Rabbit nie gesehen, eine Version davon zu behaupten wäre ein falscher Nachweis. Der Nachweis für diese Käufer liegt bei dir, in deinem eigenen Consent-Werkzeug.

Wann Verlinken besser ist#

Einbetten lohnt sich vor allem, wenn der Kauf im Fluss deiner Seite passieren soll, etwa unten auf einer langen Verkaufsseite.

Wenn nichts erscheint#

Der Reihe nach prüfen:

1. Steht das Script-Tag mit auf der Seite? Manche Editoren entfernen <script> beim Speichern. Dann brauchst du den HTML- statt den Textblock.
2. Stimmt die Adresse im data-rc-checkout-link? Ruf sie direkt im Browser auf, wenn dort nichts kommt, liegt es am Flow, nicht an der Einbettung.
3. Steht der Flow auf Deaktiviert? Dann liefert die Adresse „Seite nicht gefunden" und die Einbettung bleibt leer.
4. Blockiert eine Erweiterung im Browser das Skript? Im privaten Fenster ohne Erweiterungen gegenprüfen.

Eigene Domain#

Standardmäßig läuft der Checkout unter dein-shop.rabbit-checkout.de. Für Pro-Kunden ist eine eigene Domain auf Anfrage möglich, dann liegt auch der eingebettete Checkout auf deiner Domain. Schreib dafür den Support an.