Ticketverkoop koppelen aan je bestaande website (met code­voorbeelden)

Heb je al een website voor je vereniging, sportclub of organisatie? Dan hoef je je bezoekers niet weg te sturen om tickets te kopen. MijnEvent draait als drop-in op je eigen site: je plakt één scriptregel en een div, en de ticketwidget verschijnt — inclusief checkout, zonder dat de bezoeker je site verlaat. Het krachtigste onderdeel is de ledenkoppeling: omdat het lid al is ingelogd op jóuw website, kan die website per aankoop een ondertekend token meegeven dat zegt "dit is een lid". MijnEvent kent dan automatisch de ledenprijs of gratis toegang toe, terwijl externen het normale tarief betalen. Er wordt niets gesynchroniseerd of gekopieerd — je ledenadministratie blijft de bron van waarheid en de status klopt altijd op het koopmoment. Hieronder laten we zien hoe je het toepast, met een werkend codevoorbeeld voor ontwikkelaars. De stap-voor-stap-insteluitleg voor beheerders staat in het kennisbankartikel Leden gratis, externen betalen. Zoek je alleen de widget zelf, zonder ledenkoppeling? Dan is je ticketshop embedden op je eigen website de kortere route: welke embed je kiest, waar je hem plakt en wat er bij het betalen gebeurt.

1. De widget op je site (aanbevolen: de script-embed)

In je beheer onder Integraties staat de embedcode klaar. De aanbevolen variant is één scriptregel plus één div — de widget meet zijn eigen hoogte en past de iframe automatisch aan, dus je hoeft geen vaste hoogte te gokken:

<div data-mijnevent-event="zomerfeest-2026"></div>
<script src="https://jouwclub.mijnevent.nl/embed.js" async></script>

Je kunt meerdere events op één pagina zetten door meerdere div's te plaatsen. Er is ook een eenvoudige iframe-variant, maar die vereist dat je de hoogte zelf vastzet (bij lange ticketlijsten of de checkout-stap wordt de inhoud dan afgeknipt) — gebruik die alleen als je geen script mag plaatsen.

2. De vormgeving: de embed-studio

De ticketshop hoort bij je event te passen, niet andersom. In Huisstijl → Embed-studio kies je organisatie-breed hoe de widget eruitziet, met een live preview van de échte widget:

• Template: Klassiek (de vertrouwde lijst), Hero (grote sfeerfoto met je logo en de eventtitel over de foto), Compact (minimaal, voor sidebars en smalle plekken) of Stappen (stapsgewijs afrekenen met voortgangsindicatie: tickets → gegevens → overzicht → betalen).
• Thema: licht, donker of automatisch (volgt de systeemvoorkeur van de bezoeker). Voor het donkere thema kun je een aparte lichte logovariant uploaden.
• Huisstijl-opties: je logo tonen, hoekafronding (strak/zacht/rond), knopstijl (gevuld of outline — de tekstkleur op de knop wordt automatisch contrastveilig gekozen), een transparante achtergrond zodat de widget opgaat in je site, en volle breedte.

Je huisstijlkleuren en lettertypen uit Huisstijl werken overal in door — ook in de succes- en foutmeldingen en zelfs de confetti. De embedcode zelf verandert niet: instellingen opslaan is genoeg, elke bestaande embed rendert direct in de nieuwe stijl.

Eén keuze stuurt je hele bezoekerskant

Wat je hier kiest, geldt niet alleen voor de widget op je eigen site. Dezelfde template en hetzelfde thema sturen ook je publieke eventpagina's op je MijnEvent-subdomein en je module-etalages — verhuur, shop, food, cursussen, lidmaatschappen, doneren en de rest. Kies je Hero, dan krijgt je eventpagina dezelfde grote sfeerkop als je widget; kies je Compact, dan wordt overal strakker en smaller gewerkt. Je hoeft dus niet per oppervlak opnieuw te kiezen, en een bezoeker die van je eigen site naar je eventpagina doorklikt ziet niet ineens een ander product.

De preview in de studio wisselt daarom mee: je kunt de widget, een echte eventpagina of een module-etalage als voorbeeld kiezen, inclusief kleuren die je nog niet hebt opgeslagen.

