Let op: We raden aan om de legacy ticketshop niet te embedden als je dat nog niet hebt gedaan. Voor de nieuwe ticketshop werken we actief aan een verbeterde embed-functie. Dit artikel is alleen relevant voor degenen die al een embedded ticketshop gebruiken. We houden je op de hoogte zodra de nieuwe functie beschikbaar is.
Bezoekers kunnen op je eigen website een groot deel van het bestelproces doorlopen door de ticketshop te integreren (embedded) middels een zogenaamd iframe. Stager biedt twee manier aan om zo'n integratie op te zetten: de basis integratie en de geavanceerde. Dit artikel beschrijft de geavanceerde integratie. Het is een goed idee om beide artikelen te bestuderen alvorens een keuze te maken voor de één of de ander. Zowel de basis integratie als de geavanceerde integratie zullen door iemand moeten worden uitgevoerd met technische kennis. De basis variant is, zoals de naam doet vermoeden, aanzienlijk minder complex.
Bij een geavanceerde integratie wordt —in tegenstelling tot de basis integratie— niet de hele ticketshop ge-embed (met evt. meerdere events), maar alleen het onderdeel waar de ticket koper kaartjes selecteert. Dit onderdeel laad je in per event, nooit voor meerdere events tegelijk, en kun je op je eigen website bijvoorbeeld tonen bij de informatie van een specifiek evenement.
NOTE: We staan niet toe dat je meerdere Stager iframe elementen embed op één enkele pagina. Stel je hebt een pagina met meerdere evenementen, en je wilt voor elk evenement een Stager iframe embedden, dan zul je met JavaScript ervoor moeten zorgen dat er altijd maar één iframe tegelijk bestaat. In onze ervaring wordt vrijwel altijd de Stager iframe pas getoond op een detail pagina van een enkel evenement — in dat geval hoef hier dus geen rekening mee te houden.
De geavanceerde integratie biedt ook de mogelijkheid om een winkelwagen icoon te tonen met een cijfer voor het aantal producten dat reeds zijn toegevoegd. Elke keer dat een bezoeker een product toevoegt geven wij onder de motorkap een seintje aan je website door en kan het cijfer in het winkelwagen icoon ge-update worden.
Naast de integratie voor evenement specifieke product selectie en het winkelwagen icoon biedt de geavanceerde integratie ook de mogelijkheid om het orderoverzicht te integreren op een aparte pagina in je eigen website. Je kunt je eigen website zo instellen dan deze pagina getoond wordt wanneer een bezoeker op het winkelwagen icoon of op een "betaal nu" knop klikt. Op deze pagina kun je vervolgens ook zelf een "verder winkelen" knop zetten om bezoekers weer terug naar het programma overzicht te sturen.
Je kunt je Stager ticketshop opmaken in de kleuren van je website en kiezen uit 900+ Google fonts. Deze opmaak wordt ook gebruikt als de ticketshop wordt geïntegreerd in je eigen website. Op die manier kun je het geheel naadloos in elkaar over laten lopen zodat niet te zien is dat de ticketshop eigenlijk een andere site is. Hoe je een ticketshop kunt stylen staat beschreven in een apart artikel.
NOTE: We hanteren in de code voorbeelden van een iframe hoogte van 650 pixels en een breedte van 400 pixels. Het kan zijn dat je deze iets breder wilt maken om lange event en ticket namen goed te tonen. Als je veel soorten tickets verkoopt bij een evenement, dan wil je wellicht het iframe ook iets langer maken ;-)
Op de pagina van een evenement in je eigen website
Voor deze integratie gaan we uit van de embed code van een Single Event ticketshop. Deze vind je rechtsboven op de Tickets pagina van je event onder de knop Share ticket link.
Voor de geavanceerde integratie voeg je ?minimal=true achter de ticket URL in de iframe tag. De embed code kan er dan als volgt uit zien:
<iframe data-stager-ticketshop="[eventid]" height="650" width="400" frameborder="0" src="https://[organisatie].stager.co/web/tickets/[eventid]?minimal=true" style="border: 0px; background: transparent; max-width: 100%;"></iframe>
Verander hier [eventid] en [organisatie] in de voor jou relevante waarden. Meer algemene informatie over het embedden van ticketshops vind je in het artikel over de basis integratie.
Het winkelwagen icoon
Het winkelwagen icoon (🛒) komt vanuit je eigen website en geef je zelf vorm. Middels de post message API die Stager aanbied kun je opvragen hoeveel tickets er geselecteerd zijn.
De inhoud van een response van de post message API kan er als volgt uit zien:
{ tickets: 2, status: 'reserved', height: 450, identifier: 'basket' }
Het cijfer staat voor het aantal tickets die geselecteerd zijn. Height is de interne hoogte van het iframe en de identifier geeft aan in wel deel van het ticket proces de gebruiker zich bevind. De volgende pagina's bevinden zich in het proces:
[0-9] (event id of ticket selection page)
basket
login
accountRegistration
orderPreview
updatePersonalDetails
processingPayment
orderCompleted
Hieronder meer over het height veld en wat hiermee te doen.
Dynamische iframe hoogte instellen
Omdat de gebruiker binnen het iframe door meerdere schermen navigeert kan de hoogte steeds verschillen. Om te voorkomen dat een gedeelte van de content weg valt, of alleen met gebruik van een "scrollbar" bereikbaar is, valt het aan te raden een listener in te stellen die het iframe's hoogte continue aanpast.
Met deze code kan de hoogte van het iframe automatisch worden aangepast aan de inhoud:
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';
}
});
Kies de betaling selectie pagina
Nadat iemand op "Plaats bestelling" heeft geklikt komen ze op de betaalselectie pagina uit. Wanneer de betaalmethode is geselecteerd, is er een break-out page naar de betaalomgeving.
In de Stager ticketshop wordt de volgende boodschap getoond wanneer de betaling al gestart is:
Als je wilt kun je ook je eigen website updaten om aan te geven dat de betaling gestart is. Dit doe je aan de hand van de post message API. De berichtgeving is:
{ status: 'paymentStarted' }
Nadat de betaling gelukt is, wordt het iframe herladen en wordt de overzicht pagina met Mijn tickets getoond.
De pagina met het orderoverzicht (ook wel: winkelwageninhoud)
Dit is een pagina in je eigen website die je toont als iemand bijvoorbeeld op Afrekenen of op het winkelwagen icoon heeft geklikt.
Op deze pagina gebruik je de volgende 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>
Overzicht van gekochte tickets
Als de bestelling is gelukt, dan zal de order overzichtspagina automatisch de gekochte tickets inclusief de download links tonen:
Mocht je je eigen website willen updaten, bijvoorbeeld met een vuurwerkanimatie zoals op het bovenstaande screenshot te zien is, dan kan dat middels een listener op de post message API. In dacht geval trigger je op het volgende bericht:
{ status: 'paymentSucceeded' }
Post Message API
Een voorbeeld hoe je kunt luisteren naar de post message API is (ES6 voorbeeld):
window.addEventListener('message', function(event) {
console.log({status: event.data.status, tickets: event.data.tickets});
});
Membership login
Het is mogelijk om bezoekers te laten inloggen alvorens ze tickets kunnen selecteren. Dit werkt door middel van een redirect url. Wanneer in de orderOriginUrl param een url wordt meegegeven zal de gebruiker na inloggen hiernaar toe worden geredirect.
Uitbreken
In sommige gevallen kan een bezoeker automatisch omgeleid worden van de ticketshop die geïntegreerd is in jouw eigen website naar jouw ticketshop op het stager.co domein. Dit heet uitbreken. Meer hierover in een apart artikel.