Ratgeber · Einbindung

Eigenes Buchungssystem in den Smoobu-Website-Baukasten einbinden

Stand: 9. September 2026 · Ablauf im Smoobu-Editor geprüft am 20. August 2026 · Lesezeit ca. 5 Minuten

Bevor du anfängst

• Den Code bereitlegen. Bei BineBoost steht er im Dashboard unter „Einbindung“, ein Klick auf „Kopieren“ genügt. Es sind zwei Zeilen.
• Den API-Zugang haben. Ein Buchungs-Aufsatz verbindet sich über Smoobus Schnittstelle, und die muss für dein Konto freigeschaltet sein. Woran wir es beim Einrichten von Konten erkennen, Stand September 2026: Steht in Smoobu unter den Einstellungen kein Bereich für API-Tokens, fehlt der Zugang. Welcher Tarif ihn enthält, legt Smoobu fest.
• Wissen, dass die Book-now-Seite leer wird. Was du dort löschst, ist Smoobus Standard-Buchungsstrecke. Auf allen anderen Seiten bleibt sie unberührt. Bevor du löschst, lohnt ein Blick darauf, was dort steht.

Schritt 1: das Buchungssystem einbauen

Sechs Klick-Schritte. Das Video zeigt den ganzen Weg am Stück, die Animationen darunter jeweils, wohin der Mauszeiger geht und was danach passiert.

1. Den Editor öffnen

In Smoobu links unter Kernfunktionen auf Webseiten-Baukasten, dann rechts oben auf Editor öffnen. Der Editor startet in einem neuen Tab.

2. Die Seite „Book now“ öffnen

Links in der schmalen Leiste auf Seiten. Die Seitenliste klappt auf, darin Book now anklicken. Das ist die Seite, auf der dein Buchungssystem stehen wird.

3. Die Seite leer räumen

Auf der Seite steht bereits Smoobus eigene Buchungsstrecke. Klick sie an, bis oben die kleine Leiste erscheint, und lösche sie über das Papierkorb-Symbol. Wiederhole das, bis die Seite leer ist und nur noch ein leerer Abschnitt übrig bleibt.

4. Das HTML-Feld einsetzen

Links auf Hinzufügen, dann Elemente. Ins Suchfeld html tippen und den Treffer HTML in den leeren Abschnitt ziehen.

5. Den Code einfügen

Es öffnet sich das Fenster HTML-Inhalt. Füge dort deinen kopierten Code ein und klick auf Aktualisieren. Das Buchungssystem erscheint sofort, schon im Editor. Bleibt die Stelle dort leer, veröffentliche zuerst und sieh dir die echte Seite an, bevor du im Code suchst.

6. Veröffentlichen

Rechts oben auf Erneut veröffentlichen. Smoobu bestätigt mit Ihr Projekt ist live und nennt die Adresse. Ruf sie auf und klick eine Buchung einmal bis zur Zusammenfassung durch.

Schritt 2: das Such-Widget für die Startseite

Das Such-Widget ist die kleine Suchleiste: Anreise, Abreise, Gäste, ein Knopf. Es bucht nichts, sondern schickt den Gast auf deine Buchungsseite, und zwar mit der Suche, die er gerade eingetippt hat. Der Einbau läuft wie oben, mit vier Unterschieden.

1. Buchungsseite eintragen, dann den Code kopieren

In BineBoost unter Einbindung bis zum Abschnitt Such-Widget scrollen. Dort trägst du die Adresse deiner Buchungsseite ein, also genau die Seite, auf der das Buchungssystem sitzt, und speicherst. Erst danach den Code kopieren.

2. Die vorhandene Suche entfernen

Öffne im Editor die Seite, auf der die Suche stehen soll, meist die Startseite. Dort liegt Smoobus eigene Suchleiste schon im Kopfbild, erkennbar am Vermerk Nur anzeigen. Wähle den Abschnitt aus und klick in seiner Leiste auf den Papierkorb. Smoobu fragt einmal nach, das ist die Sicherheitsabfrage.

3. Einen leeren Abschnitt anlegen

