Smoobu in die eigene Website einbinden – Komplett-Anleitung (2025)

Seit dem Relaunch von Smoobu Anfang 2025 sind die Widgets zur Einbindung neu organisiert. In dieser Anleitung zeigen wir Dir, wie Du das Buchungsformular und den Verfügbarkeitskalender korrekt und datenschutzkonform in Deine Website integrieren kannst.

Was ist Smoobu?

Warum Smoobu-Widgets einbinden?

• Direktbuchungen ohne Provision
• Synchronisierung mit Airbnb, Booking & Co. über iCal
• Professioneller und vertrauenswürdiger Buchungsprozess
• DSGVO-konform durch Auftragsverarbeitung mit Smoobu

Welche Widgets stehen zur Verfügung?

Widget-Code finden (Stand 2025)

1. Login bei Smoobu
2. Menüpunkt Kernfunktionen → Buchungssystem → In Website-integrieren
3. Multiauswahl: Empfohlen für das Buchungsformular mit Suche
4. HTML-Code kopieren (HTML (iFrame) Code zur Integration in externe Webseite)

Hinweis: Ihr könnt entweder das Buchungswidget mit Suchfunktion über die Multiauswahl einbinden. Wenn Ihr eine Buchungsstrecke für eine einzelne Unterkunft einbinden wollt muss unter “Auswahl  Unterkünfte” zunächst eine einzelne Unterkunft gewählt werden. In diesem Fall wird allerdings das gesamte Formular – und nicht nur das Suche-Widget eingebunden.

Meistgelesener Artikel

Adagio wächst um 9 Häuser

BuchungsWidget individualisieren – Farben anpassen

• Menüpunkt Kernfunktionen → Buchungssystem → In Einstellungen Buchungssystem
• nach unten scrollen zu “CSS – Individualisiere das Design
• HTML-Code kopieren (HTML (iFrame) Code zur Integration in externe Webseite)

Beispielcode CSS Code:

  /* sticky menu rechts */
  :root {
    /* font colors */
    --font-color-default: #6d4919;
    --font-color-label: #6d4919;
    --font-color-input: #6d4919;
    --font-color-icons: #6d4919;
    --font-color-input-icons: #6d4919;
    --font-color-headlines: #6d4919;
    --font-color-error: #F45B69;
    --font-color-black: #424242;
  
    /* borders */
    --border-radius: 5px;
    --border-width: 1px;
    --border-color-default: #ced4da;
    --border-color-container: #ced4da;
    --border-color-input: #ced4da;
    --border-color-image: #ced4da;
    --border-color-error-shaddow: rgba(244, 91, 105, 0.25);
  
    /* button */
    --button-color-primary: #6d4919;
    --button-color-secondary: white;
  }
 
 .datepicker table tr td.day.disabled, .datepicker table tr td.day.disabled:hover {
    color: #ff0000 !important;
} 
 .datepicker table tr td.day,  .datepicker table tr td.day:hover{
color: #247b12 !important;
}
.datepicker .range-start, .datepicker .range-end{
background-color:   #efe7db  !important;
}

Tipp: Am einfachsten ist es die passende Farbe mit einem Texteditor mit der Funtion “Suchen und ersetzen” im gesamten Script zu änern.
Wenn euere Website bereits in Arbeit ist, könnt ihr hier das Smoobu-Blau durch eine der primären, oder sekundären Designs eueres Themes verwenden. Wenn Ihr nach einer neuen Farbe sucht könnt ihr beispielsweise die Website “HTMLCOLORCODES” verwenden: https://htmlcolorcodes.com/

Einbindung je nach Website-System

Tipps zur Optimierung

• Platzieren Sie das Formular prominent und möglichst weit oben auf der Seite (z. B. unter Headermotiv oder Headerslideshow)
• Nutzen Sie im Hauptmenu Call-to-Actions wie „Jetzt buchen“ oder „Verfügbarkeit prüfen“
• Sorgen Sie für gute Lesbarkeit auf Smartphones (Responsive Design)

DSGVO & Datenschutz

• Datenschutzerklärung um Einbindung von Smoobu ergänzen
• Evtl. Cookie-Opt-in notwendig bei externen Skripten
• Auftragsverarbeitungsvertrag (AVV) mit Smoobu abschließen

Checkliste

1. Widget im Smoobu-Backend erstellt
2. Code korrekt eingefügt
3. Darstellung auf Mobilgeräten geprüft
4. DSGVO-Hinweise in Datenschutzerklärung ergänzt
5. Testbuchung erfolgreich durchgeführt

1. Anleitung: Smoobu-Kalender in die eigene Website einbinden (2025)

Seit dem Relaunch 2025 ist der Einbettungscode für den Belegungskalender im Smoobu-Dashboard neu positioniert. Hier zeigen wir Ihnen, wie Sie den Kalender als Standard-Script oder iFrame in Ihre Website einbinden – Schritt für Schritt.

Position im Smoobu-Menü

• Fortgeschrittene Einstellungen → Kalender-iFrame

Sprache & Variante wählen

Im Einbindungsbereich können Sie:

• die gewünschte Sprache auswählen (Deutsch, Englisch, etc.)
• zwischen „Standard“ (Script) und „iFrame“ wählen

Code kopieren & einfügen

Nach der Auswahl Ihrer Unterkunft und Variante kopieren Sie den generierten HTML-Code und fügen ihn an der gewünschten Stelle Ihrer Website ein.

Variante A: Standard-Script