De verkoper staat er duidelijk bij

Onder de widget en onder je publieke pagina's staat een korte verkoper-disclaimer: "Je koopt hier tickets van {jouw organisatie} — niet van MijnEvent", met je wettelijke verkopergegevens (e-mail, telefoon, adres, KVK en btw-nummer) erbij. MijnEvent faciliteert het platform en de betaling; jij blijft de verkoper en verantwoordelijk voor het event, annuleringen en restituties. De formulering past zich aan het verkoopvlak aan — huren, bestellen, boeken of doneren in plaats van kopen. Je hoeft er niets voor te doen; het staat er automatisch, ook binnen de embed op je eigen site.

3. Een ledenprijs of besloten ticketsoort

Bij een ticketsoort stel je in het beheer twee dingen in:

• Toegang: Openbaar of Alleen voor leden (besloten ticketsoorten zijn verborgen voor het publiek).
• Ledenprijs: leeg (leden betalen normaal), 0 (gratis voor leden) of een lager bedrag (ledenkorting).

4. Het leden-token (voor ontwikkelaars)

Wanneer een ingelogd lid op je site tickets koopt, ondertekent je server een kortlevend JWT met de geheime sleutel uit Integraties. Het is een gewone HS256-token; je hebt er geen library voor nodig:

<?php
// Op je eigen server, voor een ingelogd lid:
function mijneventMemberToken(string $keyId, string $secret, array $claims): string {
    $b64 = fn ($d) => rtrim(strtr(base64_encode($d), '+/', '-_'), '=');
    $header  = $b64(json_encode(['typ' => 'JWT', 'alg' => 'HS256', 'kid' => $keyId]));
    $payload = $b64(json_encode($claims));
    $sig     = $b64(hash_hmac('sha256', "$header.$payload", $secret, true));
    return "$header.$payload.$sig";
}

$token = mijneventMemberToken('mek_...', 'msk_...', [
    'aud'     => 'jouwclub',              // jouw organisatie-ID
    'sub'     => $member->id,             // lidnummer
    'email'   => $member->email,
    'scope'   => 'event:zomerfeest-2026', // beperk tot één event
    'max_qty' => 2,                       // bv. lid + 1 introducé
    'iat'     => time(),
    'exp'     => time() + 900,            // 15 minuten geldig
]);

Geef het token mee aan de widget — server-side gerenderd, zodat de geheime sleutel nooit in de browser komt:

<div data-mijnevent-event="zomerfeest-2026" data-member-token="<?= $token ?>"></div>
<script src="https://jouwclub.mijnevent.nl/embed.js" async></script>

Wat MijnEvent controleert

Bij het tonen én bij het afrekenen verifieert MijnEvent het token opnieuw: de handtekening (via de kid → geheime sleutel), de aud (moet jouw organisatie zijn), de exp (verloopt), en een eenmalig jti tegen hergebruik. Daarnaast bepaalt scope welk event wordt ontsloten en max_qty hoeveel ledentickets de ledenprijs krijgen. Is het token ongeldig of verlopen, dan wordt de bezoeker simpelweg als betalende externe behandeld — niets breekt.

Endpoints

• POST /api/members/verify-token — controleer een token (read-only) om vóór de checkout de ledenprijzen en besloten ticketsoorten te tonen.
• POST /api/checkout — geef het token mee als member_token; de ledenprijs wordt toegepast en besloten ticketsoorten worden vrijgegeven.

Wanneer kies je wat?

• Clubsite met ledenlogin → de tokenkoppeling (deze aanpak). Altijd in sync, geen ledenlijst nodig.
• Geen ledenlogin → unieke kortingscodes per lid (eenvoudiger, handmatiger).
• Groot ledenpakket (Conscribo, AllUnited, Sportlink, LISA) → maatwerk-koppeling; neem contact op.

Aan de slag

Stel het in een avond op: maak een API-sleutel aan, zet een ledenprijs op een ticketsoort, en plaats de embed. De volledige beheerdershandleiding staat in het kennisbankartikel Leden gratis, externen betalen; meer uitleg vind je in de kennisbank. Vragen over de opzet voor jouw organisatie? We denken graag mee.