salonMonster Online Booking Integration Demo

This page demonstrates four methods for integrating salonMonster online booking into your website.

If you want a simpler solution you can use our iFrame integration, detailed at the bottom of this page.

Note: All examples use the demo booking link 'https://yoursalon.salonmonster.com'. Replace this with your actual salonMonster booking link.

Method 1: Adding to an onClick event to a link (or button)

This method works well if you can directly edit the code on your website. This method adds the onclick event to the link or button you create. 

<script>
  window.salonMonsterSettings = {
    bookingLink: 'https://yoursalon.salonmonster.com'
  }
</script>
<script src="https://salonmonster.com/js/booking-popup.js"></script>

<a href="" onclick="showOnlineBooking(event);">Book Online</a>

Try it:

Book Online

View a simple html example

Method 2: Connecting to an Existing Link via its CSS Class

Works well if there is a link or html component that you can't edit but which has a css class. This method will use the css class of the element and open the booking popup when it is clicked. 

<script>
  window.salonMonsterSettings = {
    bookingLink: 'https://yoursalon.salonmonster.com',
    linkClass: 'salon-booking'
  }
</script>
<script src="https://salonmonster.com/js/booking-popup.js"></script>

<a href="#" class="salon-booking">Book Appointment</a>

Try it:

Book Appointment

View a simple html example

Method 3: Connecting to an Existing Link via its CSS ID

Works well if there is a link or html component that you can't edit but which has a css ID. This method will use the css ID of the element and open the booking popup when it is clicked. 

<script>
  window.salonMonsterSettings = {
    bookingLink: 'https://yoursalon.salonmonster.com',
    linkID: 'main-booking-button'
  }
</script>
<script src="https://salonmonster.com/js/booking-popup.js"></script>

<a href="#" id="main-booking-button">Schedule Now</a>

Try it:

Schedule Now

View a simple html example

Method 4: Simple iframe Integration

If you prefer a simpler solution, you can embed the booking page directly into your website using an iframe. This method requires no JavaScript configuration. 

<iframe 
  src="https://yoursalon.salonmonster.com/client/index.php?layout=2" 
  width="100%" 
  min-width="630px" 
  style="min-height: 600px;" 
  scrolling="auto" 
  frameborder="0">
</iframe>

Try it:

Important Setup Notes: