Den Buchen-Button auf Ihrer Website installieren

Dafür brauchen Sie keinen Programmierer, und Sie müssen den Code nicht verstehen. Sie kopieren zwei Textstücke aus Rentalbuddy und fügen sie in Ihre Website ein. Diese Anleitung erklärt genau, wohin jedes davon gehört und was zu tun ist, wenn der Button nicht auftaucht.

Die beiden Teile und warum Sie beide brauchen

Teil	Was er tut	Wohin er gehört
Buchungs-Engine-Code kopieren (das Script)	Lädt Rentalbuddy auf Ihrer Website	Einmal für die ganze Website, in Ihre seitenweiten Code-/Footer-Einstellungen
Button-Code kopieren (der Button)	Markiert genau die Stelle, an der der Button erscheinen soll	Auf der Seite, auf der Sie den Button haben möchten

Keiner der beiden funktioniert allein. Das Script ohne Button-Code lädt Rentalbuddy, zeigt aber nichts. Der Button-Code ohne Script hinterlässt eine leere Stelle auf der Seite. Das ist der häufigste Fehler — Betreiber kopieren nur den Button-Code und wundern sich, warum nichts passiert. (Die eine Ausnahme: E-Mail-Links zum Entsperren oder Verlängern einer Buchung funktionieren ohne Button.)

Bevor Sie beginnen

Der Buchen-Button wird je Standort eingerichtet — führen Sie das also für jeden Standort durch, der einen Button auf Ihrer Website haben soll.

Schritt 1 — Die Einrichtung des Buchen-Buttons öffnen

1. Öffnen Sie im linken Menü Standorte.
2. Klicken Sie den gewünschten Standort an.
3. Öffnen Sie den Tab Buchen-Button.

Schritt 2 — Wählen, wie Kunden buchen

Wählen Sie unter Wo buchen Kunden? die Option Meine eigene Website.

Wählen Sie dann unter Wie buchen Kunden über Ihre Website? die Option Auf Ihrer Website eingebettet — das ist die Option, die Ihnen den Button-Code liefert. (Die andere Option, Buchungslink, gibt Ihnen lediglich einen Link auf eine von Rentalbuddy gehostete Seite und braucht überhaupt keinen Code. Wenn Sie sich mit dem Einbau von Code unsicher sind, ist das eine völlig gute Alternative.)

Schritt 3 — Rentalbuddy mitteilen, welchen Website-Baukasten Sie nutzen

Wählen Sie unter Welchen Website-Baukasten nutzen Sie? Ihren Baukasten aus der Liste — WordPress (drei Varianten), Wix, Squarespace, GoDaddy Website Builder, Webflow, Jimdo, IONOS (MyWebsite) oder Sonstiges / Ich bin mir nicht sicher.

Das ändert den Code nicht. Es ändert die Anweisungen, die neben jedem Schritt angezeigt werden, sodass sie zu den Menüs Ihres Baukastens passen. Wählen Sie Sonstiges / Ich bin mir nicht sicher, wenn nichts passt — Sie bekommen trotzdem allgemeine Anweisungen.

Schritt 4 — Das Script zu Ihrer Website hinzufügen (einmalig)

Klicken Sie im Schritt Buchungs-Engine auf Ihrer Website hinzufügen auf Buchungs-Engine-Code kopieren. Sie erhalten eine einzelne Zeile, die so aussieht:

<script defer src="https://plugin.rentalbuddy.io/static/js/main.js"></script>

Nutzen Sie immer die Kopieren-Schaltfläche, statt das von Hand abzutippen — die Kopie enthält genau die Adresse, die Ihr Konto verwendet.

Fügen Sie sie in den seitenweiten Codebereich Ihrer Website ein, ans Ende des Seiten-Body. In Website-Baukästen heißt dieses Feld meist Custom Code, Header-/Footer-Code, Tracking-Scripts oder etwas, das "vor </body>" erwähnt. Der Wortlaut von Rentalbuddy unter diesem Schritt: "Lädt Rentalbuddy auf Ihrer Website. Fügen Sie dies einmal pro Webadresse ein."

Ungefähr dort sollten Sie in den gängigen Baukästen suchen (Menünamen ändern sich, betrachten Sie das also als Ausgangspunkt):

