Visitors can complete a large part of the ordering process on your own website if you integrate the embedded ticket shop, using a so-called iframe. Stager offers two ways to set up such an integration: basic and advanced. This article describes the advanced integration. It is a good idea to study both articles before deciding what you want. Both basic and advanced integration need to be performed by someone with technical knowledge. However, the basic variant is, as the name suggests, considerably less complex.
With an advanced integration — in contrast to the basic integration — the entire ticket shop is not embedded (with other, multiple events), but only the part where the ticket buyer selects tickets. You load this part per event, never for multiple events at the same time, and it can be shown on your own website with the information of that specific event.
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. In our experience, the Stager iFrame is almost always only shown on a detail page of a single event — in that case you don't have to take this into account.
Advanced integration also offers the possibility to show a shopping cart icon with a figure for the number of purchases that have already been added. Every time a visitor adds a purchase we send a “hidden” signal to your website, and the number in the shopping cart icon is updated.
Alongside integration for event-specific product selection, and the shopping cart icon, advanced integration also offers the possibility to integrate the order overview on a separate page in your own website. You can set up your own website so that this page is shown when a visitor clicks on the shopping cart icon or on a "pay now" button. On this page you can also add a "continue shopping" button to send visitors back to the events overview.
You can design your Stager ticket shop in the colours of your website and choose from 900+ Google fonts. This layout is also used when the ticket shop is integrated into your own website. In this way you can seamlessly merge everything so that a visitor cannot tell the ticket shop is actually a different site. How to style a ticket shop is described in a separate article.
We use examples of an iframe height of 650 pixels and a width of 400 pixels in the code. You may want to make it a bit wider to fully display long event names. If you sell many types of tickets at an event, you may also want to make the iframe a bit longer…
On an event page in your website
For this integration we use the embed code of a Single Event ticket shop. You can find this at the top right of the Tickets page of your event under the button Share ticket link.
For advanced integration, add ?minimal=true after the ticket URL in the iframe tag. The embed code can then look like this:
<iframe data-stager-ticketshop="[eventid]" height="650" width="400" frameborder="0" src="https://[organization].stager.co/web/tickets/[eventid]?minimal=true" style="border: 0px; background: transparent; max-width: 100%;"></iframe>
Change [eventid] and [organization] here to the values relevant to you. More general information about embedding ticket shops can be found in the article about the basic integration.
The shopping cart icon
The shopping cart icon (🛒) will come from your website, and you design it yourself. Using the post message API that Stager offers, you can request how many tickets have been selected.
The content of a response from the post message API can look like this:
{ tickets: 2, status: 'reserved', height: 450, identifier: 'basket' }
The number represents the number of tickets selected. Height is the internal height of the iFrame and the identifier indicates in which part of the ticketing process the user is located. The following pages are in the process:
[0-9] (event id or ticket selection page)
Basket
Login
accountRegistration
orderPreview
updatePersonalDetails
processingPayment
orderCompleted
Below more about the height field and how to use it.
Set dynamic iFrame height
Because the user navigates through multiple screens within the iFrame, the height can always differ. To prevent part of the content being lost, or only accessible using a "scrollbar", it is recommended to set up a listener that continuously adjusts the iFrame's height.
This code allows the height of the iFrame to automatically adjust to the content:
window.addEventListener('message', function(event) {
if (event.data.height) {
var height = event.data.height;
var identifier = event.data.identifier;
var selector = /^[0-9]+$/.test(identifier)
? '[data-stager-ticketshop="' + identifier + '"]'
: '[data-stager-ticketshop="basket"]';
document.querySelector(selector).style.height = height +'px';
}
});
Choose the payment selection page
After someone has clicked on "Place order" they will be taken to the payment selection page. When the payment method is selected, there is a break-out page to the payment environment.
In the Stager ticket shop, the following message is displayed when the payment has already started:
If you want, you can also update your own website to indicate that the payment has started. You do this using the post message API. The reporting is:
{ status: 'paymentStarted' }
After the payment is successful, the iFrame is reloaded and the overview page with My tickets is displayed.
The order summary page (aka: cart contents)
This is a page on your own website that shows when someone has clicked Checkout or the shopping cart icon, for example.
On this page you use the following code:
<iframe data-stager-ticketshop="basket" height="650" width="400" frameborder="0" src="https://[organisatie].stager.co/web/basket" style="border: 0px; background: transparent; max-width: 100%;"></iframe>
Overview of bought tickets
If the order is successful, the order overview page will automatically show the purchased tickets including the download links:
If you want to update your own website, for example with a fireworks animation as shown in the screenshot above, you can do so using a listener on the post message API. In this case you trigger on the following message:
{ status: 'paymentSucceeded' }
Post Message API
An example of how you can listen to the post message API is (ES6 example):
window.addEventListener('message', function(event) {
console.log({status: event.data.status, tickets: event.data.tickets});
});
Membership login
It is possible to allow a visitor to log in before they can select tickets. This works through a redirect url. When a url is given in the orderOriginUrl param, the user will be redirected to this after logging in.
https://[organization].stager.nl/web/tickets/login?orderOriginUrl=https://[organization].stager.nl/web/tickets/[eventid]
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.