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