Integrating the Showpass Purchase Widget with WIX

Add a button to initiate the ticket purchase widget on a WIX website. Checkout Widget on your website

*** This requires a manual addition for each button/event. Some coding experience is required***

 

Requirements

  • WIX Premium Account 
  • WIX SSL Enabled
  • Connected Custom Domain with WIX

Step 1: Add Showpass SDK

Once the above requirements are met. Go to your main dashboard for the WIX site and hover over Settings and click Tracking Tools.

Screen Shot 2020-11-05 at 1.52.10 PM.png

Hover over New Tool, then click Custom

Screen Shot 2020-11-05 at 1.53.10 PM.png
 
Paste the following into the text box “Paste the code snippet here”
 
<!-- SHOWPASS WIX 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');

window.addEventListener('message', (event) => {
if (event && event.data && (typeof event.data === 'string') && event.data.includes('initiate-showpass-widget')) {
let splitString = event.data.split(":");
let slug = splitString[1];
if (slug) {
showpass.tickets.eventPurchaseWidget(slug, {
'theme-primary': '#dd3333' // update custom color hex code
})
}
}
});
</script>

Change name to Showpass
Add code to Pages: Leave All Pages
Paste Code in: Head

Screen Shot 2020-11-05 at 2.00.24 PM.png
 

Step 2: Add Buy Tickets Button

Click edit site in the bottom of the sidebar
 
Screen Shot 2020-11-05 at 2.01.30 PM.png
 
Navigate to the page you want to add the button to and click the add icon in the sidebar.
Go to the Embed Section and click and drag HTML iFrame where you want the button.
Once the element is placed click “Enter Code”

Screen Shot 2020-11-05 at 2.04.58 PM.png

And paste in the following: ***REQUIRES EDITING BEFORE PASTING***
 
<button onclick="initiateWidget('replace-with-slug')">
BUY TICKETS
</button>
<script type="text/javascript">
function initiateWidget(slug) {
window.parent.postMessage('initiate-showpass-widget:' + slug, 'https://www.wix.showpass.tech');
}
</script>

***IMPORTANT***
 
Replace 'replace-with-slug'  from this line  initiateWidget('replace-with-slug') with the correct event slug from Showpass. The slug is everything after showpass.com/ when looking at the event detail page - do not include the trailing forward slash after the slug.
 
Replace 'https://www.wix.showpass.tech' from  window.parent.postMessage('initiate-showpass-widget:' + slug, 'https://www.wix.showpass.tech'); with the URL of the Wix website that is being integrated
 
Note: to style the button to your liking is where you will need some coding experience.
 
Click Apply and publish your site.
 
Important: the website will needed to be added under the Organization Info > Integrations tab

Screen Shot 2020-11-05 at 2.09.14 PM.png