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:

Configure a shop for widget integrations

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"
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

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>