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 two basic widget integrations: the embedded widget integration, and the full-screen widget integration.
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 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>
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.
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>
When integrating the full screen widget, you might run into the problem of scaling with mobile devices. Read more about that on Mozilla Developer Network (MDN). Please make sure you add:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Options
The shop is initialized using the following JavaScript code:
initStagerShop(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" | - |
eventsDate | date | a ISO 8601 date string | No | - |
initialLoadPage | string | "events", "single-event", "login" | No | "events" |
cookieBannerEnabled | bool | true, false | No | true |
cookieBannerRenderType | string | "default", "fixed" | No | "default" |
width | string | em, %, px | No | "400px" |
height | string | em, %, px | No | "845px" |
autoScaling | 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.
eventsDate
If initialLoadPage is set to events, you can load in a specific set of events on a date. Pass an ISO 8601 date string (e.g. "2025-04-9").
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. You can disable the cookie banner by setting this option to false.
cookieBannerRenderType
The cookie banner can be rendered in two ways, it can be rendered inside the widget or on a fixed place on the screen (on the bottom-left).
width
Determines the width of the widget. Use a CSS value (with px, em or % suffix).
height
Determines the height of the widget. Use a CSS value (with px, em or % suffix).
autoScaling
If renderType is set to embedded, autoscaling can be enabled. This means that the widget will autoscale based on the content it has. When this is enabled, the height option will be applied as a max-height.
Examples
If you see CORS errors in your console, please review the URL you've added to the Stager settings. This might need to contain 'WWW'.
Fullscreen widget
<html>
<head>
<script src="https://app.stager.co/public/shop/shop-widget-bundle.js"></script>
</head>
<body>
<div id="stagerShop"></div>
<script>
initStagerShop({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>
</head>
<body>
<p>HEADER</p>
<div id="myCustomStagerShop"></div>
<p>FOOTER</p>
<script>
initStagerShop({
mountElementId: 'myCustomStagerShop',
renderType: 'embedded',
shopId: 42069,
eventId: 1005020,
initialLoadPage: 'single-event',
cookieBannerEnabled: false
});
</script>
</body>
</html>