Configuration du Widget

Toutes les options disponibles pour personnaliser le comportement et l'apparence du widget.

Configuration de base

JavaScript

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

    // Conteneur (sélecteur CSS ou élément DOM)
    container: '#salonbookit-widget',

    // Options visuelles
    theme: 'light',
    primaryColor: '#1a365d',
    locale: 'es',

    // Mode d'affichage
    mode: 'inline'
});

Référence des options

Options requises

apiKey string Requis

Votre clé API SalonBookIt. S'obtient depuis le Dashboard dans Configuration → Intégrations.

apiKey: 'hh_pub_live_abc123def456...'

Conteneur

container string | HTMLElement Défaut : '#salonbookit-widget'

Sélecteur CSS ou référence à l'élément DOM où le widget sera rendu.

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

Apparence

theme 'light' | 'dark' | 'auto' Défaut : 'light'

Thème visuel du widget.

'light' - Fond clair, texte sombre
'dark' - Fond sombre, texte clair
'auto' - Détecte la préférence du système

primaryColor string Défaut : '#1a365d'

Couleur principale pour les boutons et éléments mis en évidence. Accepte toute couleur CSS valide.

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

locale 'es' | 'en' | 'ar' Défaut : 'es'

Langue de l'interface du widget.

'es' - Espagnol
'en' - Anglais
'ar' - Arabe (inclut RTL)

borderRadius string Défaut : '12px'

Rayon de bordure pour le conteneur principal et les éléments internes.

fontFamily string Défaut : 'inherit'

Famille de polices. Par défaut hérite de la police de la page.

Mode d'affichage

mode 'inline' | 'modal' | 'button' Défaut : 'inline'

Comment le widget s'affiche :

'inline' - Directement dans le conteneur
'modal' - Dans un popup centré
'button' - Juste un bouton qui ouvre le modal

buttonText string Défaut : 'Réserver un rendez-vous'

Texte du bouton quand mode est 'button' ou 'modal'.

buttonStyle 'solid' | 'outline' | 'text' Défaut : 'solid'

Style visuel du bouton.

Présélection

serviceId number | null Défaut : null

ID du service à présélectionner. Le widget passera à l'étape de sélection du professionnel.

staffId number | null Défaut : null

ID du professionnel à présélectionner. Nécessite que serviceId soit aussi défini.

date string | null Défaut : null

Date à présélectionner au format YYYY-MM-DD.

Comportement

showPrices boolean Défaut : true

Afficher ou masquer les prix des services.

showDuration boolean Défaut : true

Afficher ou masquer la durée des services.

allowMultipleServices boolean Défaut : true

Permettre de sélectionner plusieurs services dans une même réservation.

requirePhone boolean Défaut : true

Exiger le téléphone pour compléter la réservation.

showNotes boolean Défaut : true

Afficher le champ de notes supplémentaires dans le formulaire.

Paiements

enablePayments boolean Défaut : true

Activer les paiements en ligne. Nécessite que Stripe soit configuré dans le Dashboard.

paymentRequired 'always' | 'optional' | 'never' Défaut : 'optional'

Quand exiger le paiement en ligne :

'always' - Toujours exiger le paiement
'optional' - Le client choisit s'il paie en ligne ou sur place
'never' - Réservation uniquement, pas de paiement en ligne

Exemple complet

JavaScript

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

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

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

    // Mode
    mode: 'inline',
    buttonText: 'Réserver maintenant',

    // Présélection
    serviceId: 15,
    staffId: null,
    date: null,

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

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

    // Callbacks (voir section Événements)
    onReady: (business) => {
        console.log('Widget prêt :', business);
    },
    onStepChange: (step, data) => {
        console.log('Étape :', step, data);
    },
    onBookingComplete: (booking) => {
        console.log('Réservation créée :', booking);
        window.location.href = '/gracias?reserva=' + booking.id;
    },
    onPaymentComplete: (payment) => {
        console.log('Paiement effectué :', payment);
    },
    onError: (error) => {
        console.error('Error:', error);
    }
});

Personnalisation CSS

Le widget expose des variables CSS pour une personnalisation avancée :

CSS

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

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

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

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

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

Exemple de personnalisation :

CSS

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