Quickstart
Das Widget wird als script-Tag eingebunden. Füge diesen Code an der gewünschten Stelle deiner HTML-Seite ein – ein Container-div wird automatisch erzeugt, falls keiner vorhanden ist.
<!-- Optional: eigener Container -->
<div id="eventgate-widget"></div>
<script
src="https://eventgate24.de/eg/embed.js"
data-api-key="DEIN_API_KEY"
data-api-url="https://eventgate24.de"
data-view="table"
data-layout="big-days"
></script>Den API-Key findest du im Admin unter Einstellungen → Widget. Es gibt Tenant-API-Keys (nur eigene Events) und einen General API Key (alle Tenants, nur für
layout=homepage).Pflichtparameter
| Attribut | Typ | Beschreibung |
|---|---|---|
| data-api-key | Pflicht | Dein Tenant- oder General-API-Key aus dem Admin-Dashboard. |
| data-api-url | Pflicht | Basis-URL der API ohne Pfad, z.B. https://eventgate24.de. Tipp: window.location.origin verwenden wenn Widget und API auf derselben Domain laufen. |
Layouts
Das Layout steuert die visuelle Darstellung. Wird kein Layout gesetzt, gilt die Standard-Tabellenansicht.
data-layout="big-days"
Big Days
Aufklappbare Listenansicht, chronologisch nach Datum gruppiert. Ideal für Spielpläne und Kursprogramme.
Demo ansehen →data-layout="big-card"
Big Card
Kachelansicht mit großem Event-Bild, Beschreibung und Buchungs-Button. Für visuell starke Auftritte.
data-layout="homepage"
Homepage
Galerie-Ansicht über alle Tenants. Nur mit General API Key. Unterstützt zusätzliche Elemente (Suche, Top-20, Countdown …).
Demo ansehen →(kein layout)
Standard Tabelle
Einfache Listenansicht mit data-view="table", oder Monatskalender mit data-view="calendar".
Ansichten (view)
Der Parameter data-view ist relevant wenn kein data-layout gesetzt ist.
| Wert | Typ | Beschreibung |
|---|---|---|
| table | Standard | Chronologische Listenansicht aller Events mit Buchungs-Buttons. |
| calendar | Optional | Monatskalender mit Vor/Zurück-Navigation. Klick auf einen Tag zeigt die Events des Tages. |
Bei Verwendung von
data-layout hat data-view keine Wirkung – das Layout bestimmt die Darstellung vollständig.Filter
Mit Filterparametern schränkst du ein, welche Events das Widget anzeigt. Es reicht immer ein Filter – sie schließen sich gegenseitig aus.
| Attribut | Typ | Beschreibung |
|---|---|---|
| data-event-slug | Optional | Zeigt nur das Event mit diesem URL-Slug. Den Slug findest du im Admin beim jeweiligen Event (z.B. biene-maja-lernt-fliegen). |
| data-event-id | Optional | Zeigt nur das Event mit dieser UUID. Alternativ zu data-event-slug. |
| data-event-type-id | Optional | Zeigt nur Events dieses Veranstaltungstyps (UUID). Nützlich um z.B. nur Kurse oder nur Konzerte anzuzeigen. |
<!-- Nur ein bestimmtes Stück anzeigen -->
<script
src="https://eventgate24.de/eg/embed.js"
data-api-key="DEIN_KEY"
data-api-url="https://eventgate24.de"
data-layout="big-days"
data-event-slug="biene-maja-lernt-fliegen"
></script>Darstellung
| Attribut | Typ / Standard | Beschreibung |
|---|---|---|
| data-show-tenant-name | Standard: true | Unternehmensname im Widget-Header anzeigen. Auf "false" setzen um ihn auszublenden – sinnvoll wenn der Name bereits auf der eigenen Website steht. |
| data-empty-message | Standard: "Keine kommenden Veranstaltungen" | Text der angezeigt wird, wenn keine Events vorhanden sind. Frei formulierbar, z.B. "Aktuell keine Vorstellungen". |
| data-css-url | Optional | URL zu einem eigenen CSS-File das nach dem Widget-CSS geladen wird. Damit lassen sich Farben, Schriften und Layout überschreiben. |
<script
src="https://eventgate24.de/eg/embed.js"
data-api-key="DEIN_KEY"
data-api-url="https://eventgate24.de"
data-layout="big-days"
data-show-tenant-name="false"
data-empty-message="Aktuell keine Vorstellungen geplant"
></script>Homepage-Elemente
Nur relevant bei data-layout="homepage" mit dem General API Key. Das Widget besteht dann aus modularen Elementen, die einzeln aktiviert und in der Reihenfolge konfiguriert werden können.
| Attribut | Standard | Beschreibung |
|---|---|---|
| data-element-search | false | Volltext-Suche über alle Events aktivieren. |
| data-element-top5 | false | Top-20-Galerie mit den beliebtesten und trendenden Events anzeigen. |
| data-element-countdown | false | Countdown-Banner zum nächsten Event anzeigen. |
| data-element-lastminute | false | Last-Minute-Angebote (Events mit wenig freien Plätzen) hervorheben. |
| data-element-ticker | false | Laufender Ticker mit kommenden Event-Terminen. |
| data-element-order | "countdown,search,top5,lastminute,ticker" | Reihenfolge der Elemente als kommagetrennte Liste. Nur aktivierte Elemente werden angezeigt. |
<!-- Homepage mit Countdown, Top-20 und Suche -->
<script
src="https://eventgate24.de/eg/embed.js"
data-api-key="GENERAL_API_KEY"
data-api-url="https://eventgate24.de"
data-layout="homepage"
data-element-countdown="true"
data-element-top5="true"
data-element-search="true"
data-element-order="countdown,top5,search"
></script>Alle Parameter – Übersicht
| Attribut (embed.js) | URL-Param | Beschreibung |
|---|---|---|
| data-api-key | apiKey | API-Key (Pflicht) |
| data-api-url | apiUrl | Basis-URL der API (Pflicht) |
| data-view | view | table | calendar |
| data-layout | layout | big-days | big-card | homepage |
| data-event-slug | eventSlug | Filter: nur dieses Event (per Slug) |
| data-event-id | eventId | Filter: nur dieses Event (per UUID) |
| data-event-type-id | eventTypeId | Filter: nur Events dieses Typs |
| data-show-tenant-name | showTenantName | true (Standard) | false |
| data-empty-message | emptyMessage | Text bei keinen Einträgen |
| data-css-url | cssUrl | URL zu Custom-CSS |
| data-element-search | elementSearch | Suche aktivieren (true/false) |
| data-element-top5 | elementTop5 | Top-20-Galerie aktivieren |
| data-element-countdown | elementCountdown | Countdown aktivieren |
| data-element-lastminute | elementLastminute | Last-Minute aktivieren |
| data-element-ticker | elementTicker | Ticker aktivieren |
| data-element-order | elementOrder | Reihenfolge der Elemente |
| data-container | – | ID des Ziel-Containers (Standard: eventgate-widget) |
Direkt-URL (ohne embed.js)
Das Widget kann auch direkt als iframe oder im Browser aufgerufen werden. Alle Parameter werden als Query-String übergeben – die Namen entsprechen der Spalte "URL-Param" in der Tabelle oben.
https://eventgate24.de/eg/index.html
?apiKey=DEIN_KEY
&apiUrl=https://eventgate24.de
&view=table
&layout=big-days
&showTenantName=false
&emptyMessage=Aktuell%20keine%20VorstellungenDie Direkt-URL ist primär für Tests gedacht. Auf produktiven Websites wird die Einbindung per
embed.js empfohlen, da das Script die iframe-Höhe automatisch anpasst und keine Scrollbalken entstehen.Praxisbeispiele
Einzelnes Stück / einzelne Produktion
<script
src="https://eventgate24.de/eg/embed.js"
data-api-key="DEIN_KEY"
data-api-url="https://eventgate24.de"
data-layout="big-days"
data-event-slug="mein-stueck"
data-show-tenant-name="false"
data-empty-message="Aktuell keine Vorstellungen"
></script>Gesamter Spielplan (alle Events)
<script
src="https://eventgate24.de/eg/embed.js"
data-api-key="DEIN_KEY"
data-api-url="https://eventgate24.de"
data-layout="big-days"
data-show-tenant-name="false"
></script>Monatskalender eines bestimmten Event-Typs
<script
src="https://eventgate24.de/eg/embed.js"
data-api-key="DEIN_KEY"
data-api-url="https://eventgate24.de"
data-view="calendar"
data-event-type-id="UUID-DES-TYPS"
data-show-tenant-name="false"
></script>Homepage-Widget mit allen Modulen
<script
src="https://eventgate24.de/eg/embed.js"
data-api-key="GENERAL_API_KEY"
data-api-url="https://eventgate24.de"
data-layout="homepage"
data-element-countdown="true"
data-element-top5="true"
data-element-search="true"
data-element-lastminute="true"
data-element-ticker="true"
data-element-order="countdown,top5,search,lastminute,ticker"
></script>