Dashboard

Configuracion del Widget

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

Configuracion basica

JavaScript 
SalonBookIt.init({
    // Requerido
    apiKey: 'hh_live_abc123...',

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

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

    // Modo de visualizacion
    mode: 'inline'
});

Referencia de opciones

Opciones requeridas

apiKey string Requerido

Tu API Key de SalonBookIt. Se obtiene desde el Dashboard en Configuracion → Integraciones.

apiKey: 'hh_live_abc123def456...'

Contenedor

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

Selector CSS o referencia al elemento DOM donde se renderizara 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 valido.

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' - Ingles
  • 'ar' - Arabe (incluye RTL)
borderRadius string Defecto: '12px'

Radio de bordes para el contenedor principal y elementos internos.

fontFamily string Defecto: 'inherit'

Familia tipografica. Por defecto hereda la fuente de la pagina.

Modo de visualizacion

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

Como se muestra el widget:

  • 'inline' - Directamente en el contenedor
  • 'modal' - En un popup centrado
  • 'button' - Solo un boton que abre el modal
buttonText string Defecto: 'Reservar cita'

Texto del boton cuando mode es 'button' o 'modal'.

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

Estilo visual del boton.

Preseleccion

serviceId number | null Defecto: null

ID del servicio a preseleccionar. El widget saltara al paso de seleccion de profesional.

staffId number | null Defecto: null

ID del profesional a preseleccionar. Requiere que serviceId tambien este 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 duracion de los servicios.

allowMultipleServices boolean Defecto: true

Permitir seleccionar multiples servicios en una misma reserva.

requirePhone boolean Defecto: true

Requerir telefono 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 este configurado en el Dashboard.

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

Cuando 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({
    // Autenticacion
    apiKey: 'hh_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',

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

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

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

    // Callbacks (ver seccion 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);
    }
});

Personalizacion CSS

El widget expone variables CSS para personalizacion 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;

    /* Tipografia */
    --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 personalizacion:

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