Unter dem Kopfbereich auf + Abschnitt hinzufügen und Layout wählen. Es entsteht ein leerer Abschnitt. Da hinein kommt wie im ersten Teil das HTML-Feld, dann der kopierte Code und Aktualisieren.

4. Veröffentlichen und einmal durchklicken

Nach Erneut veröffentlichen steht die Suche auf deiner Seite. Trag Datum und Personenzahl ein und klick auf Suchen: Der Gast landet auf deiner Buchungsseite, und die Suche ist dort schon ausgefüllt.

Drei Stellen, an denen es sonst hakt

Der Code gehört in den Seiteninhalt, nicht in den Kopfbereich. Der Baukasten hat unter Mehr und Einstellungen zusätzlich Felder für den Kopfbereich einer Seite. Die nehmen Zeilen wie link, script und meta auf, also Dinge, die niemand sieht. Ein Buchungssystem braucht dagegen eine Stelle im sichtbaren Teil der Seite. Setz den Einbettungscode deshalb in ein HTML-Feld im Seiteninhalt, genau dort, wo die Buchungsstrecke stehen soll. Geprüft am 20. August 2026.

Gib dem HTML-Feld eine eigene Spalte. Das empfiehlt der Baukasten selbst im Editor, gesehen am 20. August 2026, und der Grund ist praktisch: Ein hoher Inhalt legt sich im Editor über das Feld. Danach lässt es sich nicht mehr anklicken, und der einzige Weg zurück führt über die Spalte, in der es sitzt. Ein Buchungssystem ist genau so ein hoher Inhalt. Wer es in eine eigene Spalte setzt, kann es jederzeit wieder bearbeiten oder entfernen.

Alle Adressen im Code müssen mit https beginnen. Darauf weist Smoobu im Code-Fenster selbst hin, gesehen am 20. August 2026, und es ist kein Formalismus: Ein Skript über eine unverschlüsselte Adresse wird vom Browser auf einer verschlüsselten Seite blockiert, und zwar kommentarlos. Der Einbettungscode von BineBoost erfüllt das von Haus aus.

Was mit Smoobus eigener Buchungsstrecke passiert

Auf der Book-now-Seite ersetzt du sie, überall sonst bleibt sie stehen. Wenn du magst, kannst du auch eine zusätzliche Seite anlegen und die Book-now-Seite unangetastet lassen. Wichtig ist nur, dass nicht beide auf derselben Seite untereinander stehen: Der Gast sieht sonst zwei Suchmasken, die verschiedene Preise ausrechnen, und weiß nicht, welche gilt.

An der Rolle von Smoobu ändert sich dadurch nichts. Der Kanalmanager bleibt Smoobu, der Kalender bleibt Smoobu, und der Aufsatz greift an keiner dieser Stellen ein. Eine Buchung legen wir über Smoobus offizielle Schnittstelle direkt im Kalender an, und der Zeitraum ist dort danach belegt. So messen wir es im eigenen Betrieb, Stand September 2026. Der Aufsatz ist die Buchungsstrecke, nicht das System dahinter.

Wann sich der Aufwand lohnt

Wenn dir die Standard-Buchungsstrecke reicht, brauchst du nichts davon. Was sich an ihr überhaupt anpassen lässt, steht in einem eigenen Ratgeber. Interessant wird der Einbau erst, wenn deine Preisregeln feiner sind, als deine heutige Buchungsstrecke sie abbilden kann. Typische Fälle sind eine Ortstaxe mit Altersstaffeln, eigene Nachtpreise je Kinder-Altersgruppe, ein Belegungsaufpreis, der sich nach Saison unterscheidet, ein eigener Mehrwertsteuersatz je Preisposten oder eine höhere Anzahlung bei kurzfristiger Anreise. Das sind die Punkte, an denen Vermieter sonst zum Taschenrechner und zur Mail greifen. Ein Vermieter schreibt im August 2026 unter Smoobus eigenem Hilfeartikel zum Buchungssystem, dass sich dort keine Preisgruppen für unterschiedliche Altersgruppen einstellen lassen. Das ist die Sicht eines Nutzers und kein Befund über Smoobu. Ob es für dein Konto zutrifft, siehst du am schnellsten in deinen eigenen Einstellungen.

