Entwicklerdokumentation

Theming

Passen Sie das Buchungswidget mit neun CSS-Custom-Properties an Ihre Marke an und wählen Sie zwischen hellem, dunklem und automatischem Theme.

Das Widget kommt mit einem neutralen Erscheinungsbild, das auf den meisten Seiten funktioniert. Soll es wie Ihre Seite aussehen, setzen Sie CSS-Custom-Properties auf der Seite oder auf dem Container des Widgets – das Widget liest sie von seinem Host, obwohl es in einem Shadow DOM rendert. Jede Property hat einen Standardwert; ohne eigene Werte rendert es genau wie zuvor.

Properties

Property Standard Was sie färbt
--bdp-accent #F97316 Buttons, der aktive Schritt, ausgewählte Slots
--bdp-accent-contrast #FFFFFF Text auf der Akzentfarbe
--bdp-background #FFFFFF Hintergrund des Widgets
--bdp-surface #F8F7F5 Karten und Eingabefelder im Widget
--bdp-text #16161D Fließtext
--bdp-muted #6B6B76 Sekundärer Text und Hinweise
--bdp-border #E6E3DE Rahmen und Trennlinien
--bdp-radius 16px Eckenradius des Widgets und seiner Bedienelemente
--bdp-font die Systemschrift des Besuchers Schriftfamilie für alles im Widget

Beispiel

Setzen Sie sie auf dem Container – oder auf :root, wenn jedes Widget der Website gleich aussehen soll:

#bookdineplay-widget {
  --bdp-accent: #0f766e;
  --bdp-accent-contrast: #ffffff;
  --bdp-radius: 4px;
  --bdp-font: Georgia, "Times New Roman", serif;
}

Eine JavaScript-Änderung ist nicht nötig. Es sind gewöhnliche CSS-Custom-Properties, die der Browser auflöst: Ändern Sie sie später – etwa per Theme-Umschalter auf Ihrer Seite –, aktualisiert sich das Widget sofort und ohne neues Rendern.

Hell und dunkel

Die Option theme von renderBookingWidget wählt die Palette: light, dark oder auto (Standard), das der prefers-color-scheme-Einstellung des Besuchers folgt.

Was Sie nicht ändern können

Layout, Abstände, Schrittfolge und Texte sind absichtlich fest, damit der Ablauf auf jeder Host-Seite getestet und barrierefrei bleibt. Es gibt keinen Haken, um CSS in die Shadow-Wurzel einzuschleusen. Wer eine andere Oberfläche braucht, baut sie auf derselben API – die JavaScript-SDK-Anleitung listet die reinen Helfer, die das erleichtern.

Nächste Schritte

  • JavaScript-SDK – Optionen und Verhalten.
  • CDN – die exakte SDK-Version festlegen, mit der Ihr Theme getestet wurde.