When adding the Bookings Widget to your Squarespace website can either embed it on the page or have a button that displays a pop-up when clicked. Note: You cannot have the widget embedded and as a button on the same page - it can only be one or the other.
Go to Settings > Advanced > Code Injection.
Under Code Injection, enter the following:
In the Header:
<link href="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.css" type="text/css" rel="stylesheet" />
b. In the Footer:
Before inserting the code, you will need to add your School ID and Hash Number. Copy and paste these exactly as they appear in the Bookings Widget code on the Widgets page.
<script type="text/javascript">
(function (ma,rt,ia,ly,ti,c,s) {
ma['bookings']=ly;ma[ly] = ma[ly] || function () { (ma[ly].q = ma[ly].q || []).push(arguments) };
c = rt.createElement(ia), s = rt.getElementsByTagName(ia)[0];
c.id = ly; c.src = ti; c.async = 1; s.parentNode.insertBefore(c, s);
}(window, document, 'script', 'ma', '//martialytics.com/widgets/bookings/loader.js'));
ma('init', {
'school': 'INSERT SCHOOL ID',
'hash': 'INSERT HASH NUMBER',
'styles': 'width:450px;height:500px;position:relative;margin-left:auto;margin-right:auto;z-index:100000;',
'element': 'bookings_widget'
});
</script>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
3. Go to the page you want to add the button on and add a Code Block:
<div style="text-align:center; padding:0;">
<a href="#/" data-featherlight="#bookings_widget" class="sqs-block-button-element--medium sqs-block-button-element" style="background-color:#000; color:#fff; padding:20px 20px;">Book a Class</a>
</div>
<div style="display:none;">
<div id="bookings_widget">
</div>
</div>
4. If you just want the widget embedded on the page, add:
<div id="bookings_widget"></div>
Having trouble installing the widget on your Squarespace website? Contact our customer support for assistance at support@martialytics.com.