Zeige deinen Verfügbarkeitskalender auf deiner Webseite (Kalender-iFrame)

Du willst Besuchern deiner Webseite zeigen, welche Tage frei und welche belegt sind? Genau dafür ist der Kalender-iFrame da: ein kleiner Verfügbarkeitskalender, der seine Daten direkt aus deinem Smoobu-Kalender bezieht. Zum Einbetten kopierst du einen kurzen Codeblock aus Smoobu in deine Seite. Buchen können Gäste darüber nicht; der Kalender ist eine reine Anzeige, kein Buchungsformular.

Bevor du loslegst

Zwei Dinge brauchst du, bevor du den Kalender einbettest:

• Eine Webseite, in die du einen Block HTML-Code einfügen kannst. Die meisten Webseiten-Systeme bieten dafür ein Element wie „custom HTML" oder „Embed-Code".
• Deine Unterkunft in Smoobu eingerichtet. Jede Unterkunft bekommt ihren eigenen Kalender-Code.

Der Kalender zeigt nur die Verfügbarkeit

Das Widget zeigt freie und gesperrte Tage, mehr nicht: keine Preise, keine Datumsauswahl, kein Buchungsabschluss. Das passt zu Gastgebern, die Buchungen über ihr eigenes Anfrageformular oder per E-Mail entgegennehmen und Besuchern die Verfügbarkeit auf einen Blick zeigen wollen. Sollen Gäste dagegen direkt auf deiner Seite buchen und bezahlen, binde stattdessen das Buchungssystem ein: siehe Wie baue ich das Buchungssystem in meine Webseite ein?. Beides zusammen geht auch, mit dem Kalender als schneller Verfügbarkeitsansicht neben deiner Buchungs- oder Kontaktmöglichkeit.

Schritte

1. Gehe in Smoobu zu Fortgeschrittene Einstellungen > Kalender-iFrame.
2. Wähle die Sprache des Kalenders. Zehn Sprachen stehen zur Auswahl (Deutsch, Englisch, Italienisch, Französisch, Spanisch, Niederländisch, Griechisch, Portugiesisch, Russisch, Polnisch). Die Seite zeigt dann den Code für jede Unterkunft in dieser Sprache.
3. Suche die Zeile deiner Unterkunft. Jede Unterkunft bietet zwei Code-Versionen nebeneinander: Default, ein Widget, das per JavaScript geladen wird und dessen Aussehen du anpassen kannst, und iFrame, ein fertiger Rahmen, der sich an den Bildschirm anpasst (auf Handys ein kompaktes Layout mit 280 mal 540 Pixel, auf größeren Bildschirmen ein breiteres mit 1000 mal 600 Pixel), sich aber nicht umgestalten lässt.
4. Kopiere den Code der Version, die du möchtest.
5. Füge ihn im HTML deiner Webseite an der Stelle ein, wo der Kalender erscheinen soll, und speichere und veröffentliche die Seite anschließend in deinem Webseiten-System.
6. Um Kalender für weitere Unterkünfte zu zeigen, kopiere den eigenen Code jeder Unterkunft und füge ihn auf der jeweils passenden Seite ein.

So prüfst du, ob es geklappt hat

Öffne die Seite auf deiner Webseite: Der Kalender erscheint und stimmt mit deinem Smoobu-Kalender überein. Um zu prüfen, ob er sich aktualisiert, sperre einen Tag in deinem Smoobu-Kalender, warte kurz auf die Synchronisation und lade die Seite auf deiner Webseite neu. Der Tag sollte dann auch dort als nicht verfügbar erscheinen.

Häufige Probleme

Gäste sagen, sie können im Kalender keine Tage wählen oder buchen

Das ist kein Defekt, sondern gewollt: Das Widget dient nur der Anzeige, deshalb gibt es keine Datumsauswahl und keinen Bezahlvorgang. Sollen Gäste direkt auf deiner Seite Tage wählen und buchen, binde das Buchungssystem ein: siehe Wie baue ich das Buchungssystem in meine Webseite ein?. Viele Gastgeber kombinieren beides: den Verfügbarkeitskalender auf einer Seite, das Buchungssystem auf ihrer Buchungsseite.

Das Design des Kalenders passt nicht zu meiner Webseite

Die iFrame-Version lässt sich nicht umgestalten: Sie passt ihre Größe an den Bildschirm an, nutzt aber immer Smoobus Standard-Look. Die Default-Version lässt sich gestalten. In ihrem Code steht data-disable-css="false"; ändere diesen Wert auf true, um Smoobus eingebautes Styling abzuschalten und stattdessen dein eigenes CSS anzuwenden. Dieser Teil richtet sich an Webdesigner, und die Änderung machst du im eingefügten Code auf deiner Seite, nicht in Smoobu. Ohne diese Änderung behält der Kalender Smoobus Standard-Look.

Verwandte Artikel

• Buchungssystem, Webseiten-Baukasten, Kalender-iFrame: wofür ist welches Tool da?
• Wie baue ich das Buchungssystem in meine Webseite ein?
• Wie richte ich mein Buchungssystem ein?

Kommst du nicht weiter?

Wenn diese Schritte das Problem nicht gelöst haben, kontaktiere das Smoobu-Team: Öffne das Menü Hilfe, um ein Ticket zu eröffnen oder einen Telefontermin zu buchen, oder nutze die Chat-Blase unten rechts. Für die schnellste Antwort gib bitte an:

• Deine Smoobu User ID (im Profil-Icon-Menü oben rechts).
• Den Namen oder die ID der Unterkunft, wenn es um eine bestimmte Unterkunft geht.
• Die Buchungs-ID, wenn es um eine bestimmte Buchung geht (Buchungen, dann Mehr anzeigen).
• Den Namen des Portals, wenn es um Portal-Sync geht (Booking.com, Airbnb, Vrbo und so weiter).
• Eine kurze Schritt-für-Schritt-Beschreibung: was du getan hast, was du erwartet hast und was passiert ist.
• Screenshots oder eine kurze Bildschirmaufnahme des Problems.