Widget Configuration

All available options to customize the widget's behavior and appearance.

Basic configuration

JavaScript

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

    // Container (CSS selector or DOM element)
    container: '#salonbookit-widget',

    // Visual options
    theme: 'light',
    primaryColor: '#1a365d',
    locale: 'es',

    // Display mode
    mode: 'inline'
});

Options reference

Required options

apiKey string Required

Your SalonBookIt API Key. Obtained from the Dashboard in Settings → Integrations.

apiKey: 'hh_pub_live_abc123def456...'

Container

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

CSS selector or DOM element reference where the widget will be rendered.

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

Appearance

theme 'light' | 'dark' | 'auto' Default: 'light'

Widget's visual theme.

'light' - Light background, dark text
'dark' - Dark background, light text
'auto' - Detects system preference

primaryColor string Default: '#1a365d'

Primary color for buttons and highlighted elements. Accepts any valid CSS color.

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

locale 'es' | 'en' | 'ar' Default: 'es'

Widget interface language.

'es' - Spanish
'en' - English
'ar' - Arabic (includes RTL)

borderRadius string Default: '12px'

Border radius for main container and internal elements.

fontFamily string Default: 'inherit'

Font family. Inherits page font by default.

Display mode

mode 'inline' | 'modal' | 'button' Default: 'inline'

How the widget is displayed:

'inline' - Directly in the container
'modal' - In a centered popup
'button' - Just a button that opens the modal

buttonText string Default: 'Book appointment'

Button text when mode is 'button' or 'modal'.

buttonStyle 'solid' | 'outline' | 'text' Default: 'solid'

Button visual style.

Preselection

serviceId number | null Default: null

Service ID to preselect. The widget will skip to professional selection step.

staffId number | null Default: null

Professional ID to preselect. Requires serviceId to also be defined.

date string | null Default: null

Date to preselect in format YYYY-MM-DD.

Behavior

showPrices boolean Default: true

Show or hide service prices.

showDuration boolean Default: true

Show or hide service durations.

allowMultipleServices boolean Default: true

Allow selecting multiple services in a single booking.

requirePhone boolean Default: true

Require phone to complete booking.

showNotes boolean Default: true

Show additional notes field in form.

Payments

enablePayments boolean Default: true

Enable online payments. Requires Stripe to be configured in Dashboard.

paymentRequired 'always' | 'optional' | 'never' Default: 'optional'

When to require online payment:

'always' - Always requires payment
'optional' - Customer chooses whether to pay online or in person
'never' - Booking only, no online payment

Complete example

JavaScript

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

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

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

    // Mode
    mode: 'inline',
    buttonText: 'Book now',

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

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

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

    // Callbacks (see Events section)
    onReady: (business) => {
        console.log('Widget ready:', business);
    },
    onStepChange: (step, data) => {
        console.log('Step:', step, data);
    },
    onBookingComplete: (booking) => {
        console.log('Booking created:', booking);
        window.location.href = '/gracias?reserva=' + booking.id;
    },
    onPaymentComplete: (payment) => {
        console.log('Payment completed:', payment);
    },
    onError: (error) => {
        console.error('Error:', error);
    }
});

CSS Customization

The widget exposes CSS variables for advanced customization:

CSS

.sbk-widget {
    /* Colors */
    --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;

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

    /* Typography */
    --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;

    /* Borders */
    --sbk-radius-sm: 6px;
    --sbk-radius-md: 8px;
    --sbk-radius-lg: 12px;

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

Customization example:

CSS

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