Inhaltsverzeichnis

Die Veranstaltungs-Übersichtsseite

Matija Vojvodic Updated von Matija Vojvodic

Mit der Übersicht ist es möglich auf einfache Weise Ihre Veranstaltungen auf Ihrer Webseite zu veröffentlichen. Die Veranstaltungsseite kann durch den MATE Client einfach in Ihre Webseite eingebunden werden und mit wenigen Handgriffen an ihr Design angepasst werden. Diese Funktion ist besonders interessant für jene Kunden, die mehrere Veranstaltungen mit einer öffentlichen Registrierung anbieten.

mate-event-overview-example.netlify.com__iPad_Pro_.png

Wie funktioniert es? 

Die Veranstaltungsübersicht bietet Ihnen die Möglichkeit, Veranstaltungen auf eine einfache Art und Weise in Ihrer Webseite aufzulisten. Die einfachste Art und Weise ist es, den MATE JavaScript Client in Ihrer Seite einzubinden. Für das Einbinden und Anpassen sind nur wenige HTML und CSS Kenntnisse von Nöten. Alternative kann die Veranstaltungsübersicht auch per REST Schnittstelle im Format JSON abgefragt und weiterverarbeitet werden. Mehr hierzu finden Sie am Ende des Artikels.

Die Ereignis-Übersichtsseiten sind eine Premium-Funktion von MATE. Um Zugang zu erhalten, wenden Sie sich bitte an das MATE-Verkaufsteam

Wie schalte ich eine Veranstaltung für die Veranstaltungsübersicht frei?

Um eine Veranstaltung für die Übersichtsseite zu aktivieren, erstellen Sie eine Registrierungsseite und aktivieren Sie die Veröffentlichung im Schritt "Veröffentlichung auf der Übersichtsseite". Sie können auch einen alternativen Veranstaltungsnamen, eine Veranstaltungsbeschreibung und optional ein Veranstaltungsbild hinterlegen. 

Der MATE Javascript Client

MATE bietet Ihnen einen einfach zu nutzenden Javascript Client basierend auf React, den Sie in Ihrer Seite einbinden und leicht anpassen können.

Wie kann ich die Veranstaltungsübersichtsseite in meine Webseite einbinden?

Fügen Sie einfach ein einzelnes Div-Html-Element (mit der ID mate-overview-container) in Ihren Html-Code an der Stelle ein, an der Sie die Veranstaltungsübersicht wünschen. Das html-Element enthält eine eindeutige Veranstaltungsübersichts-ID (VAÜ-ID) zur Identifizierung Ihres Kontos. Diese VAÜ-ID erhalten Sie von MATE. Außerdem müssen Sie die folgenden Dateien in Ihre Seite einbinden:

  • Den JavaScript-Client: dieser auf React basierende Client lädt anhand ihrer eindeutigen VAÜ-ID Ihre ausgewählten Veranstaltungen und zeigt diese an.
  • Das Basis/Main-CSS: dieses ist für die Darstellung des MATE Clients zwingend notwendig und sollte nicht verändert werden.
  • Das Brand-CSS: der Inhalt dieser Datei sollte selbst gehostet und kann beliebig angepasst werden um den MATE Client selbst zu gestalten. Weitere Informationen hierzu finden Sie im Abschnitt "Individuelle Gestaltung der Übersichtsseite"
Einfache Beispiel-Implementierung
<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>
<p>Hier könnte beliebiger Content von Ihnen stehen, zum Beispiel Ihre Navigation</p>

<div
id="mate-overview-container"
data-account-id="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx">
</div>
<p>Hier könnte anderer Content stehen, zum Beispiel ein Footer mit Datenschutz und Impressum</p>
<script src="https://services.mateforevents.com/client/registration_page_overview/javascript">
</script>

</body>
</html>

 

Individuelle Gestaltung der Übersichtsseite

Die Übersichtsseite verwendet zwei separate CSS-Dateien: mate-main.css und mate-brand.css.

Die Datei mate-main.css enthält den funktionalen Teil der Übersichtsseite und darf nicht verändert werden.

mate-brand.css ist eine mögliche Implementierung Ihrer Markeninformationen. Sie können sie als Basis verwenden, um an der Gestaltung der Seitenübersicht zu basteln. Entweder Sie verlinken darauf in Ihrer html-Seite und überschreiben Teile davon oder Sie kopieren alle Stile in Ihre Seiten-CSS-Datei und ändern sie nach Ihren Bedürfnissen. Die folgenden Einstellungen sind Teil der mate-brand.css-Datei:

 

