There are several methods to integrate a Stager shop with your own website. What method is right for you depends on your website, and the technical know-how of the person setting up the integration.
This article guides you through setting up the advanced widget integration. This method gives you the highest level of customization. You can tailor the user experience to a much greater degree than with other options, blending the shopping experience with your own website and style. However, this method of integrating also requires more technical know-how to implement.
This integration is only useful when you have one page per event on your website. Most organizers using Stager make use of the Stager feed to automatically fill these pages based on the event (publicity) information in Stager.
The advanced widget integration consists of several parts:
The ticket selection widget for on an event page on your website.
The basket widget for your website's basket page.
The order widget, which server many purposes in the purchase flow.
Configure a shop for widget integrations in the Stager backstage
Before integrating a Stager shop widget, some configuration in the Stager Backstage is required. First go to the Settings - Ticketing - Ticket shops page of the Stager backstage. On that page follow these steps:
Click on the shop you wish to integrate.
Scroll to the section at the bottom of the page labelled Widget integrations.
Toggle the switch to Enabled.
Enter your domain URL
You can also enter a return URL for successful and failed ticket purchases. These would be separate pages on your website.
Save your changes.
Implementing the advanced widget integration
After enabling the Shop widget integration for your shop in the Stager Backstage, you can start integrating them on the website on your own domain.
On each page that needs to have a Shop widget you need to add the following references in the <head> section of the HTML page:
<script src="https://app.stager.co/public/shop/shop-widget-bundle.js"></script>
To prevent incorrect loading, please clear and disable caching for the Stager JavaScript. You can do this via your hosting settings or a plugin (like WP Super Cache) by excluding the reference URL from caching.
Options
The advanced widgets are is initialized using the following JavaScript code:
initAdvancedStagerShop(options);
You must provide a JavaScript object with options:
option name | type | possible values | required | default value |
mountElementId | string | - | Yes | - |
renderType | string | "event", "basket", "order" | No | "basket" |
shopId | int | - | Yes | - |
eventId | int | - | Only if renderType is "event" | - |
onEmptyBasket | function | - | No | - |
cookieBannerEnabled | bool | true, false | No | true |
Option Descriptions
mountElementId
Specify a mountElementId targeting a specific DOM element where the widget will be initialized.
renderType
Choose which advanced widget you want to render for the page:
Event: load in a specific event with all its ticket types, ticket buyers can then reserve tickets for each of these ticket types with a click of a button
Basket: shows all reserved tickets over multiple events in a basket that can be managed by the ticket buyer
Order: lets the ticket buyer buy their tickets by navigating them through their order.
shopId
This identifier allows Stager to determine which ticket shop to load. You can find this identifier on the main tab of the ticket shop.
eventId
When renderType is set to event you need to pass the specific eventId with it to render the event.
onEmptyBasket
A callback function that gets triggered when the advanced order widget reaches a state where the reservation is empty. For example, you can redirect a user to a specific page if this state is reached. Will only be triggered by the order widget.
cookieBannerEnabled
The Stager cookie banner allows ticket buyers to set their cookie preferences.
Examples
Down below are examples of the three different widget variants. A working example can be found by navigating to:
https://yourvenue.stager.co/example/advanced-widget/events
If you see CORS errors in your console, please review the URL you've added to the Stager settings. These might need to contain 'WWW'.
The event widget
<html>
<head>
<script src="https://app.stager.co/public/shop/shop-widget-bundle.js"></script>
</head>
<body>
<div id="stagerEventShop"></div>
<script>
initAdvancedStagerShop({
mountElementId: 'stagerEventShop',
shopId: 42069,
renderType: 'event',
eventId: 1005020
});
</script>
</body>
</html>
The basket widget
<html>
<head>
<script src="https://app.stager.co/public/shop/shop-widget-bundle.js"></script>
</head>
<body>
<div id="stagerShopBasket"></div>
<script>
initAdvancedStagerShop({
mountElementId: 'stagerShopBasket',
shopId: 42069,
renderType: 'basket'
});
</script>
</body>
</html>
The order widget
<html>
<head>
<script src="https://app.stager.co/public/shop/shop-widget-bundle.js"></script>
</head>
<body>
<div id="stagerShopOrder"></div>
<script>
var newUrl = "https://yourdomain.com/event";
initAdvancedStagerShop({
mountElementId: 'stagerShopOrder',
shopId: 42069,
renderType: 'order',
onEmptyBasket: () => {
window.location.replace(newUrl);
}
});
</script>
</body>
</html>