Table of Contents
Event overview page
Updated
by Matija Vojvodic
The events overview page was created to help our clients display a list of selected events on their own website. This feature is targeted to our customers who have a lot of events which are open to public registration and which they want to share / list on their website.

How does it work
The event overview page is a javascript client included in your webpage (see next block) which pulls and shows all events which are configured to support the overview page. To activate an event for the overview page create a registration page and activate the publication in the step "Publication on Overview Page". You can also provide an alternative event name, an event description and an optional event image.
Event overview pages are a premium feature of MATE. To get access, please contact the MATE sales team: sales@mateforevents.com
How do I activate an event for the event overview?
To activate an event for the overview page, create a registration page and activate the publication in the step "Publication on the overview page". You can also store an alternative event name, an event description and optionally an event picture.

The MATE Javascript Client
MATE offers you an easy-to-use Javascript client based on React, which you can embed in your site and easily customise.
How do I include the event overview page in my webpage?
You have to include a single html element (<div> with the id mate-overview-container) into your html code where you want the list to appear. The html element contains a unique ID to identify your account (if you are interested, feel free to contact MATE to get this ID). Furthermore you need to link two css-files and a javascript file. Here's an example of the code:
<html>
<head>
<title>MATE Veranstaltungsübersicht Beispiel</title>
<link
href="https://services.mateforevents.com/client/registration_page_overview/static/css/mate-main.css"
rel="stylesheet"
/>
<link
href="https://services.mateforevents.com/client/registration_page_overview/static/css/mate-brand.css"
rel="stylesheet"
/>
</head>
<body>
<div
id="mate-overview-container"
data-account-id="[YOUR ID]">
</div>
<script src="https://services.mateforevents.com/client/registration_page_overview/javascript">
</script>
</body>
</html>
Custom styling of the overview page
The overview page uses two separate css files: mate-main.css and mate-brand.css.
mate-main.css is holding the functional part of the overview app and must not be changed.
mate-brand.css is a possible implementation of you brand information. You can use it as a base to tinker around with the styling of the page overview. Either you link to it in your html page and overwrite parts of it or you can copy all the styles into your page / css file and change them according to your needs. The following settings are part of the mate-brand.css file:
OVERVIEW PAGE WIDTH
.mate-app-width {
max-width: 130rem;
}
COLOR
background-color: #e9edf1;
border-color: #e9edf1;
}
.mate-secondary-color {
background-color: #cacdd2;
border-color: #cacdd2;
}
.mate-tertiary-color {
border-color: #fff;
background-color: #fff;
}
.mate-text-color {
color: #000;
}
.mate-light-text-color {
color: #777880;
}
.mate-search-icon-color {
fill: #000;
}
.mate-arrows-icon-color {
stroke: #000;
}
.mate-registration-btn {
background-color: #0a3054;
color: #fff;
}
.mate-fully-booked-btn {
background-color: #e12e2e;
color: #fff;
}
.mate-reg-deadline-over-btn {
background-color: #777880;
color: #fff;
}
.mate-tag:hover {
border-color: #cacdd2;
}
.mate-expand-line-phone {
border-color: #e9edf1;
}
.mate-loading-indicator {
background-color: #7e7e7e;
}
BORDER RADIUS (you can put it to 0px if you want your buttons to be sharp)
.mate-full-border {
border-radius: 2px;
}
.mate-left-border {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.mate-right-border {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}

The search field can be used to search in the title and description of an event. If tagging (optional feature) is used, the events can be filtered for certain tags. It's possible to group tags into sections. For information how to do this, please contact your MATE Support team: support@mateforevents.com
- It's possible to hide events once they are fully booked by adding hide-fully-booked="true" to our div container when you are embedding him into your website:
<div id="mate-overview-container"
data-account-id="xxx-xxx-xxx-xxx"
hide-fully-booked="true"></div>
API / Interface
If you would like to integrate the events from MATE into an existing event overview or otherwise use them through your system (for example, to integrate them into the search function of your CMS), it is a good idea to access our event overview interface directly.
All that is needed is an HTTP GET request to the URL
https://app.mateforevents.com/api/webclient/v1/registration-pages?overview_ids=[event-overview-IDs]
omma-separated UUIDs that identify your account and that you can obtain from the MATE team. For test data, you can simply replace [UUIDs] with "testdata". In response, you will receive a JSON array with the following information:
Field name | JSON Data typ | Description |
uuid | String | Unique identification number for an event |
name | String | Internal name of the event |
startDate | Date* | Start date and time of the event in ISO format |
endDate | Date* | End date and time of the event in ISO forma |
location | Object | Venue of the event consisting of:
|
title | String | Title for event overview |
teaserText | String | Teaser text for event overview with potential line breaks |
teaserImageUrl | String (URL) | URL to the teaser image for the event |
publicRegistrationUrl | String (URL) | URL to the public registration page in MATE. Use this URL to link to the event registration. |
registrationClosedDate | Date* | Date from which the registration page is closed. Zero if no registration deadline is set. |
openRegistrationSlots | Number | Quantity of free places. At zero, no more registration is possible. Zero if no limit has been set. |
tags | List of objects | List of tag objects that can be defined for an event and are unique in the account. A tag object consists of these properties:
|
*) Date is a string in ISO 8601 format yyyy-MM-dd'T'HH:mm:ss.SSSZ
Example JSON
[
{
"uuid":"95a6f8ca-4000-44d1-96a3-d9ad666fca9e",
"name":"MATE Release Party",
"startDate":"2021-04-23T12:00:00.000Z",
"endDate":"2021-04-23T14:00:00.000Z",
"location":{
"latitude":52.5020105,
"longitude":13.3303865,
"textRepresentation":"MATE Development GmbH, Rankestraße 9, 10789 Berlin"
},
"title":"TEST",
"teaserText":"Lorem Ipsum",
"teaserImageUrl":"https://www.mateforevents.com/assets/logos/mate-logo.svg",
"registrationClosedDate":"2021-01-20T18:00:00.000Z",
"openRegistrationSlots":500,
"tags":[
{
"uuid":"2639374c-b5ed-419c-bc07-3171e6a56468",
"name":"Tag2"
},
{
"uuid":"00a02349-ba99-490a-a84a-498e20681648",
"name":"Tag1"
}
],
"publicRegistrationUrl":"https://app.mateforevents.com/r/matereleaseparty"
}
]