The Showpass Ticket Selection & Checkout Widget easily integrates your events into your website allowing customers to purchase tickets directly from your site. The widget is customizable and automatically updates with your events allowing you to incorporate your branding and save time on website edits.

In order to install the ticket selection and checkout widget you are going to need a bit of coding experience.

Add the following code to in between your <head></head> tags.

<!-- SHOWPASS SDK HEADER -->
  <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>

In order to activate the widget from your website, you need to add a custom javascript onclick function to an element on your website. Usually a button or link styled to your liking.

Ticket Selection Widget

onclick="showpass.tickets.eventPurchaseWidget('slug', {'theme-primary': '#dd3333', 'theme-dark': true, 'tracking-id': '8ee54af5' })"

Options: 

slug: the slug of your event myshowpass.com/this-is-the-slug/
theme-primary: hex-code of main color of your brand (buttons and highlighted input - keep the # at the beginning)
theme-dark: true = background is dark; false = background is light default: false)
keep-shopping : default: true = displays Keep Shopping button instead of close.
tracking-id : default: null = use Affiliate Tracking Links to track purchases 

Example:

<button onclick="showpass.tickets.eventPurchaseWidget('this-is-the-slug', {'theme-primary': '#dd3333', 'theme-dark': true})">
  BUY TICKETS
</button>

Checkout / Cart Widget

onclick="showpass.tickets.checkoutWidget({'theme-primary': '#333333'})"

Options

theme-primary : hex-code of main color of your brand (buttons and highlighted input - keep the # at the beginning)
kpep-shopping : default: true = displays Keep Shopping button instead of close.

Example

<button onclick="showpass.tickets.checkoutWidget({'theme-primary': '#333333'})">
  CHECKOUT
</button>
Did this answer your question?