Manual integration

If your site is not WordPress, or you want more control, you can integrate manually. Two options: link directly to our hosted pages, or load a JavaScript snippet that opens ticket sales in a pop-up or side-drawer without leaving your site.

Link to our site

The simplest option — create a link to the VoordeMensen-hosted page:

<a href="https://tickets.voordemensen.nl/demo/">Tickets</a>

To link directly to a specific event, add /event/<event_id>:

<a href="https://tickets.voordemensen.nl/demo/event/95">Tickets for our Demo event</a>

Optional query parameters

Parameter	Purpose
murmur	A session ID you assign to this user and order
redirect_url	HTTPS-only URL to redirect the user to after payment
lang	ISO 639-1 code for the UI locale: en, de, or nl

Example:

https://tickets.voordemensen.nl/demo/event/95?murmur=dsfksduf93&redirect_url=https://yoursite.nl/thanks/

Calendar view

To display a calendar view of all events:

<a href="https://tickets.voordemensen.nl/demo/cal">Calendar</a>

Or filter to one main event:

https://tickets.voordemensen.nl/demo/cal/220

Note: linking to our site takes the user completely away from yours.

JavaScript loaders (pop-up / side-drawer)

To keep users on your site, load a small JavaScript snippet that opens ticket sales in an overlay.

Side loader

<script src="https://tickets.voordemensen.nl/client_name/event/vdm_sideloader.js"></script>

Pop-up loader

<script src="https://tickets.voordemensen.nl/client_name/event/vdm_loader.js"></script>

Replace client_name with your short client name (e.g. brakkegrond).

Invoke the loader

Once the script is loaded, call the JavaScript functions:

vdm_order(event_id)
vdm_calendar()

Example with a specific event:

<a href="javascript:vdm_order(95)">Order now</a>

Optional arguments

For smoother UX across cross-domain cookie/session issues, pass a session ID, language code, and redirect URL:

vdm_order(95, '<?= session_id() ?>', 'en', 'https://yoursite.com/')

Cart counter

To show the number of items in a user's basket on your own site, query the cart endpoint and sum the numberoftickets keys:

Tickets in your basket: <span id="basket"></span>

$.get("https://api.voordemensen.nl/v1/demo/cart/<cart_id>", function(data) {
  let count = 0;
  data.forEach(item => {
    if (item.numberoftickets) count += parseInt(item.numberoftickets);
  });
  $("#basket").text(count);
});

For a full example see the Cart endpoint.

Customize the look

The checkout overlay uses several CSS classes you can override in your own stylesheet to better match your site's design:

Class	What it styles
.vdmHeader	Div containing the event image and title
.vdm_inline_EventName	Event name just above the select boxes
.vdm_inline_EventShortText	Short text after the event name
.vdmTable	The table of cart lines
.vdmTitle	Event name, location, and time in the cart
.vdmReturnModal	Return-after-payment modal

Add your overrides after our loader is included, or in your theme's main stylesheet.

---

See also: WordPress plugin · Public endpoints