Was das eingebettete Buchungssystem leistet

Smoobu bietet neben der gehosteten Buchungsseite (unter einer smoobu.com-Subdomain) auch ein einbettbares Widget: eine Iframe-Version derselben Seite, die du in eine beliebige Unterseite deiner eigenen Website einfügen kannst. Der Kalender zeigt Live-Verfügbarkeit aus Smoobu, Gäste wählen Daten, geben Gästedaten ein und zahlen per Stripe oder PayPal — alles ohne die Website zu verlassen.

Das ist der schnellste Weg zu einem funktionierenden Buchungssystem auf der eigenen Domain, wenn du keine eigene Verfügbarkeitslogik programmieren willst. Der Nachteil: Du bewegst dich innerhalb der Design- und Layout-Grenzen, die Smoobu für das Widget vorgibt — für ein vollständig eigenes Kalender-Design brauchst du stattdessen eine Anbindung über die Smoobu-API.

Schritt 1 — Voraussetzungen prüfen

Bevor du den Embed-Code suchst, stelle sicher, dass folgende Punkte erfüllt sind:

Mindestens eine Unterkunft ist in Smoobu angelegt und mit einem Kalender verbunden.
Das Online-Buchungstool (manchmal "Buchungsseite" oder "Booking Engine" genannt) ist in deinem Smoobu-Plan enthalten — prüfe das aktuell unter smoobu.com/pricing, da sich Plannamen und -umfang ändern können.
Eine Zahlungsmethode (Stripe oder PayPal) ist mit deinem Smoobu-Konto verbunden, damit Gäste direkt bezahlen können.

Wichtig: Die genaue Bezeichnung und Position dieser Einstellung kann sich je nach Smoobu-Planstufe und Kontosprache leicht unterscheiden. Suche im Zweifel im Smoobu-Hilfecenter nach "Booking Widget" oder "Online Booking Tool", falls du den Menüpunkt nicht sofort findest.

Schritt 2 — Buchungsseite in Smoobu einrichten

In Smoobu: gehe zu Einstellungen → Online-Buchungstool (bzw. "Buchungsseite" oder "Booking Widget", je nach Kontosprache).
Wähle die Unterkünfte aus, die auf der Buchungsseite erscheinen sollen — bei nur einer Wohnung reicht die Standardauswahl.
Passe Logo, Akzentfarbe und Sprache an dein Branding an. Die verfügbaren Design-Optionen hängen vom Plan ab.
Stelle die Standardsprache und Standardwährung auf die Zielgruppe deiner Website ein (z. B. Deutsch/Euro für eine .de-Domain).
Speichern und über die Vorschau-Funktion prüfen, ob Kalender und Preise korrekt angezeigt werden.

Diese Einstellungen gelten für die gehostete Buchungsseite und für das Embed-Widget gleichermaßen — du konfigurierst sie nur einmal.

Schritt 3 — Embed-Code kopieren

Sobald die Buchungsseite eingerichtet ist, generiert Smoobu einen Iframe-Code, den du auf jeder beliebigen Website einfügen kannst.

Suche in denselben Einstellungen (Online-Buchungstool) nach dem Abschnitt "Widget einbetten" oder "Embed-Code".
Kopiere den bereitgestellten HTML-Code — meist ein <iframe>-Tag mit einer eindeutigen URL für deine Buchungsseite.
Manche Konten bieten zusätzlich eine reine Link-Variante (Button "Jetzt buchen" verlinkt auf die gehostete Seite) als einfachere Alternative zum Iframe.
Bewahre den Code an einem sicheren Ort auf, falls du ihn später auf einer weiteren Unterseite oder für eine zweite Unterkunft brauchst.

Der Iframe-Code enthält eine eindeutige ID für dein Smoobu-Konto — teile ihn nicht öffentlich in Foren oder Support-Tickets, da darüber theoretisch auf deine Buchungsseite zugegriffen werden kann.

Schritt 4 — Iframe in die eigene Website einbauen

Wie du den Code einfügst, hängt vom verwendeten Website-Baukasten ab. Die häufigsten Fälle:

Selbst gehostetes HTML/CSS (z. B. Astro, Next.js, statisches HTML): füge den <iframe>-Code direkt in die Seitenvorlage ein, z. B. auf einer eigenen Unterseite "/buchen". Setze eine feste Mindesthöhe per CSS (min-height: 800px), damit der Kalender nicht abgeschnitten wird.
WordPress: füge auf der Zielseite einen "Custom HTML"-Block (Gutenberg) oder ein Shortcode/HTML-Widget (Classic Editor) ein und füge den Iframe-Code dort ein. Manche Page-Builder wie Elementor haben ein eigenes "HTML"-Element für genau diesen Zweck. Alternativ gibt es für WordPress das offizielle Smoobu-Plugin mit nativem Block/Shortcode statt Iframe.
Wix: im Editor über "Element hinzufügen" → "Einbetten" → "HTML iframe" ein Embed-Element platzieren und den Smoobu-Code einfügen. Wix begrenzt die Embed-Höhe standardmäßig — die Höhe im Element-Einstellungsfeld manuell erhöhen.
Squarespace: einen "Code"-Block auf der Zielseite einfügen (nicht "Embed" — der Code-Block erlaubt volles HTML) und den Iframe-Code einfügen. Squarespace-Templates mit strikter Content Security Policy können das Einbetten in seltenen Fällen blockieren.

