Buchungs-Widget in deine Website einbinden
Mit dem Miet-Flow Widget können deine Kunden direkt auf deiner eigenen Website Geräte anfragen – ohne Weiterleitung, ohne extra App. Einbinden dauert 5 Minuten.
Auf jeder Website
Funktioniert mit WordPress, Jimdo, Wix, Squarespace und jeder anderen Website.
Mobilfreundlich
Das Widget passt sich automatisch an Smartphone und Tablet an.
Immer aktuell
Änderungen an Preisen und Geräten in Miet-Flow sind sofort im Widget sichtbar.
So bindest du das Widget ein
Embed-Code kopieren
Öffne in Miet-Flow Einstellungen → Buchungs-Shop. Unter „Buchungs-Widget einbetten" stellst du ein, was zu sehen sein soll – etwa ohne Kopfzeile, kompakt oder nur mit bestimmten Kategorien. Der Code darunter passt sich sofort an. Klicke auf „Kopieren".
DEIN-SHOP wird automatisch durch deine Shop-URL ersetzt. Das Skript sorgt dafür, dass der Rahmen genau so hoch wird wie sein Inhalt und ein Buchungsfenster über der ganzen Seite aufgeht statt im Rahmen.
Code in deine Website einfügen
Füge den Code in deine Website ein – wie das genau funktioniert, hängt von deinem Website-Baukasten ab. Weiter unten findest du die Anleitung für die gängigsten Systeme.
Speichern und testen
Speichere die Änderung auf deiner Website und öffne die Seite im Browser. Das Buchungsformular sollte jetzt sichtbar sein. Mache eine Test-Anfrage, um sicherzugehen, dass alles funktioniert.
Anleitung für dein Website-System
WordPress (Gutenberg-Editor)
- Öffne die Seite, auf der das Widget erscheinen soll, im Editor.
- Klicke auf das +-Symbol, um einen neuen Block hinzuzufügen.
- Suche nach „Benutzerdefiniertes HTML" und wähle den Block aus.
- Füge deinen kopierten Embed-Code in das Textfeld ein.
- Klicke auf „Aktualisieren" oder „Veröffentlichen".
WordPress (Classic Editor)
- Öffne die Seite im Classic Editor.
- Wechsle oben rechts vom Tab „Visuell" zu „Text".
- Füge den Embed-Code an der gewünschten Stelle im Text ein.
- Wechsle zurück zu „Visuell" – das Widget wird als grauer Platzhalter angezeigt.
- Klicke auf „Aktualisieren".
Jimdo
- Öffne deine Website im Jimdo-Editor.
- Klicke auf „+" an der Stelle, wo das Widget erscheinen soll.
- Wähle „Widget/HTML" aus der Elementliste.
- Füge den Embed-Code in das erscheinende Textfeld ein.
- Klicke auf „Speichern" und anschließend auf „Veröffentlichen".
Wix
- Öffne den Wix Editor und navigiere zur gewünschten Seite.
- Klicke auf „+" → „Weitere" → „HTML-Code".
- Ein HTML-Element erscheint auf der Seite. Klicke darauf, dann auf „Code eingeben".
- Füge deinen Embed-Code ein und klicke auf „Übernehmen".
- Passe die Größe des Elements auf deiner Seite an und speichere.
Squarespace
- Öffne den Squarespace Editor und wähle den gewünschten Abschnitt.
- Klicke auf „Inhaltsblock hinzufügen".
- Wähle den Block „Code".
- Füge den Embed-Code in das Textfeld ein und stelle sicher, dass der Modus auf „HTML" steht.
- Klicke auf „Übernehmen" und veröffentliche die Seite.
Reines HTML / eigene Website
- Öffne die HTML-Datei der gewünschten Seite in einem Texteditor.
- Füge den Embed-Code an der gewünschten Position innerhalb des
<body>-Tags ein. - Speichere die Datei und lade sie auf deinen Webserver hoch (z. B. via FTP).
- Öffne die Seite im Browser und teste das Widget.
Widget anpassen
Höhe
Darum musst du dich nicht kümmern: Der Rahmen wird genau so hoch wie sein Inhalt und passt sich an, wenn jemand nach Kategorien filtert. Es gibt keinen zweiten Scrollbalken im Widget.
Nur bei der Alternative ohne <script> bleibt die Höhe fest bei height="700" und lässt sich dort von Hand ändern.
Aussehen
Farbe und Hintergrund des Widgets stellst du in Miet-Flow unter Einstellungen → Buchungs-Shop → Farbe des Shops ein – sie gelten für den Shop und das Widget gemeinsam. Was im Widget sichtbar ist (Kopfzeile, Fußzeile, Suchfeld, Kategorien), stellst du direkt beim Einbettcode ein.
Ohne Rahmen, feste Breite
Ergänze am <div> weitere Angaben:
data-breite="900px"← mittig begrenzen
Wenn dein Baukasten kein <script> erlaubt
Dann nimm diese Fassung. Sie funktioniert überall, hat aber eine feste Höhe mit eigenem Scrollbalken, und ein Buchungsfenster öffnet sich innerhalb des Rahmens statt über der Seite:
Diesen Code findest du in Miet-Flow unter dem empfohlenen Code hinter „Mein Baukasten erlaubt kein <script>".
Nur auf bestimmten Seiten einbinden
Binde das Widget nur auf der Seite ein, die für Buchungen vorgesehen ist – z. B. eine eigene Unterseite „Geräte mieten". So bleibt deine Website übersichtlich.
Häufige Fragen
Das Widget wird nicht angezeigt – was tun?
Überprüfe zuerst, ob dein Shop in Miet-Flow unter Einstellungen → Buchungs-Shop aktiviert ist. Prüfe außerdem, ob der Embed-Code vollständig eingefügt wurde (kein Text wurde beim Kopieren abgeschnitten). In manchen Website-Baukästen muss HTML-Code explizit als „HTML-Block“ eingefügt werden – der normale Text-Editor wandelt spitze Klammern automatisch um.
Kann ich das Widget auf mehreren Seiten einbinden?
Ja. Du kannst denselben Embed-Code beliebig oft auf verschiedenen Seiten oder sogar auf verschiedenen Websites einbinden. Alle Buchungsanfragen landen in Miet-Flow bei dir.
Werden Buchungen aus dem Widget sofort in Miet-Flow angezeigt?
Ja. Jede Buchungsanfrage über das Widget erscheint sofort unter Vermietungen in Miet-Flow mit dem Status „Anfrage". Du erhältst außerdem eine E-Mail-Benachrichtigung und (wenn aktiviert) eine Push-Benachrichtigung auf dein Smartphone.
Mein Website-Baukasten erlaubt kein <script> – was kann ich tun?
Nimm die Alternative ohne Skript: In Miet-Flow steht sie unter dem empfohlenen Code hinter „Mein Baukasten erlaubt kein <script>". Sie ist ein reines iframe und funktioniert überall, hat dafür aber eine feste Höhe. Sperrt dein Tarif HTML ganz, verlinke stattdessen direkt auf miet-flow.de/shop/DEIN-SHOP – der öffnet sich in einem neuen Tab.
Kann ich das Aussehen des Widgets anpassen?
Ja. Logo und Firmendaten übernimmt das Widget automatisch aus deinen Einstellungen. Farbe und Hintergrund wählst du unter Einstellungen → Buchungs-Shop → Farbe des Shops – auch dunkle Hintergründe sind möglich, das Widget stellt dann auf helle Schrift um. Was sichtbar ist (Kopfzeile, Fußzeile, Suchfeld, Kategorien), stellst du direkt beim Einbettcode ein. Eigenes CSS lässt sich nicht einschleusen.
Meine Website hat eine strenge Content-Security-Policy – was muss ich freigeben?
Zwei Einträge: script-src https://miet-flow.de für das Loader-Skript und frame-src https://miet-flow.de für den Rahmen selbst. Wenn du nicht weißt, ob deine Website eine CSP hat, hat sie vermutlich keine – dann musst du nichts tun.
Kann ich im Widget nur bestimmte Artikel zeigen?
Ja, nach Kategorie. Beim Einbettcode kannst du auswählen, welche Kategorien erscheinen sollen – so bindest du z. B. auf einer Seite „Zelte mieten" nur die Zelte ein. Zubehör bleibt dabei immer verfügbar, damit die Preise im Buchungsfenster stimmen.
Embed-Code jetzt holen
Öffne deine Miet-Flow Einstellungen und kopiere den fertigen Widget-Code direkt aus dem Dashboard.