The most effective way to add salonMonster online booking to your SquareSpace website is via our popup booking window.

Note: In order to add online booking SquareSpace requires that you have one of their paid Business and Commerce plans.

To do this:

Include the required JS and CSS files:

Click on Settings then on Advanced and finally on Code Injection .

Once on the Code Injection page enter in the Header field:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/js" src="https://salonmonster.com/js/iFrameResizer.min.js">
<style type="text/css">
#smpopup { display: none; position: fixed; top: 5%; left: 5%; width: 90%; height: 90%; background-color: white; z-index: 2000; }
#smpopup iframe { width: 100%; height: 100%; border: 0; }
#smpopupdarkbg { position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,.666); display: none; }#smlink {cursor: pointer;}
</style>

Add your booking button:

Now navigate to the page you wish to add the online booking to and click Edit .

Add a code block.

Set the code block type to HTML

Make sure to uncheck: Display Source

In the code block paste:

<div class="sqs-block-button-container--center">
  <span id="smlink" class="sqs-block-button-element--large sqs-block-button-element">Book Now</span>
</div>
<div id="smpopup"><iframe id="popupiframe" src="https://yoursalonmonster.salonmonster.com/6/client/"></iframe></div>
<div id="smpopupdarkbg"></div>

You can change the "Book Now" text to any text you would like.

You need to change "yoursalonmonster.salonmonster.com" to your salonMonster booking address.

Finally add the "magic sauce" script to make it all work:

Add a code block. Make sure this code block is below your button!

Set the code block type to HTML

Make sure to uncheck: Display Source

In the code block paste:

<script>document.getElementById("smlink").onclick=function(e){console.log("this"),e.preventDefault(),$(".header").attr("style","z-index: 0;"),document.getElementById("smpopupdarkbg").style.display="block",document.getElementById("smpopup").style.display="block",document.getElementById("smpopupdarkbg").onclick=function(){return document.getElementById("smpopup").style.display="none",!(document.getElementById("smpopupdarkbg").style.display="none")}},window.onkeydown=function(e){27==e.keyCode&&(document.getElementById("popup").style.display="none",document.getElementById("popupdarkbg").style.display="none",e.preventDefault(),$(".header").attr("style","z-index: 1;"))};</script>

Save your page and then go test your new booking button 😄