5 minutes
Démarrage Rapide
Intégrez le widget de réservation sur votre site en moins de 5 minutes.
1
Obtenir votre clé API
Accédez à votre tableau de bord pour générer une clé API.
- Connectez-vous à votre Tableau de bord SalonBookIt
- Allez à Configuration → Intégrations
- Dans la section Clés API, cliquez sur Générer nouveau
- Copiez votre clé API (commence par
hh_pub_ouhh_sec_)
Gardez votre clé API en sécurité
Votre clé API identifie votre commerce. Ne la partagez pas publiquement et ne l'incluez pas dans des dépôts publics.
2
Ajouter le widget à votre site
Copiez le code suivant dans votre page HTML.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Réserver un rendez-vous</title>
</head>
<body>
<h1>Réservez votre rendez-vous</h1>
<!-- Conteneur du widget -->
<div id="salonbookit-widget"></div>
<!-- Script du widget -->
<script src="https://app.salonbookit.com/static/widget/v1/salonbookit-widget.min.js"></script>
<script>
SalonBookIt.init({
apiKey: 'VOTRE_CLE_API_ICI',
container: '#salonbookit-widget',
theme: 'light',
locale: 'es'
});
</script>
</body>
</html>Remplacez VOTRE_CLE_API_ICI par la clé API obtenue à l'étape 1.
3
Personnaliser le widget
Ajustez les couleurs et le comportement selon votre marque.
JavaScript
SalonBookIt.init({
apiKey: 'hh_pub_live_abc123...',
container: '#salonbookit-widget',
// Apparence
theme: 'light', // 'light' | 'dark' | 'auto'
primaryColor: '#1a365d', // Couleur principale de votre marque
locale: 'es', // 'es' | 'en' | 'ar'
// Mode d'affichage
mode: 'inline', // 'inline' | 'modal' | 'button'
// Présélectionner un service ou un professionnel
serviceId: null, // ID du service à présélectionner
staffId: null, // ID du professionnel à présélectionner
// Callbacks
onReady: function(business) {
console.log('Widget prêt :', business.nombre);
},
onBookingComplete: function(booking) {
console.log('Réservation créée :', booking);
// Ici vous pouvez rediriger ou afficher une confirmation
},
onError: function(error) {
console.error('Error:', error.message);
}
});
4
Tester l'intégration
Vérifiez que tout fonctionne correctement.
- Ouvrez votre page dans le navigateur
- Vous devriez voir le widget avec vos services
- Sélectionnez un service, un professionnel, une date et une heure
- Effectuez une réservation test
- Vérifiez qu'elle apparaît dans votre tableau de bord
C'est fait !
Vous avez maintenant le widget de réservation fonctionnel sur votre site. Consultez la documentation de configuration pour plus d'options.