Ticketshop inbouwen
Zet je ticketshop op je eigen website, zodat bezoekers daar blijven terwijl ze kiezen, bestellen en betalen. Met onze WordPress-plugin of met een embedcode op elke andere website.
Begin in je backoffice
De code die je nodig hebt, maak je onder Instellingen > Delen en inbouwen. Kies wat je wilt delen, bijvoorbeeld de hele ticketshop of één evenement, en daarna hoe: als ticketshop (embedcode), als WordPress-plugin (shortcode) of als knop in je eigen kleur. Kopieer het resultaat en plak het op je website. Staat de shop er al, dan maak je daar ook een link naar je eigen website die de shop meteen op de goede plek opent.
Onder Waar staat je shop zie je daarna op welke pagina's je ingebouwde ticketshop de afgelopen dertig dagen is geladen, en in welke taal.
| WordPress-plugin | Installeren, instellen en de shortcode, ook in Elementor. |
| Embedcode | Voor elke andere website: het script, de attributen en de functies. |
Promolinks en besloten verkoop
Een promolink of een geheime link bouw je niet in. De sleutel in het adres zou wegvallen. Deel die als link, QR-code of knop.
Je website instellen
Staat je shop ingebouwd, vertel ons dan op welke pagina. Dat doe je zelf onder Instellingen > Delen en inbouwen > Waar staat je shop, bij Je website. Daar staan ook de pagina's waarop we je shop al zagen, zodat je er met één klik een kiest.
| Instelling | Wat het doet |
|---|---|
| Pagina met je ingebouwde ticketshop | De pagina waarop je de embedcode of de shortcode hebt gezet. Hierheen komt een bezoeker terug na het betalen en vanuit de mail voor een nieuw wachtwoord. Bij Red gaan ook de knoppen van de korte agenda hierheen. Zonder deze pagina komt de bezoeker op die momenten op je ticketshop bij ons uit. |
| Je agendapagina | Alleen Red. Waar Terug naar agenda en Verder winkelen heen gaan. Leeg betekent: de pagina hierboven. Vul alleen iets anders in als je op je website een eigen agenda hebt, los van de ingebouwde shop. |
Welke ticketshop heb je?
Wat je kunt inbouwen, hangt af van het soort ticketshop. Welke je hebt, zie je in de WordPress-plugin na het instellen, of vraag het ons.
Red
Zonder verdere instellingen toont de ingebouwde shop je agenda met alle voorstellingen, met een filter op genre. Van daaruit kiest de bezoeker een voorstelling, tickets en eventueel stoelen, en rekent af.
Opties
| Wat | WordPress | Embedcode |
|---|---|---|
| Eén evenement | event_id="123" | data-event-id="123" |
| Eén tijdslot | event_id="123" p_id="456" | data-event-id="123" data-performance-id="456" |
| Alleen een genre | Via een link, zie hieronder | data-genre="film" |
| Korte agenda | display="mini" mini_items="6" | Avayo.miniCalendar(6) |
Linken naar de ingebouwde shop
Je kunt vanaf een themapagina, een nieuwsbrief of social media meteen naar de goede plek in je ingebouwde shop linken. Die link gaat naar je eigen pagina, de pagina op je website waarop de embedcode of de shortcode staat. Niet naar je ticketshop bij ons.
Achter het adres van die pagina zet je parameters, zoals ?e_id=123. Je
pagina doet er zelf niets mee. Onze embedcode leest ze bij het laden en opent de shop
in je pagina meteen op de plek die ze aangeven. Zo stuur je met het adres van je eigen
pagina wat de bezoeker in de shop ziet.
Staat je ingebouwde shop op https://jouwdomein.nl/programma, dan werken
deze adressen:
| Adres van je eigen pagina | De ingebouwde shop opent |
|---|---|
| /programma?e_id=123 | De verkooppagina van evenement 123 |
| /programma?e_id=123&p_id=456 | De verkooppagina van tijdslot 456 |
| /programma?target=info&e_id=123 | De informatiepagina van evenement 123 |
| /programma?target=info&e_id=123&p_id=456 | De informatiepagina, met tijdslot 456 gekozen |
| /programma?target=cart | De winkelwagen |
| /programma?genre=film | De agenda met alleen films. Meerdere genres met komma's: genre=film,muziek. Zie hieronder. |
| /programma?utm_campaign=herfst | Past niets aan in wat je ziet, maar de bestelling krijgt de campagne mee. Werkt met elke regel hierboven. |
Staat er al een vraagteken in het adres van je pagina, zoals bij
/?page_id=12 in WordPress, dan zet je de parameters er met
& achter: /?page_id=12&e_id=123. De taal zet je niet
in het adres; die komt uit de embedcode of de shortcode op de pagina.
Laat de backoffice het adres maken
Onder Instellingen > Delen en inbouwen kies je wat je wilt delen en daarna Link naar je eigen website. Je krijgt het complete adres, met de nummers van je evenementen en tijdsloten en de genres zoals ze in het adres moeten. Het adres van je pagina staat al klaar als je het onder Je website hebt ingevuld.
Genres in het adres
Een genre schrijf je zoals het bij het aanmaken van het genre is vastgelegd: de
Nederlandse naam in kleine letters, met een streepje in plaats van spaties en
leestekens. Sport & Spel wordt sport-spel. Heb je twee
genres met dezelfde naam, dan krijgt de tweede er -2 achter. Geef je een
genre later een andere naam, dan blijft het oude stukje in het adres gelden. De
backoffice laat zien welk stukje bij welk genre hoort.
Het genre filtert alleen als de shop een genrefilter toont. In de vernieuwde Red is dat zo zodra er minstens twee genres op je agenda staan. In de oude Red moet het genrefilter aanstaan onder Instellingen > Functionaliteiten. Staat het uit, dan toont de shop gewoon de hele agenda.
Korte agenda
Een blok voor je homepage met de eerstvolgende voorstellingen, elk met
afbeelding, datum, titel, ondertitel en een knop naar de informatie. In de
vernieuwde Red-shop heeft de korte agenda nog de oude opmaak. Standaard gaat de
knop naar je ticketshop bij ons. Heb je je website
ingesteld, dan gaat de knop naar de pagina met je ingebouwde shop, met
?target=info&e_id=…&p_id=… erachter. De bezoeker blijft dan
op je eigen website.
Orange
Zonder verdere instellingen toont de ingebouwde shop het overzicht van je evenementen. Heb je er maar één in de verkoop, dan opent meteen dat evenement.
Opties
| Wat | WordPress | Embedcode |
|---|---|---|
| Eén evenement | event_id="123" | data-event-id="123" |
| Een groep evenementen | Niet mogelijk | data-filter="zomer", meerdere met | ertussen |
Voor een groep evenementen geef je elk evenement een filtercode. Dat is een
extra functie die wij voor je aanzetten, vraag het ons. Linken naar één
evenement doe je met /programma?e_id=123. Een tijdslot, genre,
informatiepagina of korte agenda heeft Orange niet.
Yellow
Zonder verdere instellingen toont de ingebouwde shop de lijst met je evenementen. Heb je er maar één in de verkoop, dan opent meteen het bestelformulier.
Eén evenement bouw je in met event_id="123" in de shortcode of
data-event-id="123" in de embedcode. Linken naar één evenement doe
je met /programma?e_id=123. Filters, tijdsloten, een
informatiepagina of een korte agenda heeft Yellow niet.
Voor elke ticketshop
Logo en headerafbeelding
Ingebouwd laat de shop vanzelf zijn logo en headerafbeelding weg, want die heeft je website al. Wie de shop bij ons opent, via een link of QR-code, ziet ze wel. Daar hoef je niets voor in te stellen.
Talen
De shop toont alleen talen die je hebt aangezet onder Instellingen >
Talen. Je kiest de taal met nl, en,
de of fr. Met auto volgt de shop de taal
van de pagina waarop hij staat. Dat is handig als je website meerdere
taalversies heeft. Een taal die je shop niet voert, wordt je standaardtaal.
Herkomst meten
Staan er utm-waarden in het adres van de pagina, zoals
/programma?utm_source=nieuwsbrief, dan geeft de shop die door aan je
rapportages.
Opmaak
De ingebouwde shop staat in een eigen venster en neemt de kleuren en lettertypen van je website niet vanzelf over. Die stel je in onder Instellingen > Huisstijl: je kleuren, je logo en de headerafbeelding. Voor meer heb je het veld CSS voor extra opmaak op dezelfde pagina. In de vernieuwde Red-shop zet je daar bijvoorbeeld je eigen lettertypen:
@font-face {
font-family: "Jouw Kopletter";
src: url("https://jouwdomein.nl/fonts/kopletter.woff2") format("woff2");
}
:root {
--font-display: "Jouw Kopletter", sans-serif;
--font-body: "Open Sans", sans-serif;
}
Eigen CSS kan verschuiven
Je CSS leunt op de opbouw van onze shop, en die verbeteren we geregeld. Houd het bij kleuren, lettertypen en kleine aanpassingen, en kijk na een grotere update even of alles nog goed staat. Voor lettertypen heb je een licentie nodig die ook het domein van je ticketshop dekt.
Binnenkort: je eigen programma
We werken aan een uitbreiding van de WordPress-plugin waarmee je het programma en de evenementpagina's zelf ontwerpt, bijvoorbeeld in Elementor. De plugin zet je evenementen dan als berichten in WordPress, en voor het boeken opent de ticketshop bij de juiste voorstelling. Zodra die er is, lees je het hier.
Kan je webbouwer programmeren, dan kan het nu al: de Agenda-feed geeft je programma als JSON of XML, met links om te boeken.