🇪🇸 Español 🇬🇧 English 🇦🇪 العربية 🇫🇷 Français 🇩🇪 Deutsch
Dashboard

Événements du Widget

Callbacks et événements pour répondre aux actions de l'utilisateur et personnaliser le flux de réservation.

Introduction

Le widget émet des événements à différents moments du flux de réservation. Vous pouvez vous abonner à ces événements via des callbacks dans la configuration initiale :

JavaScript 
SalonBookIt.init({
    apiKey: 'hh_pub_live_...',
    container: '#widget',

    // Callbacks d'événements
    onReady: (business) => { /* ... */ },
    onStepChange: (step, data) => { /* ... */ },
    onServiceSelect: (service) => { /* ... */ },
    onBookingComplete: (booking) => { /* ... */ },
    onError: (error) => { /* ... */ }
});

Référence des événements

onReady

Se déclenche lorsque le widget a complètement chargé et est prêt à être utilisé.

Paramètres

Paramètre Type Description
business object Informations du commerce chargé

Exemple

JavaScript 
onReady: (business) => {
    console.log('Commerce :', business.nombre);
    console.log('Services disponibles :', business.servicios_count);

    // Mettre à jour l'UI externe
    document.querySelector('.loading').style.display = 'none';
}

Objet business

JSON 
{
    "id": "uuid-del-tenant",
    "nombre": "Mi Salon",
    "telefono": "+34612345678",
    "email": "info@misalon.com",
    "direccion": "Calle Principal 123",
    "logo_url": "https://...",
    "servicios_count": 12,
    "profesionales_count": 5,
    "moneda": "EUR",
    "simbolo_moneda": "€"
}

onStepChange

Se déclenche lorsque l'utilisateur avance ou recule dans le flux de réservation.

Paramètres

Paramètre Type Description
step string Nom de l'étape actuelle
data object Données accumulées jusqu'à présent

Étapes disponibles

  • 'services' - Sélection des services
  • 'staff' - Sélection du professionnel
  • 'datetime' - Sélection de la date et l'heure
  • 'customer' - Données du client
  • 'payment' - Paiement (si applicable)
  • 'confirmation' - Confirmation finale

Exemple

JavaScript 
onStepChange: (step, data) => {
    console.log('Étape actuelle :', step);

    // Analytics
    gtag('event', 'booking_step', {
        'step_name': step,
        'services_selected': data.services?.length || 0
    });

    // Mettre à jour les breadcrumbs externes
    updateBreadcrumbs(step);
}

onServiceSelect

Se déclenche lorsque l'utilisateur sélectionne ou désélectionne un service.

Paramètres

Paramètre Type Description
service object Service sélectionné
selected boolean S'il a été sélectionné ou désélectionné
allSelected array Tous les services actuellement sélectionnés

Exemple

JavaScript 
onServiceSelect: (service, selected, allSelected) => {
    console.log(selected ? 'Ajouté :' : 'Supprimé :', service.nombre);

    // Mettre à jour le prix total dans l'UI externe
    const total = allSelected.reduce((sum, s) => sum + s.precio, 0);
    document.querySelector('.total-price').textContent = `€${total}`;
}

onStaffSelect

Se déclenche lorsque l'utilisateur sélectionne un professionnel.

Exemple

JavaScript 
onStaffSelect: (staff) => {
    console.log('Professionnel :', staff.nombre);
    // staff = { id, nombre, imagen_url, especialidades }
}

onDateSelect

Se déclenche lorsque l'utilisateur sélectionne une date et heure.

Exemple

JavaScript 
onDateSelect: (datetime) => {
    console.log('Date :', datetime.fecha);  // '2024-01-20'
    console.log('Heure :', datetime.hora);    // '10:30'
}

onBookingComplete

Se déclenche lorsque la réservation a été créée avec succès (avant le paiement si applicable).

Exemple

JavaScript 
onBookingComplete: (booking) => {
    console.log('Réservation créée :', booking.id);

    // Analytics
    gtag('event', 'purchase', {
        'transaction_id': booking.id,
        'value': booking.total,
        'currency': 'EUR'
    });

    // Rediriger vers la page de confirmation
    window.location.href = `/reserva-confirmada/${booking.id}`;
}

Objet booking

JSON 
{
    "id": 12345,
    "codigo": "ABC123",
    "fecha": "2024-01-20",
    "hora_inicio": "10:30",
    "hora_fin": "11:00",
    "servicios": [
        { "id": 1, "nombre": "Coupe classique", "precio": 25.00 }
    ],
    "profesional": {
        "id": 5,
        "nombre": "Carlos Garcia"
    },
    "cliente": {
        "nombre": "Juan Perez",
        "email": "juan@email.com",
        "telefono": "+34612345678"
    },
    "total": 25.00,
    "estado": "confirmée",
    "pago_pendiente": true
}

onPaymentComplete

Se déclenche lorsque le paiement a été complété avec succès.

Exemple

JavaScript 
onPaymentComplete: (payment) => {
    console.log('Paiement effectué');
    console.log('ID:', payment.payment_intent_id);
    console.log('Montant :', payment.amount);

    // Afficher le message de succès
    showSuccessMessage('Paiement reçu !');
}

onError

Se déclenche lorsqu'une erreur se produit à n'importe quel point du flux.

Exemple

JavaScript 
onError: (error) => {
    console.error('Error:', error.code, error.message);

    // Signaler au système d'erreurs
    Sentry.captureException(error);

    // Afficher le message à l'utilisateur
    if (error.code === 'SLOT_UNAVAILABLE') {
        alert('Désolé, cet horaire n'est plus disponible.');
    }
}

Codes d'erreur courants

Code Description
INVALID_API_KEY Clé API invalide
NETWORK_ERROR Erreur de connexion
SLOT_UNAVAILABLE Horaire plus disponible
PAYMENT_FAILED Erreur de paiement
VALIDATION_ERROR Données du formulaire invalides

onClose

Se déclenche lorsque l'utilisateur ferme le widget (uniquement en mode modal).

Exemple

JavaScript 
onClose: () => {
    console.log('Widget fermé');

    // Demander s'il veut sauvegarder le brouillon
    if (hasUnsavedData()) {
        saveBookingDraft();
    }
}

Méthodes du Widget

En plus des événements, vous pouvez contrôler le widget par programmation :

JavaScript 
// Obtenir la référence au widget
const widget = SalonBookIt.init({ ... });

// Ouvrir la modale (uniquement en mode modal/button)
widget.open();

// Fermer la modale
widget.close();

// Aller à une étape spécifique
widget.goToStep('services');

// Réinitialiser le widget
widget.reset();

// Détruire le widget
widget.destroy();