There are several methods to integrate a Stager shop with your own website. The different types or integrations have different requirements on the website they are integrated with and on the technical know-how of the person setting up the integration.
This article guides you through setting up the Advanced "widget" integration. As the name implies this is method of integrating gives you most options. You can customize the user experience to a much greater degree than with the other options: truly blending the shopping experience with your own website and style. This increased options come at a cost: this method of integrating also requires more know-how to implement.
The Advanced widget integration methods is currently in public beta. This means we are confident it will add value to most of our customer, but still may have some rough edges. If you want to use it, feel free to contact support in case you run into unexpected problems. We are here to help!
Introduction
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.
The language selector API to change the user's language preference for the widgets/session.
The basket amount indicator API for creating a "basket indicator" on your website (that reminds users that they have unpaid items in their shopping basket).
Configure a shop for widget integrations in the Stager backstage
Since these steps of the guide are shared between the Basic and Advanced widget integrations we have moved it to a separate guide. Follow the steps in that guide:
Advanced widgets 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>
<link rel="stylesheet" type="text/css" href="https://app.stager.co/public/shop/shop-widget.css">
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 will soon be added to this point in the documentation: stay tuned!
The event widget
<html>
<head>
<script src="https://app.stager.co/public/shop.bundle.js"></script>
<link rel="stylesheet" type="text/css" href="https://app.stager.co/public/shop/shop-widget.css">
</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>
<link rel="stylesheet" type="text/css" href="https://app.stager.co/public/shop.css">
</head>
<body>
<div id="stagerShopBasket"></div>
<script>
initAdvancedStagerShop({
mountElementId: 'stagerShopBasket',
shopId: 42069
});
</script>
</body>
</html>
The order widget
<html>
<head>
<script src="https://app.stager.co/public/shop/shop-widget-bundle.js"></script>
<link rel="stylesheet" type="text/css" href="https://app.stager.co/public/shop.css">
</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>