Installing the ticket selection and check out widget to a Squarespace site

Learn how to add a widget to a Squarespace site.

1. Install Our Software Developer Kit

In order for the widget to function properly, you're going to have to add some code into the header of your website.

First, select Settings > Advanced > Code Injection

Then, post the following code into the header field: 

<script type="text/javascript">
(function (window, document, src) {
  var config = window.__shwps;
  if (typeof config === "undefined") {
    config = function () {
      config.c(arguments)
    };
    config.q = [];
    config.c = function (args) {
      config.q.push(args)
    };
    window.__shwps = config;

    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = src;
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
  }
})(window, document, 'https://www.showpass.com/static/dist/sdk.js');
</script>

2. Add the Button to Your Pages

To add the button to a page on your site: 

- After creating an event, copy your slug (the portion of the URL that comes after showpass.com/). You can find this right next to the Event Name when editing your event or in the address bar of your event page. 

For example: https://showpass.com/my-slug

- On the page you'd like to add the button to, select the Tear Drop icon to add a new section.

- Click Code:

- Insert the following code, changing INSERT-EVENT-SLUG with your previous copied Slug

This code below could change based off of your current theme selection. 

<div class="sqs-block button-block sqs-block-button" data-block-type="53"><div class="sqs-block-content">
<div class="sqs-block-button-container--center" data-alignment="center" data-button-size="medium">
    <a href="#" onclick="showpass.tickets.eventPurchaseWidget('INSERT- EVENT-SLUG', {'theme-primary': '#ED0D0D', 'keep-shopping': true})" class="sqs-block-button-element--medium sqs-block-button-element" data-initialized="true">Buy Tickets</a>
</div></div></div>

This is the most important part important part of the code - it is what activates the widget

For Events:

onclick="showpass.tickets.eventPurchaseWidget('INSERT-EVENT-SLUG', {'theme-primary': '#ED0D0D', 'keep-shopping': true})"

For Products:

onclick="showpass.tickets.productPurchaseWidget('productID', {'theme-primary': '#ED0D0D', 'keep-shopping': true})"

You can change the hex colour code #ED0D0D to match your brand colours.