Ein Wort dazu, was die Technik nicht abnimmt: Eine Buchungsstrecke rechnet die Sätze, die du ihr vorgibst. Ob deine Ortstaxe oder Kurtaxe so ausgewiesen gehört, welcher Umsatzsteuersatz auf welchen Posten gehört und was du bei Anzahlung, Kaution und Storno vereinbaren kannst, hängt von Gemeinde, Bundesland und Rechtsform ab. Üblich ist, das einmal steuerlich und anwaltlich prüfen zu lassen und die eigenen Bedingungen danach zu schreiben, bevor sie öffentlich in der Buchungsstrecke stehen.

Häufige Fragen

Kann ich im Smoobu-Website-Baukasten ein eigenes Buchungssystem einbinden?

Ja. Der Website-Baukasten von Smoobu hat unter den Elementen ein HTML-Feld, in das sich beliebiger Code einfügen lässt. So haben wir es am 20. August 2026 in einem eigenen Smoobu-Konto durchgespielt. Der Einbau dauert wenige Minuten und braucht keine Programmierkenntnisse: Code kopieren, Element ziehen, einfügen, veröffentlichen.

Sehe ich das Buchungssystem schon im Editor?

Ja. Direkt nach dem Klick auf Aktualisieren steht es im Editor, mit echten Unterkünften und echten Preisen. So haben wir es am 20. August 2026 in einem eigenen Smoobu-Konto aufgezeichnet. Bleibt die Stelle im Editor trotzdem leer, ist das der Ausnahmefall und kein Grund, im Code zu suchen: Veröffentliche zuerst und sieh dir die echte Seite an. Erst wenn sie dort auch leer bleibt, stimmt etwas mit dem Code nicht.

Muss ich Smoobus eigene Buchungsstrecke vorher löschen?

Auf der Seite, auf der deine eigene stehen soll, ja. Die Seite Book now bringt Smoobus Buchungstool bereits mit. Stehen beide untereinander, sieht der Gast zwei Suchmasken mit verschiedenen Preisen und weiß nicht, welche gilt. Lösche die vorhandenen Inhalte über das Papierkorb-Symbol in der kleinen Leiste, bis nur noch ein leerer Abschnitt übrig ist. Auf allen anderen Seiten kann Smoobus Strecke bleiben.

Geht das auch auf meiner eigenen Website statt auf der Smoobu-Homepage?

Ja, der Einbau ist überall der gleiche: ein HTML-Feld und zwei Zeilen Code. Nur heißt das Feld je nach Technik anders. Smoobu nennt in seinem eigenen Hilfeartikel dieselben Orte für seine Buchungsstrecke, nämlich den Custom-HTML-Block in WordPress, das Element Embed code in Wix und den Code-Block in Squarespace; nachgelesen in Smoobus Hilfe, Stand September 2026. Für WordPress gibt es dafür einen eigenen Ratgeber, und bei einer selbst gebauten Seite setzt du die zwei Zeilen direkt in den Quelltext. Das Buchungssystem selbst bleibt dasselbe, egal auf welcher Website es steht.

Warum landet meine Suche nicht auf meiner Buchungsseite?

Weil die Adresse der Buchungsseite fehlt. Sie steht in BineBoost unter Einbindung im Abschnitt Such-Widget und muss gespeichert sein, bevor du den Code kopierst. Ohne diesen Eintrag führt das Such-Widget den Gast auf unsere Adresse statt auf deine Seite. Das funktioniert zwar, liegt aber nicht auf deiner Website.

Brauche ich einen bestimmten Smoobu-Tarif dafür?

Für den Einbau selbst nicht, wohl aber für die Verbindung: Ein Buchungs-Aufsatz wie BineBoost arbeitet über Smoobus Schnittstelle, und die muss für dein Konto freigeschaltet sein. Welcher Tarif sie enthält, legt Smoobu fest, und das kann sich ändern. Woran wir es beim Einrichten von Konten erkennen, Stand September 2026: Findest du in Smoobu unter den Einstellungen keinen Bereich für API-Tokens, ist der Zugang für dein Konto nicht freigeschaltet. Im Zweifel fragst du Smoobus Support.