• WordPress — WordPress hat kein eingebautes Feld dafür. Die Anleitung im Produkt empfiehlt, ein kleines kostenloses Plugin wie Insert Headers and Footers oder WPCode zu installieren und dessen Footer- beziehungsweise "vor </body>"-Feld zu nutzen. Wenn Sie ein Cache-Plugin verwenden, leeren Sie nach dem Speichern den Cache.
• Wix — Site & app settings → Custom code (manchmal unter Tracking & Analytics), Platzierung Body – end, angewendet auf alle Seiten.
• Squarespace — Settings → Advanced → Code injection → Footer. Nicht alle Squarespace-Tarife enthalten Code-Injection.

Speichern und veröffentlichen Sie danach Ihre Website.

Fügen Sie das Script nur einmal ein. Zusätzliche Kopien werden ignoriert, ein Duplikat richtet also keinen Schaden an — aber es verlangsamt die Seite und macht unklar, welche Kopie Sie ersetzen müssen, wenn Sie später die weiter unten beschriebene Cookie-Banner- oder async-Variante brauchen. Wenn Sie nicht sicher sind, ob es schon vorhanden ist, durchsuchen Sie Ihre seitenweiten Code-Felder nach rentalbuddy, bevor Sie eine weitere Kopie einfügen.

Eine Website mit mehreren Seiten: einmal einfügen, seitenweit. Mehrere getrennte Websites: einmal auf jeder Website einfügen.

Schritt 5 — Ihre Website-Adresse eintragen

Im Schritt Button dort platzieren, wo er erscheinen soll finden Sie das Feld URL, unter der die Buchschaltfläche implementiert ist. Tragen Sie die vollständige Adresse der Seite ein, auf der Ihr Button stehen wird — zum Beispiel https://ihre-seite.de/buchen.

Regeln, die das System durchsetzt:

• Sie muss mit https:// oder http:// beginnen. Ohne das schlägt das Speichern fehl mit "Die URL muss mit https:// oder http:// beginnen."
• Sie darf kein ? enthalten. Das passiert meist, wenn Sie einen Vorschau- oder Testlink einfügen. Löschen Sie alles ab dem ?.
• Sie ist verpflichtend. Ohne sie können Sie den Standort im eingebetteten Modus nicht speichern.

Dieses Feld ist wichtiger, als es aussieht. Rentalbuddy baut die Links, die es in E-Mails versendet — Vermietung starten, Rückgabe, Verlängerung, Verschiebung — aus dieser Adresse plus Zusatzinformationen. Zeigt die Adresse auf eine Seite ohne Button-Code, landen Ihre Kunden auf dieser Seite und erreichen nie ihren PIN-Code oder den Rückgabeschritt. Ändern Sie die Adresse mitten in der Saison, zeigen bereits versendete Links weiterhin auf die alte Seite.

Schritt 6 — Den Button auf die Seite setzen

Klicken Sie, weiterhin in Button dort platzieren, wo er erscheinen soll, auf Button-Code kopieren neben Standardbuchung. Sie erhalten eine Zeile wie diese:

<div id="rentalbuddy-checkout" data-site="your-location-id"></div>

Fügen Sie sie in die Seite selbst ein — in einen HTML-, Embed- oder Code-Block in Ihrem Seiteneditor, genau an die Stelle, an der der Button erscheinen soll. Nicht in die seitenweiten Einstellungen; dorthin gehörte das Script aus Schritt 4.

Unter Erweitert (nur bei Bedarf) gibt es zwei weitere Button-Codes: Produktbuchung und Eventbuchung. Nutzen Sie diese nur, wenn Ihr Standort sowohl Produkte als auch Events anbietet und Sie einen Button möchten, der die Auswahl überspringt. Ansonsten ist Standardbuchung der richtige.

Speichern und veröffentlichen Sie die Seite.

Schritt 7 — Prüfen

1. Klicken Sie in Rentalbuddy auf Speichern.
2. Klicken Sie Vorschau neben der Buchungsoption — es öffnet Ihre Website in einem neuen Tab mit dem Buchungsablauf, sodass Sie prüfen können, ob die Einbettung funktioniert.
3. Öffnen Sie Ihre Seite außerdem ganz normal in einem privaten Fenster / Inkognitofenster, damit Sie sie sehen wie ein Kunde und nicht aus dem Cache.

Text und Aussehen des Buttons

Zwei Dinge am Aussehen des Buttons überraschen fast jeden.

Wenn Sie nie einen Text setzen, steht auf dem Button BOOK — in Großbuchstaben. Das ist die eingebaute Ersatzbeschriftung und keine Gestaltungsentscheidung von Ihnen. Geben Sie ihm im selben Tab unter Button-Text eine richtige Beschriftung:

