Dies ist eine alte Version des Dokuments!
Minasa HTML-Widget
Einleitung
Kunden ohne eigenes Minasa-System haben mit einem HTML-Widget eine einfache Möglichkeit, Events von einem Minasa-System ohne grosse technische Massnahmen oder Infrastruktur auf der eigenen Webseite darstellen zu können.
Das Widget wird mittels JavaScript-Bibliothek auf der eigenen Webseite eingebunden und baut sich in der Host-Webseite selber ein.
Einbau in Webseite
Der Einbau in die eigene Webseite erfolgt durch Einbinden einer JavaScript-Bibliothek. Diese stellt die Widget-Component als HTML-Tag <minasa-widget></minasa-widget> zur Verfügung.
–code–
Sie benötigen folgende Daten, damit Sie das Widget-System nutzen können:
- die URL zum Minasa-System, ab dem Sie die Event-Daten beziehen möchten (z.B. https://thurgaukultur.ch)
- Einen API-Key für das Widget für dieses Minasa-System. Diesen API-Key erhalten Sie beim technischen Support der jeweiligen Minasa-Instanz.
HTML-Konfigurationsattribute
Die Web-Komponenten <minasa-widget> unterstützt folgende HTML-Attribute für die Konfiguration:
| Attribut | Pflicht | Beispiel | Beschreibung |
|---|---|---|---|
minasa-url | Ja | minasa-url=„https://www.minasa-system.ch“ | Basis-URL des Minasa-Systems |
api-key | Ja | api-key=„abcdefgh“ | API-Key des Minasa-Systems |
filter-organizer-ids | Nein | filter-organizer-ids=„1,2234,7“ | Liste mit vorgefilterten Organizer-IDs: Es werden nur Events dieser Organizer angezeigt |
filter-organizer-group-ids | Nein | filter-organizer-group-ids=„2,5,18“ | Liste mit vorgefilterten Kulturverbund-IDs: Es werden nur Events dieser Kulturverbünde (= Organizer Groups) angezeigt |
filter-dataprovider-uuids | Nein | filter-dataprovider-uuids=„0187dc91-4340-793f-8627-47938a4476c0“ | Liste mit vorgefilterten Data Provider UUIDs: Es werden nur Events dieser Data Provider angezeigt |
query-mode | Nein | query-mode=„next“ | Zeigt alle Daten eines Events (all) oder nurdas nächste Datum (next) eines Events. Default: next |
min-date | Nein | min-date=„2026-01-06“_PARATABLE_INS_min-date=„yyyy-mm-dd“ |In Kombination mit max-date beschränkt es den Datumsfilter auf mindestens dieses Datum ein|
|max-date |Nein|max-date=„2026-01-06“_PARATABLE_INS_max-date=„yyyy-mm-dd“ | In Kombination mit min-date beschränkt es den Datumsfilter auf maximum dieses Datum ein |
with-tag-filter | Nein | with-tag-filter=„1,2,3“_PARATABLE_INS_with-tag-filter=„[1,2,3]“_PARATABLE_INS_with-tag-filter | Schränkt das Dropdown auf die Tags ein die hier als Tag-Id’s konfiguriert worden sind._PARA__TABLE_INS_Wenn kein Tag-Id gesetzt wird oder alle Id’s ungültig sind, werden alle Tags in der Liste angezeigt. |
Die entsprechenden IDs resp. UUIDs erhalten Sie vom technischen Support der jeweiligen Minasa-Instanz.
Beispiel einer Konfiguration:
–code–
Styling
Das Widget ist als WebComponent implementiert und kann in geringem Masse mit CSS angepasst werden. Folgende CSS-Variablen stehen zur Verfügung. Sie müssen nur die Variablen definieren, welche Sie überschreiben wollen. Die hier gezeigten Werte sind die Vorgabewerte.
–code–