Widget einbetten

Das MonteurBook-Widget lässt sich auf jeder Website einbetten – egal ob WordPress, Jimdo, Wix oder eine eigene Seite. Du brauchst nur einen kleinen Code-Schnipsel, den du einmal kopierst und einfügst.

Gehe zu Objekte in der Seitenleiste.
Öffne das Objekt, für das du das Widget einbetten möchtest.
Wechsle zum Tab Veröffentlichung.
Scrolle nach unten zum Abschnitt Widget einbetten. Dort steht ein fertiger Code-Schnipsel, der bereits auf dieses Objekt vorkonfiguriert ist.

Ein Code pro Objekt

Der Schnipsel gehört zu genau dem Objekt, in dem du ihn kopierst. Wenn du mehrere Unterkünfte vermietest, hol dir für jede ihren eigenen Code – sonst zeigen beide Seiten dieselbe Unterkunft.

Schritt 2: Code kopieren

Klicke auf den Button Code kopieren unter dem Code-Schnipsel. Der gesamte Code wird in deine Zwischenablage kopiert.

Der Code sieht in etwa so aus:

<iframe
  src="https://app.monteurbook.de/embed/dein-objekt-slug"
  width="100%"
  height="700"
  frameborder="0"
  style="border:none;"
></iframe>

Tipp

Der Code ist bereits individuell für dein Objekt vorkonfiguriert. Du musst nichts daran ändern.

Über dem Code-Block steht ein Kontrollkästchen „Badge ‚Gelistet auf MonteurBook‘ unter dem Widget anzeigen“. Ist es gesetzt, hängt der kopierte Schnipsel eine kleine Zeile hinter den Rahmen:

<p style="margin:8px 0 0;text-align:center;font:12px/1.4 system-ui,sans-serif"><a href="https://monteurbook.de/monteurzimmer/region/objekt-slug" rel="nofollow" target="_blank">Gelistet auf MonteurBook</a></p>

Dahinter steckt nicht mehr als ein Link auf die eigene Unterkunftsseite bei MonteurBook. Das Kontrollkästchen ist standardmäßig leer, der Badge also freiwillig — Website und Widget funktionieren genauso gut ohne. Angeboten wird er erst, sobald das Objekt veröffentlicht ist: Vorher gibt es die Unterkunftsseite noch nicht, auf die er zeigen würde.

Schritt 3: Code auf deiner Website einfügen

Wie du den Code einfügst, hängt von deinem Website-System ab:

WordPress

Öffne den Beitrags- oder Seiten-Editor.
Füge einen neuen Block vom Typ Benutzerdefiniertes HTML (oder „HTML") hinzu.
Füge den kopierten Code in diesen Block ein.
Speichere oder veröffentliche die Seite.

Jimdo

Gehe zum Seiteneditor und klicke auf + um ein neues Element hinzuzufügen.
Wähle Widget/HTML.
Füge den Code ein und klicke auf Fertig.

Wix

Klicke in deinem Wix-Editor auf + → Mehr → HTML iframe.
Klicke auf Code eingeben und füge den Code ein.
Passe die Größe des Elements nach Bedarf an.

Eigene Website (HTML)

Füge den Code direkt an der Stelle in deiner HTML-Datei ein, an der das Widget erscheinen soll.

Empfohlene Maße

Breite: 100% (passt sich dem Container an)
Höhe: 700 px (ausreichend für Kalender + Buchungsformular)

Wichtig

Stelle sicher, dass der Bereich auf deiner Website mindestens 400 px breit ist. Auf sehr schmalen Containern kann das Widget abgeschnitten wirken.

Nachdem du den Code eingefügt hast, lade die Seite neu und prüfe:

Wird der Kalender angezeigt?
Sind die Zimmer sichtbar?
Kann eine Test-Anfrage abgeschickt werden?

Test-Anfragen kannst du danach im Dashboard unter Buchungen ablehnen oder stornieren.

Wenn im Rahmen eine Meldung steht

Das Widget sagt dir, was los ist, statt einfach leer zu bleiben:

Meldung im Rahmen	Was dahintersteckt
Zurzeit nicht buchbar	Das Objekt ist gerade nicht veröffentlicht. Der Code stimmt und greift von selbst wieder, sobald die Veröffentlichung steht.
Unterkunft nicht gefunden	Die Adresse im Code führt zu keiner Unterkunft – meist ein Tippfehler oder ein unvollständig kopierter Schnipsel. Hol ihn dir noch einmal frisch aus dem Dashboard.
Nicht mehr verfügbar	Das Vermieter-Konto wurde gelöscht. Das Widget kommt nicht von selbst zurück.
Buchung gerade nicht erreichbar	Eine vorübergehende Störung. Über den Knopf im Rahmen lässt sich der Abruf wiederholen.

Bau den Code nicht selbst nach

Kopiere den Schnipsel immer aus dem Dashboard. Eine selbst zusammengesetzte oder geratene Adresse trifft dein Objekt nicht, und der Rahmen bleibt leer oder zeigt eine Fehlerseite.

Widget einbetten

Schritt 1: Widget-Code im Dashboard finden