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'.Hover over 'New Tool,' then click 'Custom.'
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
Step 2: Add Buy Tickets Button
Click 'Edit Site' in the bottom of the sidebar.
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.'
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
Please 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.