• Für diesen Standort: Schalten Sie Für diesen Standort anpassen ein und füllen Sie Standardtext aus. Unter Erweiterte Einstellungen gibt es getrennte Felder Text für Produkt / Text für Veranstaltung für die erweiterten Button-Codes.
• Für alle Standorte auf einmal: Nutzen Sie Text für Konto bearbeiten.

Zwei Verhaltensweisen sollten Sie kennen. Ist Für diesen Standort anpassen ausgeschaltet, werden die Kontotexte verwendet und die Standortfelder gar nicht erst angezeigt. Und wenn Sie bei eingeschaltetem Schalter alle Standortfelder leeren, fällt es ebenfalls stillschweigend auf die Kontotexte zurück.

Das Stylesheet Ihrer eigenen Website kann den Button umgestalten. Der Button ist ein einfaches Button-Element auf Ihrer Seite. Seine Farben und Schriften werden direkt am Element gesetzt, gewöhnliche Seitenstile ändern diese also nicht — aber Regeln mit !important und Eigenschaften, die der Button nicht selbst setzt (etwa die Großschreibung des Textes), schlagen durch. Erscheint der Text also in Großbuchstaben, obwohl Sie normale Buchstaben eingegeben haben, liegt das an Ihrem Stylesheet, nicht an Rentalbuddy. Nutzen Sie Button-Styling (derselbe Tab), um sein Aussehen ausdrücklich festzulegen, und prüfen Sie das Ergebnis mit Vorschau.

Änderungen an Text und Styling erfordern kein erneutes Kopieren von Code — sie wirken beim nächsten Laden der Seite.

Was die rote Markierung wirklich bedeutet

Der Tab Buchen-Button (und die Spalte Buchen-Button-URL in der Standortliste) zeigt eine rote Markierung, bis die Einrichtung abgeschlossen ist — und Betreiber kämpfen wegen eines Missverständnisses regelmäßig an der falschen Stelle dagegen an:

Die rote/grüne Markierung schaut nie auf Ihre Website. Rentalbuddy ruft Ihre Seite nicht auf und erkennt nicht, ob der Code eingebaut ist. Die Markierung spiegelt nur wider, was in der Verwaltung gespeichert ist:

