š Adding Online Booking to Your Website
The best way to add salonMonster online booking to your website is by using our JavaScript booking widget. This ensures
your booking page looks great on computers, tablets, and phones.
š” Donāt worry if youāre not familiar with JavaScript ā itās simple, and weāll guide you through the process. Need help?
Just contact us and weāll assist with the integration.
We also have a demo site that shows each option in action.
š Before You Start
Youāll need your salonMonster booking link.
To get it:
- Go to Accept Online Bookings in the Menu ā° of your salonMonster app.
āļø Integration Options
There are 4 ways to add online booking to your site:
1. Adding a new link (using onClick)
2. Connecting to an existing link via CSS class
3. Connecting to an existing link via CSS ID
4. Using a combination of the above
š If these methods feel too advanced, you can always use our simple iFrame integration instead. Or, reach out to us at
[email protected] and weāll assist with your integration.
š Option 1: Adding a New Link (onClick)
1. Copy and paste the following code just before the </body> tag on your page:
<script>
window.salonMonsterSettings = {
bookingLink: 'Your-Booking-Link-Goes-Here'
}
</script>
<script src="https://salonmonster.com/js/booking-popup.js"></script>
Replace Your-Booking-Link-Goes-Here with your actual booking link.
Then, add this to the element you want clients to click:
<a href="" onclick="showOnlineBooking(event);">Book Online</a>
For multiple staff booking links:
<a href="" onclick="showOnlineBooking(event,'Saras-Booking-Link');">Book Online with Sara</a>
<a href="" onclick="showOnlineBooking(event,'Janes-Booking-Link');">Book Online with Jane</a>
šØ Option 2: Using an Existing Link by CSS Class
Add this code before the </body> tag:
<script>
window.salonMonsterSettings = {
bookingLink: 'Your-Booking-Link-Goes-Here',
linkClass: 'Your-CSS-Class'
}
</script>
<script src="https://salonmonster.com/js/booking-popup.js"></script>
- Replace Your-Booking-Link-Goes-Here with your actual booking link.
- Replace Your-CSS-Class with the class name of your link (e.g. myClass).
- Do not include the . when entering the class name.
š Option 3: Using an Existing Link by CSS ID
Add this code before the </body> tag:
<script>
window.salonMonsterSettings = {
bookingLink: 'Your-Booking-Link-Goes-Here',
linkID: 'Your-CSS-ID'
}
</script>
<script src="https://salonmonster.com/js/booking-popup.js"></script>
- Replace Your-Booking-Link-Goes-Here with your actual booking link.
- Replace Your-CSS-ID with the ID of your link (e.g. myID).
- Do not include the # when entering the ID.
ā
Youāre Done!
Once youāve added the code, your clients will be able to book online directly from your website with a mobile-friendly
pop-up.
āØ *Need help? Reach out to us at *[email protected] and weāll assist with your integration.