Dein eigener Button

Ausprobieren

Diese beiden Elemente öffnen auf dieser Seite die Buchung – per Klick und per Tastatur:

So baust du es ein

1. Button markieren

Ergänze an deinem Button das Attribut data-oddc-open-bookings-modal. Am besten nimmst du ein <button>, es funktioniert aber auch mit Links und beliebigen anderen Elementen.

2. Snippet einfügen

Das Snippet bleibt unverändert – vor </body> einfügen, fertig.

• Beliebig viele Buttons pro Seite
• Barrierefreiheit wird automatisch ergänzt: ARIA-Attribute und – bei Elementen, die kein <button> sind – Bedienung per Tab, Enter und Leertaste
• Nach dem Schließen ist der Fokus wieder auf deinem Button
• Klicks werden auch erkannt, wenn Buttons erst später ins DOM kommen – ob der schwebende Button entfällt, entscheidet das Script aber beim Laden
• Hat die Seite auch eine eingebettete Buchung, öffnet dein Button deren Vollbild – die Buchung wird nur einmal geladen

Lieber eine eigene CSS-Klasse?

Mit customButtonSelector legst du selbst fest, welche Elemente die Buchung öffnen – so wie auf dieser Demo-Seite.

Per JavaScript öffnen

Für Single-Page-Apps, eigene Widgets oder Chatbots: Öffne die Buchung mit einem Event aus deinem eigenen JavaScript. Das funktioniert mit jeder Einbauvariante – mit eingebetteter Buchung öffnet sich deren Vollbild.

Das Script wird asynchron geladen: Ein Event, das vorher ausgelöst wird, geht verloren. Löse es also erst bei einer Aktion der Besucher aus (z. B. in einem Klick-Handler), nicht direkt beim Laden der Seite.

Passende Einstellungen

Eine Übersicht aller Einstellungen findest du auf der Seite Standard.