🌐 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:

Adding a new link (using onClick)
Connecting to an existing link via CSS class
Connecting to an existing link via CSS ID
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)

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.