Veranstaltungsübersichtsseite

Mit der Übersicht ist es möglich auf einfache Weise Ihre Veranstaltungen auf Ihrer Webseite zu veröffentlichen. Dieser im Enterprise Bereich erhältliche Baustein kann durch Integration und Ihr Webdesign auf Ihrer Webseite eingebunden 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 Übersichtsseite ist ein Javascript-Client, der in Ihre Webseite eingebunden ist (siehe unten) und alle Ereignisse, die zur Unterstützung der Übersichtsseite konfiguriert sind, abruft und anzeigt. 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 ein optionales Veranstaltungsbild angeben. 

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

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

Sie müssen ein einzelnes html-Element (<div> mit der id mate-overview-container) in Ihren html-Code einfügen, wo die Liste erscheinen soll. Das html-Element enthält eine eindeutige ID zur Identifizierung Ihres Kontos (wenn Sie daran interessiert sind, können Sie diese ID bei MATE erfragen). Außerdem müssen Sie zwei css-Dateien und eine Javascript-Datei verknüpfen. Hier ist ein Beispiel für den 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>

 

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
.mate-app-width {
max-width: 130rem;

 

FARBE
 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 (Sie können es auf 0px setzen, wenn Ihre Tasten scharf sein sollen)
.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. Für Informationen dazu wenden Sie sich bitte an Ihr MATE-Supportteam: support@mateforevents.com 

Zusätzliche Funktionen, die Sie implementieren können

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:

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


Wie haben wir uns geschlagen?


Powered by HelpDocs (opens in a new tab)