Breite der Übersichtsseite

Mit diesem Wert können Sie die gewünschte Breite des MATE Clients anpassen.

.mate-app-width {
max-width: 130rem;

 

Farben

Mit diesen Farbwerten können Sie den MATE Client ihrem Brand anpassen.

.mate-primary-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;
}

 

Abrundung der Ecken

Dieser Wert beschreibt die Abrundung von Ecken, Setzen Sie den Wert auf 0, wenn Sie keine abgerundeten Ecken wünschen.

.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;
}

Slice.jpg

Das Suchfeld kann zur Suche im Titel und in der Beschreibung einer Veranstaltung verwendet werden. Bei Verwendung von Tagging (optionale Funktion) können die Ereignisse nach bestimmten Tags gefiltert werden. Es ist möglich, Tags in Abschnitte zu gruppieren. Weiterführende Informationen zu den Veranstaltungs-Tags erhalten Sie hier.

Es ist möglich, Veranstaltungen zu verbergen, wenn sie einmal ausgebucht sind, indem Sie hide-fully-booked="true" zu unserem Div-Container hinzufügen, wenn Sie ihn in Ihre Website einbinden. Veranstaltungen gelten dann als ausgebucht, wenn sie beim Erstellen der Webseite eine Maximale Anzahl an Anmeldungen / Zusagen eingestellt haben und diese erreicht wurde.

<div id="mate-overview-container"
data-account-id="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
hide-fully-booked="true"></div>

API / Schnittstelle

Möchten Sie die Veranstaltungen aus MATE in eine bestehende Veranstaltungsübersicht integrieren oder anderweitig durch Ihr System nutzen (zum Beispiel um diese in die Suche Ihres CMS zu integrieren) bietet es sich an, direkt auf unsere Veranstaltungsübersichtsschnittstelle zuzugreifen.

Hierfür reicht eine HTTP GET Abfrage auf die URL

https://app.mateforevents.com/api/webclient/v1/registration-pages?overview_ids=[VAÜ-IDs]

VAÜ-IDs bezeichnet hier ein oder mehrere komma-separierte UUIDs, die ihr Konto identifizieren und die Sie vom MATE Team erhalten können. Für Testdaten können Sie [VAÜ-IDs] einfach durch "testdata" ersetzen. Als Antwort erhalten Sie eine JSON-Array mit den folgenden Informationen:

Feldname

JSON Datentyp

Beschreibung

uuid

String

Eindeutige Identifikationsnummer für eine Veranstaltung

name

String

Interner Name des Events

startDate

Datum*

Start Datum und Uhrzeit der Veranstaltung im ISO Format

endDate

Datum*

End Datum und Uhrzeit der Veranstaltung im ISO Format

location

Objekt

Ort der Veranstaltung bestehend aus:

  • latitude (Number): Breitengrad als Double-Wert
  • longitude (Number): Längengrad als Double-Wert
  • textRepresentation (String): Adresse oder Name des Ortes

title

String

Titel für Event Übersicht.

teaserText

String

Teaser Text für Event Übersicht mit potentiellen Zeilenumbrüchen.

teaserImageUrl

String (URL)

URL zum Teaser-Bild für die Veranstaltung

publicRegistrationUrl

String (URL)

URL zur öffentlichen Registrierungsseite in MATE.

Nutzen Sie diese URL um zur Registrierung der Veranstaltung zu verlinken.

registrationClosedDate

Datum*

Datum ab dem die Registrierungsseite geschlossen ist

null, falls kein Anmeldeschluss gesetzt ist.

openRegistrationSlots

Number

Menge von freien Plätzen. Bei 0 ist keine Anmeldung mehr möglich.

null, falls keine Begrenzung festgelegt wurde

tags

Liste von Objekten

Liste von Tag-Objekten die für eine Veranstaltung festgelegt werden können und eindeutig im Account sind. Ein Tag-Objekt besteht aus diesen Eigenschaften:

  • id (Number): Eindeutiger Identifier der vom Backend zugewiesen wird.
  • externalId (String): Frei wählbare externe ID, die zur Identifikation durch den Client genutzt werden kann.
  • name (String): Name eines Tags.

*) Datum ist ein String im ISO 8601 Format yyyy-MM-dd'T'HH:mm:ss.SSSZ

Beispiel 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"
}
]

Wie haben wir uns geschlagen?

App Branding für Ihre Unternehmensidentität (Corporate Identity)

Die Veranstaltungs-Tags

Kontakt