1. Showpass
  2. Technical Documentation
  3. Integrating Widgets

Ticket selection and Checkout widget

Showpass Support
Updated

Customize and install the Showpass Ticket Selection and Checkout Widget on your website

Please note, if your website is built on Wordpress, we have a Showpass Wordpress Plugin

If it is built on Squarespace, you can find out how to integrate it here: Squarespace Integration

 

The Showpass Ticket Selection and Checkout Widget easily integrate 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 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('event-slug', {'theme-primary': '#dd3333' })"

Options: 

slug 

  • The slug of your event showpass.com/this-is-the-slug/

theme-primary

  • hex-code of main colour of your brand (buttons and highlighted input - keep the # at the beginning)

keep-shopping

  • true = displays Keep Shopping button
  • false = displays Close  button
  • default: true

tracking-id 

Example:

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

 

Product Selection Widget

onclick="showpass.tickets.productPurchaseWidget('productID', {'theme-primary': '#dd3333' })"

The product ID is found in the URL bar when editing the product on Showpass.

/dashboard/inventory/products/923/edit/

The product selection widget has the same options as the ticket selection widget.

 

Checkout / Cart Widget

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

Options

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

Example

<button onclick="showpass.tickets.checkoutWidget({'theme-primary': '#333333'})">
  CHECKOUT
</button>