5 minutos
Inicio Rapido
Integra el widget de reservas en tu sitio web en menos de 5 minutos.
1
Obtener tu API Key
Accede a tu Dashboard para generar una API Key.
- Inicia sesion en tu Dashboard de SalonBookIt
- Ve a Configuracion → Integraciones
- En la seccion API Keys, haz clic en Generar Nueva
- Copia tu API Key (empieza con
hh_live_)
Manten tu API Key segura
Tu API Key identifica tu negocio. No la compartas publicamente ni la incluyas en repositorios publicos.
2
Añadir el Widget a tu web
Copia el siguiente codigo en tu pagina HTML.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reservar Cita</title>
</head>
<body>
<h1>Reserva tu cita</h1>
<!-- Contenedor del widget -->
<div id="salonbookit-widget"></div>
<!-- Script del widget -->
<script src="https://app.salonbookit.com/static/widget/v1/salonbookit-widget.min.js"></script>
<script>
SalonBookIt.init({
apiKey: 'TU_API_KEY_AQUI',
container: '#salonbookit-widget',
theme: 'light',
locale: 'es'
});
</script>
</body>
</html>Reemplaza TU_API_KEY_AQUI con la API Key que obtuviste en el paso 1.
3
Personalizar el Widget
Ajusta los colores y el comportamiento segun tu marca.
JavaScript
SalonBookIt.init({
apiKey: 'hh_live_abc123...',
container: '#salonbookit-widget',
// Apariencia
theme: 'light', // 'light' | 'dark' | 'auto'
primaryColor: '#1a365d', // Color principal de tu marca
locale: 'es', // 'es' | 'en' | 'ar'
// Modo de visualizacion
mode: 'inline', // 'inline' | 'modal' | 'button'
// Preseleccionar servicio o profesional
serviceId: null, // ID del servicio a preseleccionar
staffId: null, // ID del profesional a preseleccionar
// Callbacks
onReady: function(business) {
console.log('Widget listo:', business.nombre);
},
onBookingComplete: function(booking) {
console.log('Reserva creada:', booking);
// Aqui puedes redirigir o mostrar confirmacion
},
onError: function(error) {
console.error('Error:', error.message);
}
});
4
Probar la integracion
Verifica que todo funciona correctamente.
- Abre tu pagina en el navegador
- Deberas ver el widget con tus servicios
- Selecciona un servicio, profesional, fecha y hora
- Completa una reserva de prueba
- Verifica que aparece en tu Dashboard
¡Listo!
Ya tienes el widget de reservas funcionando en tu web. Consulta la documentacion de configuracion para mas opciones.