Widget Theming
Das Buchungs-Widget bietet drei Starter-Themes plus acht CSS-Variablen, die Sie ohne eigenes CSS ueberschreiben koennen.
Starter-Themes
Auswahl unter Dashboard > Bookings > Widgets > > Theme.
| Theme | Hintergrund | Ueberschriften | CTAs | Optimal fuer |
|---|---|---|---|---|
| Light | Weiss | Dunkelgrau | Markenfarbe | Die meisten Betreiber - neutral |
| Dark | Schwarz | Weiss | Markenfarbe / Neon-Akzent | Resorts, Premium-Positionierung |
| Minimal | Weiss | Schwarz | Schwarz | Schnellstes Laden, nur Text |
Alternativ data-theme="light|dark|minimal" am Embed-Skript fuer Per-Seite-Ueberschreibung.
CSS-Variablen
Acht Variablen unter Theme > Erweitert:
| Variable | Standard (Light) | Verwendung |
|---|---|---|
--primary | #0f172a | Primaere CTA-Buttons, fokussierte Inputs |
--bg | #ffffff | Seiten- und Modal-Hintergrund |
--text | #0f172a | Body-Text |
--accent | #f59e0b | Highlights, "Begrenzt verfuegbar" Badges |
--success | #16a34a | Bestaetigungen, "Gebucht!" |
--error | #dc2626 | Fehlermeldungen |
--radius | 12px | Button- und Card-Eckenradius |
--font | system-ui, ... | Font-Stack |
Das sind die einzigen Style-Hooks. Beliebiges CSS wird nicht unterstuetzt - die kleine Oberflaeche macht das Widget sicher fuer Squarespace und Wix.
Branding-Felder (kein CSS)
- Anzeigename - Dashboard-only
- Logo-URL - 200x60 PNG transparent empfohlen
- Hero-Bild-URL - 1600x600 JPG empfohlen
- Headline - eine Zeile, unter dem Logo
- Subhead - kleinere Zeile darunter
- Footer - Adresse, Telefon, Oeffnungszeiten
Mehrere Widgets
Jedes Widget hat eigenes Theme. Beispiel:
front-beach-bikes- Light, Standard-Logofront-beach-bikes-events- Dark, anderes Logo fuer Touren
Beide nutzen dieselben Modelle und Preisstufen.
Theme-JSON (fortgeschritten)
{
"preset": "light",
"logoUrl": "https://cdn.frankebikes.com/logo.png",
"heroUrl": "https://cdn.frankebikes.com/hero.jpg",
"headline": "Buchen Sie Ihr E-Bike",
"subhead": "Strand-Cruiser, Fat-Tire und Tandems - alle elektrisch.",
"footer": "Front Beach Bikes - 12 Front Street - (843) 555-0143",
"vars": {
"--primary": "#0ea5e9",
"--accent": "#facc15",
"--radius": "8px"
}
}
Live-Vorschau
Der Dashboard-Editor zeigt Side-by-Side Live-Vorschau.
Barrierefreiheit
Alle drei Starter-Themes erfuellen WCAG AA Kontrast.