• Auf Ihrer Website eingebettet: grün, sobald eine gültige URL, unter der die Buchschaltfläche implementiert ist gespeichert ist (beginnt mit http(s)://, kein ?).
• Buchungslink: immer grün.
• Die Option der von Rentalbuddy gehosteten Website: grün, sobald diese Website eingeschaltet ist.

Wenn die Markierung also "rot bleibt, obwohl der Button auf unserer Seite steht": Die Website spielt keine Rolle — die Ursache ist ein nicht gespeichertes, leeres oder ungültiges URL-Feld. Füllen Sie es aus, drücken Sie Speichern, und es kippt um. Der Tooltip sagt Ihnen, welcher Fall vorliegt: "Wählen Sie, wie Kunden buchen, und schließen Sie die Einrichtung des Buchen-Buttons ab." (nichts gewählt oder URL fehlt) oder "Die URL muss mit https:// oder http:// beginnen." Umgekehrt beweist eine grüne Markierung nicht, dass der Code auf Ihrer Seite liegt — Vorschau ist das Werkzeug, das Ihre Seite tatsächlich öffnet und zeigt, ob der Button funktioniert.

Häufige Stolperfallen

Ein Cookie-Banner blockiert das Script

Wenn Sie ein Cookie-Banner nutzen, hält es das Rentalbuddy-Script möglicherweise zurück, bis der Besucher Cookies akzeptiert — der Button erscheint dann spät oder gar nicht. Rentalbuddy warnt genau davor: "Wenn der Buchungsbutton nicht erscheint und Sie ein Cookie-Banner verwenden, blockiert Ihre Website das Script möglicherweise, bis Besucher Cookies akzeptieren."

Unter Erweitert (nur bei Bedarf) → Cookie-Einwilligungstools gibt es fertige Varianten des Scripts für zwei verbreitete Tools: Für Cookiebot kopieren und Für OneTrust kopieren. Ersetzen Sie das in Schritt 4 eingefügte Script durch die passende Variante.

Für jedes andere Cookie-Tool: Markieren Sie in den Einstellungen Ihres Cookie-Banners das Buchungsscript (oder den Host plugin.rentalbuddy.io) als unbedingt erforderlich beziehungsweise essenziell. Einzelne Cookies müssen Sie nicht neu kategorisieren.

Der Button erscheint, verhält sich aber merkwürdig

Unter Erweitert (nur bei Bedarf) → Script-Laden können Sie zwei alternative Varianten desselben Scripts kopieren: Mit async kopieren und Ohne defer kopieren. Probieren Sie eine davon statt der Standardvariante — auch hier: die bereits eingefügte Kopie ersetzen, niemals eine weitere hinzufügen.

Sie möchten einen Button auf einer zweiten Seite

Das Script ist bereits seitenweit geladen, Sie brauchen also nur den Button-Code. Fügen Sie denselben Button-Code in einen HTML-/Embed-Block auf der anderen Seite ein.

Beachten Sie, dass das Feld URL, unter der die Buchschaltfläche implementiert ist genau eine Adresse je Standort aufnimmt. Wählen Sie die Seite, auf die Kunden aus Buchungs-E-Mails geschickt werden sollen — das ist die Seite, die die E-Mail-Links öffnen.

Sie möchten einen Button auf einer zweitsprachigen Version Ihrer Seite

Wie oben: Fügen Sie den Button-Code in die Sprachversion der Seite ein. Liegt die zweite Sprache auf einer eigenen Website (einer anderen Domain), braucht diese Website ihre eigene Kopie des Scripts.

Welche Sprachen das Buchungsfenster selbst anbietet, ist eine separate Einstellung am Standort — siehe Kontoeinstellungen — wo jede Einstellung zu finden ist.

Sie haben mehr als einen Standort

Jeder Standort hat seinen eigenen Button-Code (der Wert data-site unterscheidet sich) und seine eigene Website-Adresse. Kopieren Sie den Button-Code aus dem Tab Buchen-Button des jeweiligen Standorts. Das Script selbst ist für alle gleich und kommt daher weiterhin nur einmal je Website hinein.

Checkliste: der Button erscheint nicht

Arbeiten Sie diese Liste der Reihe nach ab.

1. Sind beide Teile installiert? Das Script in den seitenweiten Einstellungen und der Button-Code auf der Seite. Ein fehlendes Script ist die häufigste Ursache.
2. Haben Sie veröffentlicht? Die meisten Baukästen brauchen nach dem Speichern ein ausdrückliches Veröffentlichen/Aktualisieren, und Cache-Plugins müssen geleert werden.
3. Ist das Script mehrfach vorhanden? Durchsuchen Sie Ihre seitenweiten Code-Felder nach rentalbuddy. Entfernen Sie alle Kopien bis auf eine.
4. Ist der Standort auf eingebettete Buchung gestellt? Öffnen Sie Standorte → den Standort → Buchen-Button und prüfen Sie, dass Meine eigene Website → Auf Ihrer Website eingebettet gewählt und gespeichert ist. Zeigt der Tab Buchen-Button eine rote Warnung, ist die gespeicherte Einrichtung unvollständig — siehe Was die rote Markierung wirklich bedeutet weiter oben; es geht um das gespeicherte URL-Feld, nie um Ihre Website.
5. Ist die Website-Adresse gültig? Sie muss mit https:// beginnen, darf kein ? enthalten und sollte die Seite sein, die tatsächlich den Button-Code enthält.
6. Blockiert ein Cookie-Banner? Probieren Sie die Cookiebot- oder OneTrust-Variante des Scripts oder markieren Sie es in Ihrem Cookie-Tool als unbedingt erforderlich.
7. Probieren Sie eine andere Ladeoption. Tauschen Sie das Script gegen die async- oder die ohne defer-Variante.
8. Prüfen Sie auf einem Telefon und in einem privaten Fenster. Zwischengespeicherte Seiten und Browser-Erweiterungen können den Button verbergen.
9. Ist überhaupt etwas buchbar? Der Button kann korrekt installiert sein und trotzdem nichts zu verkaufen haben, wenn der Standort keinen offenen Zeitraum oder keine Produkte hat. Der Kunde sieht in diesem Fall kein leeres Fenster — er sieht "Diese Mietstation ist derzeit nicht buchbar." mit den Kontaktdaten Ihres Standorts. Siehe Öffnungszeiten und offene Termine und Kunden sehen keine verfügbaren Zeiten oder gar keine Produkte.
10. Kommen Sie immer noch nicht weiter? Schicken Sie dem Support Ihre Seitenadresse und nennen Sie Ihren Baukasten — das sind die beiden Angaben, von denen alles Obige abhängt.