Embedcode
Voor elke website zonder WordPress: één script dat je ticketshop op de pagina zet, in een venster dat meegroeit met de inhoud. Je stelt het in met attributen, of met een paar regels JavaScript als je meer wilt sturen.
De snelle manier
Plak dit op de plek waar de shop moet komen. Een kant-en-klare versie voor je eigen shop, een evenement of een tijdslot maak je in je backoffice onder Instellingen > Delen en inbouwen, met als manier Ticketshop.
<div id="avayo-ticketshop"></div>
<script src="https://storage.googleapis.com/avayo-production/assets/ticketshop.js"
data-subdomain="jouwshop"
data-target="#avayo-ticketshop"
data-locale="auto"></script>
| Attribuut | Werkt bij | Wat het doet |
|---|---|---|
| data-subdomain | Alle | De naam van je shop, jouwshop voor jouwshop.avayo.nl. Verplicht, of data-hostname. |
| data-hostname | Alle | In plaats van data-subdomain, als je shop op een eigen domein staat, bijvoorbeeld tickets.jouwdomein.nl. |
| data-target | Alle | Het element waarin de shop komt. Zonder dit attribuut komt de shop direct na het script. |
| data-locale | Alle | nl, en, de, fr of auto voor de taal van de pagina. |
| data-event-id | Alle | Opent de shop bij dit evenement. |
| data-performance-id | Red | Opent de ticketstap van één tijdslot. Samen met data-event-id. |
| data-genre | Red | Toont alleen dit genre, bijvoorbeeld film. Meerdere met komma's. |
| data-filter | Orange | Toont alleen evenementen met deze filtercode. Meerdere met | ertussen. |
| data-link | Alle | Opent een blijvende link uit Delen en inbouwen. |
| data-utm-source data-utm-medium data-utm-campaign | Alle | Herkomst voor je rapportages. Staan er utm-waarden in het adres van de pagina, dan winnen die. |
Met JavaScript
Laat je data-subdomain en data-hostname weg, dan doet
het script niets vanzelf en stuur je het zelf aan. Roep eerst
init aan, dan de opties, en als laatste
insertTicketshop of miniCalendar.
<div id="tickets"></div> <script src="https://storage.googleapis.com/avayo-production/assets/ticketshop.js"></script> <script> Avayo.target("#tickets"); Avayo.init("jouwshop"); Avayo.locale("auto"); Avayo.genre("film"); Avayo.offset(80); Avayo.insertTicketshop(); </script>
| Functie | Wat het doet |
|---|---|
| init(shop) | Verplicht, als eerste. De naam van je shop of het eigen domein, net als bij data-subdomain en data-hostname. |
| target(selector) | Het element waarin de shop komt. Roep het aan vóór init. |
| locale(taal) | Zie data-locale. |
| event_id(nummer) | Zie data-event-id. |
| performance_id(nummer) | Zie data-performance-id. Alleen Red. |
| genre(slug) | Zie data-genre. Alleen Red. |
| filter(code) | Zie data-filter. Alleen Orange. |
| link(naam) | Zie data-link. |
| utm({source, medium, campaign}) | Zie de data-utm-attributen. |
| offset(pixels) | De hoogte van een vaste menubalk bovenaan je website. Als de shop naar boven scrolt, bijvoorbeeld bij een volgende stap, valt de bovenkant dan niet achter je menu. |
| scroll(true) | Scrolt de pagina bij het laden van de shop naar boven, tot aan de offset. |
| insertTicketshop() | Zet de shop op de pagina. Als laatste aanroepen. |
| miniCalendar(aantal) | Zet in plaats van de shop een korte agenda met de eerstvolgende voorstellingen op de pagina. Alleen Red. |
| version() | Geeft de versie van het script. |
Korte agenda
Voor een blok op je homepage met de eerstvolgende voorstellingen, elk met afbeelding, datum, titel, ondertitel en een knop naar de informatie. Alleen bij Red. In de vernieuwde Red-shop heeft de korte agenda nog de oude opmaak.
<script src="https://storage.googleapis.com/avayo-production/assets/ticketshop.js"></script>
<script>
Avayo.init("jouwshop");
Avayo.locale("auto");
Avayo.miniCalendar(6);
</script>
Standaard gaat de knop naar je ticketshop bij ons. Vul je de pagina met je ingebouwde shop in onder Je website, dan gaat de knop daarheen en blijft de bezoeker op je eigen website.
Versies
Het script staat bij ons en je laadt altijd de nieuwste versie. Verbeteringen
komen dus vanzelf op je website, zonder dat je de code hoeft aan te passen. Met
Avayo.version() in de console van je browser zie je welke versie er
draait. Zet het script niet op je eigen server, want dan mis je die updates.
Verder
Welke opties bij welk soort ticketshop werken, linken naar een genre, een evenement of de winkelwagen, de opmaak en wat er na het betalen gebeurt, staan onder Ticketshop inbouwen.