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

You can override the default styling of the order pages with your own CSS to match your site's design. See Custom CSS.

---

See also: Custom CSS · WordPress plugin · Public endpoints