Checkout einbetten

Den Einbettungscode kopieren und auf der eigenen Seite einsetzen, in WordPress, im Baukasten oder in reinem HTML. Wie es funktioniert 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 auf Einbettungscode abrufen (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

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 und wird von deinem bestehenden Cookie-Banner abgedeckt. Schreib dafür den Support an.