Configuración del Widget

Todas las opciones disponibles para personalizar el comportamiento y apariencia del widget.

Configuración básica

JavaScript

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

    // Contenedor (selector CSS o elemento DOM)
    container: '#salonbookit-widget',

    // Opciones visuales
    theme: 'light',
    primaryColor: '#1a365d',
    locale: 'es',

    // Modo de visualización
    mode: 'inline'
});

Referencia de opciones

Opciones requeridas

apiKey string Requerido

Tu API Key de SalonBookIt. Se obtiene desde el Dashboard en Configuración → Integraciones.

apiKey: 'hh_pub_live_abc123def456...'

Contenedor

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

Selector CSS o referencia al elemento DOM donde se renderizará el widget.

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

Apariencia

theme 'light' | 'dark' | 'auto' Defecto: 'light'

Tema visual del widget.

'light' - Fondo claro, texto oscuro
'dark' - Fondo oscuro, texto claro
'auto' - Detecta la preferencia del sistema

primaryColor string Defecto: '#1a365d'

Color principal para botones y elementos destacados. Acepta cualquier color CSS válido.

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

locale 'es' | 'en' | 'ar' Defecto: 'es'

Idioma de la interfaz del widget.

'es' - Español
'en' - Inglés
'ar' - Árabe (incluye RTL)

borderRadius string Defecto: '12px'

Radio de bordes para el contenedor principal y elementos internos.

fontFamily string Defecto: 'inherit'

Familia tipográfica. Por defecto hereda la fuente de la página.

Modo de visualización

mode 'inline' | 'modal' | 'button' Defecto: 'inline'

Cómo se muestra el widget:

'inline' - Directamente en el contenedor
'modal' - En un popup centrado
'button' - Solo un botón que abre el modal

buttonText string Defecto: 'Reservar cita'

Texto del botón cuando mode es 'button' o 'modal'.

buttonStyle 'solid' | 'outline' | 'text' Defecto: 'solid'

Estilo visual del botón.

Preselección

serviceId number | null Defecto: null

ID del servicio a preseleccionar. El widget saltará al paso de selección de profesional.

staffId number | null Defecto: null

ID del profesional a preseleccionar. Requiere que serviceId también esté definido.

date string | null Defecto: null

Fecha a preseleccionar en formato YYYY-MM-DD.

Comportamiento

showPrices boolean Defecto: true

Mostrar u ocultar los precios de los servicios.

showDuration boolean Defecto: true

Mostrar u ocultar la duración de los servicios.

allowMultipleServices boolean Defecto: true

Permitir seleccionar múltiples servicios en una misma reserva.

requirePhone boolean Defecto: true

Requerir teléfono para completar la reserva.

showNotes boolean Defecto: true

Mostrar campo de notas adicionales en el formulario.

Pagos

enablePayments boolean Defecto: true

Habilitar pagos online. Requiere que Stripe esté configurado en el Dashboard.

paymentRequired 'always' | 'optional' | 'never' Defecto: 'optional'

Cuándo requerir pago online:

'always' - Siempre requiere pago
'optional' - El cliente elige si pagar online o en local
'never' - Solo reserva, sin pago online

Ejemplo completo

JavaScript

SalonBookIt.init({
    // Autenticación
    apiKey: 'hh_pub_live_abc123def456...',

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

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

    // Modo
    mode: 'inline',
    buttonText: 'Reservar ahora',

    // Preselección
    serviceId: 15,
    staffId: null,
    date: null,

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

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

    // Callbacks (ver sección de Eventos)
    onReady: (business) => {
        console.log('Widget listo:', business);
    },
    onStepChange: (step, data) => {
        console.log('Paso:', step, data);
    },
    onBookingComplete: (booking) => {
        console.log('Reserva creada:', booking);
        window.location.href = '/gracias?reserva=' + booking.id;
    },
    onPaymentComplete: (payment) => {
        console.log('Pago completado:', payment);
    },
    onError: (error) => {
        console.error('Error:', error);
    }
});

Personalización CSS

El widget expone variables CSS para personalización avanzada:

CSS

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

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

    /* Tipografía */
    --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;

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

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

Ejemplo de personalización:

CSS

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