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.

1. Select Settings > Advanced > Code Injection

2. 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.q = [];
    config.c = function (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');

2. Add the Button to Your Pages

To add the button to a page on your site: 

1. After creating an event, Copy your Slug (aka 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. 

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

3. Click Code.

4. Insert the following code, changing INSERT-EVENT-SLUG with your previous copied Slug in Step 1:

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>

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.

Related Articles

Need more help? Chat with us by selecting the red icon on the bottom right of your screen

Did this answer your question?