Event-Widget: Veranstaltungen auf der eigenen Website zeigen
Aktualisiert am 21. Oktober 2026
Mit dem Event-Widget aus den ditix Tools erscheinen die Veranstaltungen deines ditix-Shops direkt auf deiner eigenen Website: als Liste, mit Vorschautext und „Mehr lesen“, als Karten, als Monatskalender oder als schlichte Textliste. Farben, Schrift und Buttons passt du an dein Design an. Jede Veranstaltung führt mit einem Klick in deinen Shop. Neue Events erscheinen automatisch, du musst an deiner Website nichts mehr ändern.
Das Wichtigste auf einen Blick
- Fünf Ansichten: Liste, Details mit Vorschautext und „Mehr lesen“, Karten, Monatskalender und Textliste.
- Akzentfarbe, Farben, Form der Buttons, helles oder dunkles Design, Suchleiste und Monatsleiste stellst du im Konfigurator ein und siehst sofort eine Vorschau.
- Der Konfigurator erzeugt einen kurzen Einbau-Code, den du in deine Website kopierst.
- Der Shop öffnet sich wahlweise im selben Tab, in einem neuen Tab oder als Layer über deiner Seite.
- Veranstaltungen, die du in ditix veröffentlichst, erscheinen nach wenigen Minuten von selbst im Widget.
- Für eigene Entwicklungen gibt es die Veranstaltungen auch als JSON-Daten.
- Kostenlos für alle Veranstalter mit einem Shop auf ditix.shop.
Event-Widget oder Eventübersicht aus ditix.app?
In ditix.app kannst du unter Shop › Auslieferung auch deine komplette Eventübersicht per iFrame einbinden. Wie das geht, steht in Eventübersicht auf der eigenen Webseite einbinden. Beide Wege funktionieren, sie haben nur einen anderen Schwerpunkt:
| Eventübersicht (ditix.app) | Event-Widget (ditix Tools) | |
|---|---|---|
| Was erscheint | dein Shop mit Ticketauswahl im Rahmen | eine schlanke Übersicht deiner Veranstaltungen |
| Ansichten | Shop-Darstellung | Liste, Details, Karten, Monatskalender, Textliste |
| Gestaltung | Farben | Farben, Design hell/dunkel, Form der Buttons, Suchleiste, Monatsleiste |
| Ticketkauf | Ticketauswahl im Rahmen, Bezahlung auf der ganzen Seite | Klick führt in den Shop (selber Tab, neuer Tab oder Layer) |
Willst du deine Termine zum Beispiel als Kalender in eine bestehende Seite einfügen, ist das Event-Widget die passende Wahl.
So öffnest du die ditix Tools
Den Konfigurator des Event-Widgets erreichst du über das Hilfe-Widget in ditix.app:
- Melde dich in ditix.app an und öffne unten rechts das Hilfe-Widget (Didi).
- Klicke auf der Startseite des Widgets auf ditix tools (Heatmap, Vergleich usw). Die Tools öffnen sich in einem neuen Tab.
- Klicke im Werkzeugkasten beim Event-Widget auf Widget einrichten.
Danach bleibt dein Browser 30 Tage lang freigeschaltet. In einem anderen Browser, auf einem anderen Gerät oder nach dem Löschen der Cookies öffnest du die Tools einfach noch einmal über das Widget.
Die Freischaltung brauchst du nur für den Konfigurator. Das fertige Widget auf deiner Website sehen alle Besucher, ohne Anmeldung.
Widget einrichten
1. Shop eintragen
Trage bei Shop-Subdomain den Namen deines Shops ein. Das ist der erste Teil deiner Shop-Adresse: Lautet sie meinverein.ditix.shop, trägst du meinverein ein. Du kannst auch die ganze Adresse einfügen, der Konfigurator nimmt sich den passenden Teil heraus.
2. Ansicht wählen
Wähle bei Ansicht, wie deine Veranstaltungen erscheinen sollen. Unten auf der Seite zeigt die Vorschau sofort das Ergebnis mit deinen echten Veranstaltungen.
3. Aussehen anpassen
Passe Farben und Einstellungen an, bis die Vorschau zu deiner Website passt. Alle Möglichkeiten stehen weiter unten in der Übersicht.
4. Einbau-Code kopieren
Unter Einbau-Code für die Kundenseite steht der fertige Code. Er besteht aus zwei Zeilen: einem Platzhalter für das Widget und dem Verweis auf das Script von ditix.tools. Markiere beide Zeilen vollständig und kopiere sie.
5. Code in deine Website einfügen
Füge den Code an der Stelle deiner Website ein, an der die Veranstaltungen erscheinen sollen. In den meisten Website-Baukästen und Redaktionssystemen gibt es dafür einen Baustein für eigenes HTML oder zum Einbetten von Code. Speichere und veröffentliche die Seite, fertig.
Du kannst auch mehrere Widgets auf einer Seite einsetzen, zum Beispiel einen Kalender und darunter eine Liste.
Kannst du auf deiner Website kein Script einfügen, nimm die Zeile Alternativ ohne Script direkt als iframe. Der iFrame hat eine feste Höhe von 600 Pixeln, die du im Code anpassen kannst, und der Shop öffnet sich darin immer im selben Tab, nicht als Layer.
Die Ansichten
Liste
Datum, Name, Uhrzeit, Ort und ein Button Tickets je Veranstaltung. Auf Wunsch mit kleinem Veranstaltungsbild.
Details mit Vorschautext und „Mehr lesen“
Bild, Mitwirkende, ein kurzer Vorschautext, rechts Datum, Beginn, Einlass, Ort und Ticket kaufen. Mehr lesen öffnet ein Fenster mit allen Angaben: Datum, Beginn und Einlass, Ort mit Adresse, wer mit dabei ist, Links zu Website und sozialen Netzwerken und dem Button Ticket kaufen.
Karten
Kacheln mit großem Veranstaltungsbild, Datum, Name, Ort und Tickets. Passt gut auf Startseiten.
Monatskalender
Ein Kalender mit deinen Terminen. Mit den Pfeilen blätterst du durch die Monate. Bei Kalender: Monate stellst du ein, wie viele Monate untereinander erscheinen (1 bis 12).
Textliste
Eine schlichte Liste ohne Bilder, gut für schmale Spalten oder Seitenleisten.
Alle Einstellungen
| Einstellung | Wirkung |
|---|---|
| Akzentfarbe | Farbe der Buttons und Hervorhebungen. Shop-Farbe übernimmt die Farbe deines Shops. |
| Max. Anzahl (0 = alle) | Zeigt höchstens so viele Veranstaltungen, zum Beispiel die nächsten 3 auf der Startseite. |
| Kalender: Monate | Nur im Monatskalender: wie viele Monate untereinander erscheinen. |
| Abgesagte Events | Abgesagte Veranstaltungen durchgestrichen anzeigen oder ausblenden. |
| Design | hell oder dunkel, passend zum Hintergrund deiner Seite. |
| Suchleiste | Ein Suchfeld, das beim Tippen filtert. Sinnvoll bei vielen Veranstaltungen. |
| Monatsleiste | Knöpfe je Monat zum Filtern (nicht im Kalender). Erscheint nur, wenn deine Veranstaltungen über mindestens zwei Monate gehen. |
| Liste: Veranstaltungsbild | Nur in der Liste: kleines Bild je Veranstaltung anzeigen. |
| Shop öffnen | im selben Tab, in neuem Tab oder als Layer über deiner Seite. |
| Kennung für Shop-Links (ab) | Optional: wird als ?ab=… an alle Shop-Links gehängt, zum Beispiel je Seite oder je Variante eines A/B-Tests ein eigener Wert. In Google Analytics siehst du ihn in der Seitenadresse der Shop-Sitzung. |
| Form der Buttons | Rund, Abgerundet oder Eckig. Gilt auch für Monatsleiste, Suchfeld und Schlagworte. |
| Farben | Hintergrund, Kacheln, Schrift, Nebentext und Linien einzeln einstellbar. Leer lassen heißt Standard des gewählten Designs. Ein leerer Hintergrund ist durchsichtig, dann übernimmt das Widget den Hintergrund deiner Seite. |
Shop als Layer
Bei Shop öffnen: als Layer über der Seite öffnet sich die Eventseite deines Shops in einem Fenster über deiner Website, dort werden die Tickets ausgewählt. Zum Bezahlen wechselt der Shop auf die ganze Seite. Die Zahlung läuft also nie in einem Rahmen auf deiner Website. Der Layer funktioniert nur mit dem Script-Einbau, nicht mit dem iFrame.
Gut zu wissen
- Das Widget zeigt alle veröffentlichten Veranstaltungen deines Shops, die noch nicht vorbei sind. Ein nicht veröffentlichtes Event erscheint nicht.
- Änderungen in ditix, zum Beispiel ein neues Event oder ein neues Bild, erscheinen nach etwa 5 Minuten im Widget, Texte im Fenster „Mehr lesen“ nach spätestens 15 Minuten.
- Preise und Verfügbarkeit zeigt das Widget nicht. Die siehst du nach dem Klick im Shop.
- Alle Zeiten erscheinen in deutscher Zeit.
- Mehrtägige Veranstaltungen stehen im Monatskalender am ersten Tag.
- Das Widget ist auf Deutsch.
Für Entwickler: die Veranstaltungen als JSON
Möchtest du die Veranstaltungen in eine eigene Anwendung übernehmen, zum Beispiel eine App oder einen eigenen Kalender, findest du unten im Konfigurator unter JSON-Rohdaten für eigene Integrationen die Adresse der Daten. Sie brauchen keinen Schlüssel und keine Anmeldung. Alle Felder, Bildgrößen und Beispiele stehen in der Entwickler-Doku.
Wenn etwas nicht klappt
„Derzeit sind keine Veranstaltungen im Vorverkauf.“
Dein Shop hat gerade keine veröffentlichte Veranstaltung, die noch bevorsteht. Prüfe in ditix.app, ob deine Events veröffentlicht sind. Neue Veranstaltungen erscheinen nach etwa 5 Minuten.
„Veranstaltungen konnten nicht geladen werden …“
Prüfe die Shop-Subdomain im Einbau-Code (data-shop="…"). Sie muss genau dem ersten Teil deiner Shop-Adresse entsprechen.
Auf meiner Website erscheint nichts
- Hast du beide Zeilen des Einbau-Codes eingefügt? Ohne die Zeile mit dem Script bleibt der Platzhalter leer.
- Manche Website-Baukästen entfernen Scripts aus normalen Textbausteinen. Nimm einen Baustein für eigenes HTML oder zum Einbetten, oder nutze die iFrame-Zeile.
- Hast du die Seite nach dem Einfügen veröffentlicht?
Der Layer öffnet sich nicht, der Shop öffnet im selben Tab
Der Layer funktioniert nur mit dem Script-Einbau. Mit der iFrame-Zeile öffnet der Shop immer im selben Tab.
Die Seite zeigt „Die ditix Tools öffnest du aus ditix.app heraus“
Dein Browser ist für den Konfigurator (noch) nicht freigeschaltet oder die 30 Tage sind um. Öffne die Tools wie oben beschrieben über das Hilfe-Widget in ditix.app. Das Widget auf deiner Website ist davon nicht betroffen.
Hilfe und Kontakt
Fragen zum Einbau oder Wünsche für weitere Ansichten? Schreib uns über das Hilfe-Widget in ditix.app.