5 minutes
Quick Start
Integrate the booking widget into your website in less than 5 minutes.
1
Get your API Key
Access your Dashboard to generate an API Key.
- Log in to your SalonBookIt Dashboard
- Go to Configuration → Integrations
- In the section API Keys, click on Generate New
- Copy your API Key (starts with
hh_pub_orhh_sec_)
Keep your API Key safe
Your API Key identifies your business. Don't share it publicly or include it in public repositories.
2
Add the Widget to your website
Copy the following code into your HTML page.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Appointment</title>
</head>
<body>
<h1>Book your appointment</h1>
<!-- Widget container -->
<div id="salonbookit-widget"></div>
<!-- Widget script -->
<script src="https://app.salonbookit.com/static/widget/v1/salonbookit-widget.min.js"></script>
<script>
SalonBookIt.init({
apiKey: 'YOUR_API_KEY_HERE',
container: '#salonbookit-widget',
theme: 'light',
locale: 'es'
});
</script>
</body>
</html>Replace YOUR_API_KEY_HERE with the API Key you got in step 1.
3
Customize the Widget
Adjust colors and behavior according to your brand.
JavaScript
SalonBookIt.init({
apiKey: 'hh_pub_live_abc123...',
container: '#salonbookit-widget',
// Appearance
theme: 'light', // 'light' | 'dark' | 'auto'
primaryColor: '#1a365d', // Your brand's primary color
locale: 'es', // 'es' | 'en' | 'ar'
// Display mode
mode: 'inline', // 'inline' | 'modal' | 'button'
// Preselect service or professional
serviceId: null, // Service ID to preselect
staffId: null, // Professional ID to preselect
// Callbacks
onReady: function(business) {
console.log('Widget ready:', business.nombre);
},
onBookingComplete: function(booking) {
console.log('Booking created:', booking);
// Here you can redirect or show confirmation
},
onError: function(error) {
console.error('Error:', error.message);
}
});
4
Test the integration
Verify that everything works correctly.
- Open your page in the browser
- You should see the widget with your services
- Select a service, professional, date and time
- Complete a test booking
- Verify it appears in your Dashboard
Done!
You now have the booking widget working on your website. Check the configuration documentation for more options.