Naar de hoofdinhoud
Alle collectiesTicketingOnline tickets verkopen
Basis integratie van de ticketshop in eigen website
Basis integratie van de ticketshop in eigen website

De Stager ticketshop op je eigen website

Meer dan 3 weken geleden bijgewerkt

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.

Als je de bezoekers van je website graag tickets wilt laten kopen zonder dat ze je website hoeven te verlaten, dan kan dat door je ticketshop in je website te embedden. 

Het embedden werkt door het plaatsen van een stukje code in je website op de plek waar je de ticketshop wilt tonen. De code bevat een zogenaamd iframe, die ervoor zorgt dat de ticketshop van Stager in je website wordt geladen. 

Je kunt de ticketshop opmaken in de kleuren van je website en je website zo vormgeven dat het geheel soepel in elkaar overloopt.

Dit artikel beschrijft de basis integratie van de de ticketshop in eigen website. We bieden ook de mogelijkheid voor een geavanceerde integratie. Hiermee kunnen bezoekers —op evenement pagina's van je eigen website— kaartjes voor verschillende evenementen toevoegen aan een mandje. Middels de geavanceerde integratie kunnen bezoekers in je eigen website een orderoverzicht (de inhoud van hun mandje) inzien. We hebben een apart artikel met meer informatie over de geavanceerde integratie.

Met de basis integratie kun je drie soorten pagina's embedden. Hieronder geven we uitleg bij elke paginasoort.

1. All events - tickets voor alle evenementen van de default ticketshop

In de default ticketshop worden evenementen met online kaartverkoop getoond die in deze ticketshop worden verkocht. Je kunt deze bijvoorbeeld op de home page van je website plaatsen of op een aparte pagina die vanuit de hoofdnavigatie van je site met een duidelijke Tickets knop te benaderen is. Hiervoor gebruik je het volgende stukje code:

<iframe data-stager-ticketshop height="650" width="400" frameborder="0" src="https://[organisatie].stager.co/web/tickets" style="border: 0px; background: transparent; max-width: 100%;"></iframe>


Vervang hierbij [organisatie] met de subdomeinnaam waarop je organisatie's Stager ticketshop te bereiken is.

2. Per event - alleen tickets van een bepaald evenement

Een event ticket pagina toont enkel de tickets van een specifiek evenement. Je kunt deze plaatsen in je website op een detail pagina van een evenement zelf, of op een pagina die getoond wordt als de bezoeker op een Koop Tickets knop klikt. Hiervoor gebruik je het volgende stukje code: 

<iframe data-stager-ticketshop height="650" width="400" frameborder="0" src="https://[organisatie].stager.co/web/tickets/[eventid]" style="border: 0px; background: transparent; max-width: 100%;"></iframe>


Vervang hierbij [organisatie] met de subdomeinnaam waarop je organizatie's Stager ticketshop te bereiken is. Vervang [eventid] met het id van het evenement wat je vindt in de URL op de tickets pagina van het evenement binnen Stager. 

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. Je kunt natuurlijk ook de "All events" integratie (zoals genoemd in punt 1) gebruiken in dat geval.

3. Custom ticket shop - tickets van evenementen in een gescheiden ticketshop

Een custom ticketshop is in feite hetzelfde als de algemene ticketshop, alleen kan deze ticketshop los worden opgemaakt en evenementen kunnen hier apart aan worden toegevoegd. Dit wordt doorgaans gedaan wanneer een organisator bijvoorbeeld een festival organiseert naast haar reguliere kaartverkoop. Lees het artikel voor meer info over custom ticketshops.

<iframe data-stager-ticketshop height="650" width="400" frameborder="0" src="https://[organisatie].stager.co/[ticketshopnaam]/tickets" style="border: 0px; background: transparent; max-width: 100%;"></iframe>


Vervang hierbij [organisatie] met de subdomeinnaam waarop je organizatie's Stager ticketshop te bereiken is. Vervang [ticketshopnaam] met de naam van de ticketshop die je wilt inladen.

Opmaak

Vanuit esthetisch oogpunt kan er gekozen worden om het iframe breder te maken. Er worden in principe geen eisen gesteld aan de hoogte en breedte van het iframe. Handig om te weten is dat de ticketshop naar desktop formaat springt vanaf 768 pixels breed. In desktop formaat is ook het achtergrond plaatje zichtbaar, dus we adviseren om binnen een breedte van 768 pixels te blijven.

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.

Was dit een antwoord op uw vraag?