Widget-Konfiguration

Alle verfügbaren Optionen zur Anpassung von Verhalten und Erscheinungsbild des Widgets.

Grundkonfiguration

JavaScript

SalonBookIt.init({
    // Erforderlich
    apiKey: 'hh_pub_live_abc123...',

    // Container (CSS-Selektor oder DOM-Element)
    container: '#salonbookit-widget',

    // Visuelle Optionen
    theme: 'light',
    primaryColor: '#1a365d',
    locale: 'es',

    // Anzeigemodus
    mode: 'inline'
});

Optionsreferenz

Erforderliche Optionen

apiKey string Erforderlich

Ihr SalonBookIt-API-Schlüssel. Wird vom Dashboard unter Konfiguration → Integrationen bezogen.

apiKey: 'hh_pub_live_abc123def456...'

Container

container string | HTMLElement Standard: '#salonbookit-widget'

CSS-Selektor oder Referenz auf das DOM-Element, wo das Widget gerendert wird.

container: '#mi-contenedor'
// oder
container: document.getElementById('mi-contenedor')

Aussehen

theme 'light' | 'dark' | 'auto' Standard: 'light'

Visuelles Theme des Widgets.

'light' - Heller Hintergrund, dunkler Text
'dark' - Dunkler Hintergrund, heller Text
'auto' - Erkennt die Systemeinstellung

primaryColor string Standard: '#1a365d'

Hauptfarbe für Buttons und hervorgehobene Elemente. Akzeptiert jeden gültigen CSS-Farbwert.

primaryColor: '#e63946'  // HEX
primaryColor: 'rgb(230, 57, 70)'  // RGB
primaryColor: 'hsl(355, 78%, 56%)'  // HSL

locale 'es' | 'en' | 'ar' Standard: 'es'

Sprache der Widget-Oberfläche.

'es' - Spanisch
'en' - Englisch
'ar' - Arabisch (inkl. RTL)

borderRadius string Standard: '12px'

Randradius für den Hauptcontainer und interne Elemente.

fontFamily string Standard: 'inherit'

Schriftfamilie. Standardmäßig erbt sie die Schrift der Seite.

Anzeigemodus

mode 'inline' | 'modal' | 'button' Standard: 'inline'

Wie das Widget angezeigt wird:

'inline' - Direkt im Container
'modal' - In einem zentrierten Popup
'button' - Nur ein Button, der das Modal öffnet

buttonText string Standard: 'Termin buchen'

Buttontext wenn mode ist 'button' oder 'modal'.

buttonStyle 'solid' | 'outline' | 'text' Standard: 'solid'

Visueller Stil des Buttons.

Vorauswahl

serviceId number | null Standard: null

ID des vorzuwählenden Services. Das Widget springt zum Fachmann-Auswahlschritt.

staffId number | null Standard: null

ID des vorzuwählenden Fachmanns. Erfordert, dass serviceId ebenfalls definiert ist.

date string | null Standard: null

Vorzuwählendes Datum im Format YYYY-MM-DD.

Verhalten

showPrices boolean Standard: true

Preise der Services anzeigen oder ausblenden.

showDuration boolean Standard: true

Dauer der Services anzeigen oder ausblenden.

allowMultipleServices boolean Standard: true

Mehrere Services in einer Buchung auswählen erlauben.

requirePhone boolean Standard: true

Telefon für den Buchungsabschluss erforderlich.

showNotes boolean Standard: true

Feld für zusätzliche Notizen im Formular anzeigen.

Zahlungen

enablePayments boolean Standard: true

Online-Zahlungen aktivieren. Erfordert, dass Stripe im Dashboard konfiguriert ist.

paymentRequired 'always' | 'optional' | 'never' Standard: 'optional'

Wann Online-Zahlung erforderlich ist:

'always' - Zahlung immer erforderlich
'optional' - Kunde wählt, ob online oder vor Ort bezahlt wird
'never' - Nur Buchung, keine Online-Zahlung

Vollständiges Beispiel

JavaScript

SalonBookIt.init({
    // Authentifizierung
    apiKey: 'hh_pub_live_abc123def456...',

    // Container
    container: '#booking-widget',

    // Aussehen
    theme: 'light',
    primaryColor: '#e63946',
    locale: 'es',
    borderRadius: '8px',
    fontFamily: 'Inter, sans-serif',

    // Modus
    mode: 'inline',
    buttonText: 'Jetzt buchen',

    // Vorauswahl
    serviceId: 15,
    staffId: null,
    date: null,

    // Verhalten
    showPrices: true,
    showDuration: true,
    allowMultipleServices: true,
    requirePhone: true,
    showNotes: true,

    // Zahlungen
    enablePayments: true,
    paymentRequired: 'optional',

    // Callbacks (siehe Abschnitt Ereignisse)
    onReady: (business) => {
        console.log('Widget bereit:', business);
    },
    onStepChange: (step, data) => {
        console.log('Schritt:', step, data);
    },
    onBookingComplete: (booking) => {
        console.log('Buchung erstellt:', booking);
        window.location.href = '/gracias?reserva=' + booking.id;
    },
    onPaymentComplete: (payment) => {
        console.log('Zahlung abgeschlossen:', payment);
    },
    onError: (error) => {
        console.error('Error:', error);
    }
});

CSS-Anpassung

Das Widget stellt CSS-Variablen für erweiterte Anpassung bereit:

CSS

.sbk-widget {
    /* Farben */
    --sbk-primary: #1a365d;
    --sbk-primary-hover: #2c5282;
    --sbk-background: #ffffff;
    --sbk-surface: #f7fafc;
    --sbk-text: #1a202c;
    --sbk-text-secondary: #718096;
    --sbk-border: #e2e8f0;
    --sbk-success: #38a169;
    --sbk-error: #e53e3e;

    /* Abstände */
    --sbk-spacing-xs: 4px;
    --sbk-spacing-sm: 8px;
    --sbk-spacing-md: 16px;
    --sbk-spacing-lg: 24px;
    --sbk-spacing-xl: 32px;

    /* Typografie */
    --sbk-font-family: inherit;
    --sbk-font-size-sm: 0.875rem;
    --sbk-font-size-base: 1rem;
    --sbk-font-size-lg: 1.125rem;
    --sbk-font-size-xl: 1.25rem;

    /* Ränder */
    --sbk-radius-sm: 6px;
    --sbk-radius-md: 8px;
    --sbk-radius-lg: 12px;

    /* Schatten */
    --sbk-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --sbk-shadow-md: 0 4px 6px rgba(0,0,0,0.1);
}

Anpassungsbeispiel:

CSS

/* Ihre Stildatei */
#salonbookit-widget .sbk-widget {
    --sbk-primary: #8b5cf6;
    --sbk-radius-lg: 20px;
    --sbk-font-family: 'Poppins', sans-serif;
}