Seite anzeigenÄltere VersionenLinks hierherNach oben Diese Seite ist nicht editierbar. Du kannst den Quelltext sehen, jedoch nicht verändern. Kontaktiere den Administrator, wenn du glaubst, dass hier ein Fehler vorliegt. ====== 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. <file html> <!DOCTYPE html> <html> <head> <title>Eigene Webseite</title> </head> <body> <h1>Eigene Seite</h1> <p>........</p> <!-- hier steht nun eine WebComponent zur Verfügung, welche die Widget-Inhalte darstellt: --> <minasa-widget minasa-url="https://www.minasa-system.ch" api-key="aswcsadf" query-mode="next" ></minasa-widget> <!-- Laden der Widget-JavaScript-Library, am Ende des Body-Tags: --> <script src="https://minasa-system.ch/widget/minasa-widget.js" type="module"></script> </body> </html> </file> 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/|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"''_PARA__TABLE_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"''_PARA__TABLE_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"''_PARA__TABLE_INS_''with-tag-filter="[1,2,3]"''_PARA__TABLE_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:** <file html> <minasa-widget minasa-url="https://www.minasa-system.ch" api-key="jjfufuzrue7647czhd74656" query-mode="next" filter-organizer-grup-ids="33,157" min-date="2026-01-06" max-date="2026-02-16" with-tag-filter ></minasa-widget> </file> ==== 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. <file css> minasa-widget { /* Die primäre Farbe für Links, Rahmen etc: */ --mw-primary-color: #e3004f; /* Hintergrundfarbe des gesamten Widgets:*/ --mw-background-color: transparent; /* verwendete Textfarbe: */ --mw-text-color: black; /* Kontrastfarbe für Text auf der Primärfarbe */ --mw-contrast-color: white; /* verwendete Schriftart (Inter wird automatisch geladen / Gesetzt) */ --mw-font-family: Inter, sans-serif; /* verwendete Schriftgrösse */ --mw-font-size: 12pt; /* verwendete Standard-Zeilenhöhe für Lauftext */ --mw-line-height: 1.375rem; /* Rahmenfarbe der Ergebnis-Kacheln */ --mw-border-color: #cfcfcf; /* leicht abgeschwächter Text: */ --mw-faded-text-color: #8c8c8c; /* Hintergrundfarbe der Ergebnis-Kacheln */ --mw-panel-background-color: #ffffff; /* Hintergrundfarbe des Loading-Overlay */ --mw-loading-overlay-background-color: #8c8c8c; } </file> CKG Edit minasa-cms/widget.txt Zuletzt geändert: 19.05.2026 11:55von alex