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 two Basic "widget" integrations: the Embedded basic "widget" integration, and the Full-screen basic "widget" integration.
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:
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>
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" |
disableBackground | 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).
disableBackground
If renderType is set to "embedded", the coloured background can be disabled. This creates more real estate for your own website background to shine.
Examples
Fullscreen 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/shop-widget.css">
</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>
<link rel="stylesheet" type="text/css" href="https://app.stager.co/public/shop/shop-widget.css">
</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>