Teste nach dem Einbau auf einem echten Smartphone, nicht nur in der Desktop-Vorschau des Baukastens — der Smoobu-Kalender ist zwar responsiv, aber ein zu niedrig gesetzter Iframe schneidet auf kleinen Bildschirmen trotzdem Inhalte ab.

→ Anleitung: Smoobu-Plugin für WordPress einrichten

Tipp zur Höhe: Da Iframes die Höhe ihres Inhalts nicht automatisch übernehmen, führt eine zu knapp bemessene Höhe zu einer inneren Scrollbar, die auf Mobilgeräten unbequem ist. Setze die Höhe lieber etwas großzügiger (900–1100px) und teste dann, ob eine Scrollbar überhaupt noch nötig ist.

Alternative: Anbindung über die Smoobu-API

Das Iframe-Widget ist die schnellste Lösung, hat aber Grenzen: Du kannst weder das HTML-Markup des Kalenders anpassen noch eigene Zwischenschritte (z. B. Vertrauenssignale, Cross-Selling, individuelle Formularfelder) einbauen. Wenn dir das wichtig ist, ist eine Direktanbindung über die Smoobu-API der nächste Schritt — dabei baust du eine eigene Buchungsstrecke, die Verfügbarkeit und Preise live aus Smoobu abruft und die Zahlung selbst über Stripe abwickelt.

Das ist deutlich aufwendiger als das Einbetten des Widgets (typischerweise ein eigenständiges Entwicklungsprojekt), lohnt sich aber, sobald Direktbuchungen ein relevanter Teil deines Umsatzes werden und die Konversion auf der Website zählt.

Häufige Probleme beheben

Der Kalender zeigt ein Objekt als "nicht verfügbar", obwohl es frei ist

Prüfe zuerst, ob die Buchungsseite in Smoobu auf das richtige Objekt bzw. die richtigen Objekte eingestellt ist. Zweithäufigste Ursache: eine Blockierung durch einen anderen Kanal (z. B. eine manuell gesetzte Sperre oder ein noch nicht synchronisierter iCal-Import) wirkt sich auch auf das eingebettete Widget aus, da beide dieselbe Verfügbarkeit aus Smoobu ziehen. Prüfe den Kalender direkt im Smoobu-Dashboard auf Sperren für den betroffenen Zeitraum.

Der Iframe hat eine unschöne innere Scrollbar oder wird abgeschnitten

Das passiert, wenn die im HTML gesetzte Höhe (height-Attribut oder CSS min-height) kleiner ist als der tatsächliche Inhalt des Kalenders. Erhöhe die Höhe auf 900–1100px als Ausgangswert und passe sie nach einem Test auf Mobilgeräten weiter an. Iframes übernehmen die Höhe ihres Inhalts nicht automatisch — das ist eine technische Einschränkung von Iframes generell, keine Smoobu-spezifische.

Farben oder Sprache des Widgets stimmen nicht mit der Website überein

Design und Sprache des Widgets werden zentral in Smoobu unter Einstellungen → Online-Buchungstool festgelegt, nicht über den Embed-Code selbst. Ändere sie dort — die Änderung wirkt sich automatisch auf alle Stellen aus, an denen der Iframe eingebettet ist, ohne dass du den Code neu einfügen musst.

Das Widget lädt nicht — nur ein weißer Bereich

Häufigste Ursache bei Website-Baukästen (v. a. bestimmte Squarespace- oder benutzerdefinierte WordPress-Themes): eine strikte Content Security Policy (CSP) des Themes blockiert das Einbetten fremder Iframes. Prüfe die Browser-Konsole (Rechtsklick → Untersuchen → Konsole) auf eine CSP- oder "frame-ancestors"-Fehlermeldung. Falls das Theme die CSP nicht anpassbar macht, nutze ersatzweise die reine Link-Variante (Button, der auf die gehostete Smoobu-Buchungsseite verlinkt) statt des Iframes.

Die Buchung kommt in Smoobu an, aber die Zahlung schlägt fehl

Das betrifft in der Regel die Zahlungsanbindung, nicht das Iframe selbst. Prüfe unter Einstellungen → Zahlungen, ob Stripe oder PayPal korrekt verbunden und nicht in einem Testmodus stehen geblieben ist. Bei Stripe: prüfe zusätzlich, ob das verbundene Konto vollständig verifiziert ist — unvollständige Verifizierung blockiert reale Zahlungen, auch wenn Testzahlungen funktionieren.

Brauchst du Hilfe bei der Einrichtung? Wenn das Widget bei deinem Website-Baukasten nicht sauber lädt oder du eine vollständig eigene Buchungsstrecke über die Smoobu-API willst, meld dich — ich habe beides schon umgesetzt.

Kontakt aufnehmen → → Vollständige Direktbuchungs-Strategie: OTA-Gebühren sparen, Google Business Profile, Gästebindung

Smoobu-Buchungssystem einbinden