The best way to add salonMonster online booking to your website is using our javascript booking widget.
This method makes sure that the booking page looks great whether your clients are accessing it via a computer, tablet or phone.
Don't know anything about javascript, that's ok, it's simple to use and we'll show you how below:
There are 4 easy options for setting up your online booking
Adding a new link to your page (using onClick)
Connecting to an existing link via its CSS class
Connecting to an existing link via its CSS ID
Using a combination of these options
To use any of these methods you need you will need your salonMonster booking link.
You can get this by going to "Accept Online Bookings" in the main menu of your salonMonster app.
Adding a new link to your page (using onClick):
To use this method add the following code below 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>
You will need to replace Your-Booking-Link-Goes-Here with your actual booking link.
Then add to the page element you want to use to activate the online booking: onclick="showOnlineBooking(event);"
So an example anchor tag would look like:
<a href="" onclick="showOnlineBooking(event);">Book Online</a>
You can also use this on a single page with multiple staff member booking links to go to each of their individual booking pages. Simply add their booking link as a second attribute to the `onclick`, eg:
<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>
Using an existing link by targeting it's CSS class:
To use this method add the following code below the </body> tag on your page:
<script>
window.salonMonsterSettings = {
bookingLink: 'Your-Booking-Link-Goes-Here',
linkClass: 'Your-CSS-Class'
</script>
<script src="https://salonmonster.com/js/booking-popup.js"></script>
You will need to replace Your-Booking-Link-Goes-Here with your actual booking link.
You will need to replace Your-CSS-Class with your actual css class, eg myClass. Do not include the .
Using an existing link by targeting it's CSS ID:
To use this method add the following code below the </body> tag on your page:
<script>
window.salonMonsterSettings = {
bookingLink: 'Your-Booking-Link-Goes-Here',
linkID: 'Your-CSS-ID'
</script>
<script src="https://salonmonster.com/js/booking-popup.js"></script>
You will need to replace Your-Booking-Link-Goes-Here with your actual booking link.
You will need to replace Your-CSS-Class with your actual css class, eg myID. Do not include the #.