Eigene Website? DiBooq Buchungswidget in wenigen Minuten erstellen!

1. Vorbereitung

1.1 DiBooq Buchungswebsite erstellen

Erstelle zunächst deine DiBooq Buchungswebsite. Die Einrichtung dauert in der Regel nur 5–10 Minuten.

Sobald deine Buchungswebsite online ist (siehe Screenshot), kannst du mit der Erstellung deines DiBooq Buchungswidgets beginnen.

Für die Einbindung auf deiner eigenen Website stehen dir zwei Möglichkeiten zur Verfügung:

• Embedded Widget (iFrame): Das Buchungswidget wird direkt in deine Website eingebettet.
• Popup Widget (Button mit Overlay): Ein Button öffnet das Buchungswidget in einem Overlay, ohne dass Besucher deine Website verlassen.

1.2  Prüfe, welche Technologie deine bestehende Website nutzt. 

Unser Buchungswidget wurde bereits erfolgreich in verschiedene Arten von Websites integriert. Dazu gehören:

• Selbst programmierte Websites (z. B. HTML- oder PHP-basierte Websites)
• WordPress
• Website-Baukastensysteme wie Squarespace, Wix, Jimdo...

Grundsätzlich kann das Widget auch in anderen CMS- oder Website-Systemen eingesetzt werden, sofern diese die Einbindung von benutzerdefiniertem HTML- und JavaScript-Code erlauben.

2. Buchungswidget erstellen (Code-Snippet Generator) 

Nachdem du deine Buchungswebsite in DiBooq erstellt hast, öffne bitte den Code Generator unter folgendem Link:

https://tools.dibooq.com/code-generator.html

Dort kannst du das Buchungswidget konfigurieren und den individuellen Code für die Einbindung in deine Website generieren.

• Eingabefeld „Deine Subdomain“
  
  Gib hier die Subdomain ein, die du bei der Erstellung deiner Buchungswebsite in DiBooq festgelegt hast.
  
  Wichtig: Trage nur den Subdomain-Namen ein – ohne .book.dibooq.com.
  
  Beispiel:
  Wenn deine Buchungswebsite unter ferienhaus.book.dibooq.com erreichbar ist, gibst du lediglich ferienhaus ein.

• Auswahlfeld "Widget Sprache"

  Auto (Default) übernimmt die Sprache der übergeordneten Website. Hierfür wird das im HTML-Header der Seite definierte lang-Attribut ausgewertet.

  Je nach Website-Technologie oder verwendetem CMS kann dieses Sprachattribut für das Buchungswidget jedoch nicht immer ausgelesen werden. In diesem Fall wird die Sprache der Website möglicherweise nicht wie erwartet übernommen.

  Für diesen Fall kannst du über die Einstellung Widget-Sprache eine feste Sprache auswählen. Das erzeugte Code-Snippet öffnet das Buchungswidget dann unabhängig von der Sprache der übergeordneten Website immer in der ausgewählten Sprache.

  Du kannst zwischen Deutsch, Englisch, Spanisch, Französisch, Portugiesisch, Kroatisch und Italienisch wählen oder die Standardeinstellung Auto (Default) verwenden.

   

   

• Eingabefeld „Button-Text“
  

  Hier kannst du die Beschriftung des Buttons festlegen, über den das Buchungswidget geöffnet wird.

  Der von dir eingegebene Text wird auf dem Button bei der Verwe ndung als Modal Widget angezeigt.

• Eingabefeld „Überschrift“
  

  Hier kannst du eine Überschrift festlegen, die im Overlay oberhalb des Buchungswidgets angezeigt wird.

  Wenn deine Website mehrere Unterkünfte enthält, kannst du hier beispielsweise den Namen der Unterkunft eintragen, für die das Buchungswidget geöffnet wird. So erkennen deine Gäste sofort, für welche Unterkunft sie eine Buchung vornehmen.

• Eingabefeld „Sub-Überschrift“
  

  Hier kannst du einen zusätzlichen Text festlegen, der im Overlay direkt unter der Überschrift angezeigt wird.

  Nutze die Sub-Überschrift beispielsweise für eine kurze Beschreibung, einen Hinweis oder eine persönliche Botschaft an deine Gäste.

• Button-Styling 
  

  Hier findest du verschiedene Gestaltungsmöglichkeiten für den Button, mit dem das Buchungswidget als Overlay geöffnet wird.

  So kannst du den Button optisch an das Design deiner Website anpassen.

2.1 Modal Widget (Button mit Overlay) erstellen

In der Vorschau siehst du, wie der Button mit den von dir gewählten Einstellungen auf deiner Website aussehen wird.

Du kannst den Button direkt in der Vorschau anklicken. Dadurch öffnet sich das Overlay genauso, wie es später auch auf deiner Website angezeigt wird.

Wenn du mit den Einstellungen zufrieden bist, klicke auf Code Snippet, um den Einbindungscode zu erzeugen.

Code mit Inline-Styling

Auf der linken Seite findest du den Code mit integriertem CSS (Inline-Styling). Diese Variante eignet sich besonders, wenn du das Buchungswidget nur an einer Stelle auf deiner Website einbinden möchtest. Du kannst den Code einfach an der gewünschten Stelle einfügen.

Code mit separatem CSS

Auf der rechten Seite findest du den Code mit ausgelagertem CSS. Diese Variante empfiehlt sich, wenn du das Buchungswidget mehrfach auf deiner Website einsetzen möchtest.

Das CSS kannst du einmal zentral in deine Website einbinden, beispielsweise als Custom CSS in WordPress. Anschließend fügst du an den gewünschten Stellen nur noch den kürzeren Widget-Code ohne die CSS-Definitionen ein. Das erleichtert die Pflege und sorgt dafür, dass alle Widgets dasselbe Design verwenden.

2.2 Embedded Widget (iFrame) erstellen

In der Vorschau siehst du, wie der eingebettete Buchungskalender auf deiner Website angezeigt wird. So kannst du bereits vor der Einbindung überprüfen, ob das Widget korrekt geladen wird.

Wird der Kalender in der Vorschau angezeigt, klicke auf Code Snippet, um den Einbindungscode zu erzeugen.

Diesen kannst du anschließend an der gewünschten Stelle in den HTML-Code deiner Website einfügen.

Bei WordPress, Website-Baukästen oder anderen CMS-Systemen gibt es dafür in der Regel ein eigenes Element, beispielsweise Benutzerdefiniertes HTML, HTML, Embedded HTML oder Code einbetten. Füge dort einfach den generierten Code ein.