Wie baue ich das Buchungssystem in meine Webseite ein?

Dein Buchungsformular kommt mit einem Code-Schnipsel auf deine bestehende Webseite: Füge deinen persönlichen Buchungssystem-Code ein, und Gäste buchen direkt bei dir. Lässt sich auf deiner Seite kein Code einbauen, gibt es einen zweiten Weg: Verlinke einfach deine fertige Smoobu-Buchungsseite. Beides findest du im Tab In Webseite integrieren unter Kernfunktionen > Buchungssystem.

Bevor du loslegst

Zwei Dinge brauchst du, bevor du den Code einbaust:

• Ein eingerichtetes Buchungssystem mit hinterlegten Preisen und Zahlungsmethoden. Siehe Wie richte ich mein Buchungssystem ein?.
• Bearbeitungszugriff auf deine Webseite: eine Stelle, an der du einen Block HTML-Code einfügen oder wenigstens einen Button mit Link ergänzen kannst.

Schritte

1. Öffne Kernfunktionen > Buchungssystem und wechsle zum Tab In Webseite integrieren.
2. Wähle unter Unterkünfte entweder Alle Unterkünfte (Gäste sehen alle deine Unterkünfte mit einer Suche) oder eine einzelne Unterkunft (das Formular zeigt dann nur diese). In der Liste erscheinen nur Unterkünfte mit hinterlegten Preisen. Fehlt eine, hinterlege zuerst ihre Preise.
3. Passe die Überschrift an, wenn über dem Buchungsformular auf deiner Seite ein Titel stehen soll.
4. Kopiere den Code, der im Tab steht, genau so, wie er ist. Kopiere ihn immer aus deinem eigenen Tab In Webseite integrieren und tippe ihn nie von Hand ab: Der Code gehört persönlich zu deinem Konto, und seine erste Zeile enthält apartmentIframeAll (alle Unterkünfte) oder apartmentIframe gefolgt von einer Unterkunfts-Nummer (eine Unterkunft). Ein einziges falsch getipptes Zeichen macht das Formular unbrauchbar.
5. Füge den Code in einen HTML-Bereich deiner Webseite ein und veröffentliche die Seite. In WordPress ist das ein Custom HTML-Block, in Wix das Element Embed code, in Squarespace ein Code-Block. Die meisten anderen Baukästen haben ein ähnliches Element für eigenen HTML-Code.

Der Tab hat zwei optionale Einstellungen, die du auf ihren Standardwerten lassen kannst. Deckkraft legt in Prozent fest, wie durchsichtig der Hintergrund des eingebetteten Formulars ist, damit es sich in deine Seite einfügt statt einen festen Hintergrund zu zeigen. Öffne die Ergebnisse in einem neuen Browser-Tab ist ein Schalter: Ist er an, öffnen sich die Suchergebnisse in einem neuen Browser-Tab statt im eingebetteten Formular.

Du kannst so viele Codes erzeugen und einfügen, wie du willst: Ein Formular mit allen Unterkünften auf deiner Startseite und je ein Formular mit einer einzelnen Unterkunft auf der jeweiligen Unterkunftsseite funktionieren nebeneinander.

So prüfst du, ob es geklappt hat

Öffne die Seite in einem privaten Browserfenster. Das Buchungsformular öffnet sich und zeigt die richtigen Unterkünfte mit Preisen; wählst du Termine, erscheint der Gesamtpreis samt deinen Gebühren. Um sicherzugehen, dass der ganze Ablauf klappt, führe selbst eine Buchung durch, ohne echtes Geld zu bezahlen: Wie mache ich eine Testbuchung?.

Keine Stelle für Code? Verlinke stattdessen deine Buchungsseite

Zu jedem Konto gehört eine fertige Buchungsseite unter booking.smoobu.com. Deine öffnest du über Vorschau oben rechts auf jeder Seite der Buchungssystem-Einstellungen. Kopiere die Adresse und verlinke sie, wo du willst: hinter einem „Jetzt buchen"-Button auf deiner Webseite, in Social-Media-Profilen oder in E-Mails. Für eine einzelne Unterkunft nimmst du die unterkunftsbezogene Variante des Links: Hänge ?apartmentId= plus die Nummer der Unterkunft an die Adresse an; die Nummer findest du im Einbettungs-Code dieser Unterkunft.

Logo und Überschrift der Buchungsseite kommen aus Kernfunktionen > Webseiten-Baukasten > Grundlagen, nicht aus den Buchungssystem-Einstellungen. Fülle die beiden Felder deshalb auf jeden Fall aus, selbst wenn deine eigentliche Webseite gar nicht mit dem Webseiten-Baukasten läuft: Sonst sehen Gäste einen Platzhalter statt deines Namens.

Für alles, was über eine einfache Einbettung hinausgeht (nur eine Gruppe von Unterkünften anzeigen, ein zweites Buchungssystem für eine separate Webseite oder einen „Mehr Infos"-Link bei jedem Suchergebnis), siehe Erweiterte Möglichkeiten, dein Buchungssystem einzubinden.

Häufige Probleme

Das Buchungsformular erscheint mehrfach auf meiner JIMDO-Seite

Ältere JIMDO-Versionen führen eingebetteten Code mehr als einmal pro Seite aus, deshalb erscheint das Formular mehrfach. Von Smoobu-Seite lässt sich das nicht ändern. Entferne den eingebetteten Code und verlinke stattdessen einen „Jetzt buchen"-Button mit der Adresse deiner Buchungsseite (kopiere sie über Vorschau, oben rechts in den Buchungssystem-Einstellungen).

Gäste landen nach der Suche über meinen Buchungslink auf einer leeren Seite

Das kann passieren, wenn du die allgemeine Adresse der Buchungsseite teilst und ein Gast in den Suchergebnissen eine Unterkunft auswählt. Teile stattdessen unterkunftsbezogene Links: Ergänze die Adresse um ?apartmentId= und die Nummer der Unterkunft, dann kommen Gäste direkt zu einem funktionierenden Buchungsformular für diese Unterkunft.

Die Vorschau in Smoobu zeigt alle meine Unterkünfte, obwohl ich eine ausgewählt habe

Die Vorschau fasst immer alle deine Unterkünfte mit Preisen zusammen, egal was du auswählst. Die Beschränkung auf eine einzelne Unterkunft greift im Code, den du auf deiner Webseite einbettest, nicht in der Vorschau. Prüfe die veröffentlichte Seite mit dem eingebetteten Formular, um das echte Ergebnis zu sehen.

Verwandte Artikel

• Wie richte ich mein Buchungssystem ein?
• Erweiterte Möglichkeiten, dein Buchungssystem einzubinden
• Wie mache ich eine Testbuchung?
• Buchungssystem, Webseiten-Baukasten, Kalender-iFrame: wofür ist welches Tool da?

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.