If you want your visitors to buy tickets without having to leave your site, you can do so by embedding your ticket shop in your website.
Embedding works by placing a piece of code in your website where you want to display the ticket shop. The code contains an iFrame, which ensures that the Stager ticket shop is loaded into your website.
You can design the ticket shop in your brand colours and design your website in such a way that everything looks integral to your design.
This article describes the basic integration of the ticket shop in your own website. We also offer the possibility for an advanced integration. This allows visitors —on the event pages of your own site— to add tickets for different events to a basket. Through the advanced integration, visitors can view an order overview (the contents of their basket) on your own website. See the article with more information about advanced integration.
With the basic integration you can embed three types of pages. Below we provide an explanation of each page type.
1. All events - tickets for all events from the default ticket shop
The default ticket shop shows events with online ticket sales that are sold in this ticket shop. For example, you can place this on the homepage of your website or on a separate page that can be accessed from the main navigation of your site with a clear Tickets button. To do this, use the following piece of code:
<iframe data-stager-ticketshop height="650" width="400" frameborder="0" src="https://[organization].stager.co/web/tickets" style="border: 0px; background: transparent; max-width: 100%;"></iframe>
Replace [organization] with the subdomain name that links to your organization's Stager ticket shop.
2. Per event - only tickets from a specific event
An event ticket page only shows the tickets of a specific event. You can place these in your website on a detail page of an event, or on a page that is displayed when the visitor clicks on a Buy Tickets button. To do this, use the following piece of code:
<iframe data-stager-ticketshop height="650" width="400" frameborder="0" src="https://[organization].stager.co/web/tickets/[eventid]" style="border: 0px; background: transparent; max-width: 100%;"></iframe>
Replace [organization] with the subdomain name that links to your organization's Stager ticket shop. Replace [eventid] with the id of the event you find in the URL on the tickets page of the event within Stager.
We do not allow you to embed multiple Stager iFrame elements on a single page. Suppose you have a page with multiple events, and you want to embed a Stager iFrame for each event, then you will have to use JavaScript to ensure that only one iFrame exists at a time. You can of course also use the "All events" integration (as mentioned in point 1) in that case.
3. Custom ticket shop - event tickets in a separate ticket shop
A custom ticket shop is in fact the same as the general ticket shop, only this ticket shop can be made up separately and events can be added separately. This is usually done when, for example, a festival is organized alongside regular ticket sales. Read the article for more info about custom ticket shops.
<iframe data-stager-ticketshop height="650" width="400" frameborder="0" src="https://[organization].stager.co/[ticketshop name]/tickets" style="border: 0px; background: transparent; max-width: 100%;"></iframe>
Replace [organization] with the subdomain name that links to your organization's Stager ticket shop. Replace [ticketshop name] with the name of the ticketshop you want to load.
Format
From an aesthetic point of view, you can choose to make the iframe wider. In principle, there are no requirements for the height and width of the iframe. A “Good to Know” is that the ticket shop upscales to desktop format above 768 pixels width. In desktop format the background image is also visible, so we advise you to stay within the width of 768 pixels.
Break-out
In some cases, a visitor can be automatically redirected from the ticket shop integrated in your own website, to your ticket shop on the stager.nl domain. This is called breaking out. More on this in a separate article.