There are several ways to integrate your shop into your own website. These range from a basic option, where you simply redirect visitors to the shop, to an advanced option, where the shopping experience is fully embedded within your website.
In this article you read about the technical details for embedding the ticket shop on your own website. We offer so-called “widget” integrations so ticket buyers have an even better user experience and there is an enhanced integration with online marketing tools.
There are two ways to integrate the Stager shop widget on your own domain. A third way is yet in the making.
Types of integrations
1. Basic widget integration: full-screen
Using this integration the Stager shop looks exactly like it does on the stager.co domain, but is served from your own domain. The advantage of this is that ticket buyers will stay on your domain for the whole ticket buying process. This makes measuring online marketing data more accurate.
Example:
2. Basic widget integration: embedded
When using this integration the Stager shop only takes up a certain rectangular space on your website. Outside of this rectangle your own website content (like headings, menus and footers) are still visible. Within the rectangle the Stager shop looks like it does on a mobile device. You can configure this widget so it shows the list of all events, or just a particular event.
Example:
3. Advanced widget integration
This type of integration will soon be available. Make sure to follow our newsletter for updates regarding this feature.
This integration is only useful when you have one page per event on your website. Most organizers using Stager make use of our feed to automatically fill these pages based on the event information in Stager.
The advanced integration consists of three parts:
a widget for the event page,
a widget for the order page,
a widget for the basket,
an API endpoint based on which you can create a “shopping cart” icon.
This integration —as the name implies— is the most advanced of all types of widget integrations. Once this type of integration becomes available we will also explain here how to implement it.
Technical guide for widget integration
Setup in 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, there you:
Open the page of the shop you wish to integrate.
Make sure the Shop version is set to “new shop” (this is only visible to organizers that have started using Stager before November 2024; otherwise all your ticket shops are automatically set to “new shop”).
Scroll to the section at the bottom of the page labeled Widget integrations.
Toggle the switch to Enabled
Enter the Return URL and save the changes
Basic widget integrations
After enabling the Shop widget integration for your shop in the Stager Backstage, and choosing the type of widget integration you want, 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">
Next, create an element on each page that needs to have a Shop widget. This is where the Stager shop will be initialized into:
<div id="stagerShop"></div>
Options
The shop is initialized using the following JavaScript code:
initializeStagerShop(options);
You must provide a JavaScript object with options:
Name | Type | Possible Values | Required | Default Value |
mountElementId | string | - | No | stagerShop |
renderType | string | embedded, fullscreen | No | fullscreen |
shopId | int | - | Yes | - |
eventId | int | - | Only if initialLoadPage is single-event | - |
initialLoadPage | string | events, single-event, login | No | events |
cookieBannerEnabled | bool | true, false | No | true |
Option descriptions
mountElementId
Specify a mountElementId if there is a specific DOM element where the widget should be initialized.
renderType
Choose whether to display the widget in fullscreen or embedded mode.
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
If you want to load a specific event, pass the event’s identifier here. This identifier can be found on the main tab of the event. Ensure that initialLoadPage is set to single-event for this to work.
initialLoadPage
Determines the initial page loaded in the widget. Options:
events - Loads all events for the selected shopId.
single-event - Loads a specific event. Ensure eventId is provided, and that the event is associated with the specified shopId.
login - Loads the login page so ticket buyers can log in.
cookieBannerEnabled
The Stager cookie banner allows ticket buyers to set their cookie preferences. If renderType is set to embedded, you can disable the cookie banner by setting this option to false.
Examples
Fullscreen widget
<html>
<head>
<script src="/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="stagerShop"></div>
<script>
initializeStagerShop({shopId: 42069});
</script>
</body>
</html>
Embedded widget (displaying a specific event)
<html>
<head>
<script src="https://app.stager.co/public/shop/shop-widget-bundle.js"></script>
<link rel="stylesheet" type="text/css" href="/public/shop.css">
</head>
<body>
<p>HEADER</p>
<div id="myCustomStagerShop"></div>
<p>FOOTER</p>
<script>
initializeStagerShop({
mountElementId: 'myCustomStagerShop',
renderType: 'embedded',
shopId: 42069,
eventId: 1005020,
initialLoadPage: 'single-event',
cookieBannerEnabled: false
});
</script>
</body>
</html>