Inhaltsverzeichnis

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. 

<!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>

Sie benötigen folgende Daten, damit Sie das Widget-System nutzen können:

HTML-Konfigurationsattribute

Die Web-Komponenten <minasa-widget> unterstützt folgende HTML-Attribute für die Konfiguration:

AttributPflichtBeispielBeschreibung
minasa-url Jaminasa-url=„https://www.minasa-system.ch“ Basis-URL des Minasa-Systems
api-key Jaapi-key=„abcdefgh“ API-Key des Minasa-Systems
filter-organizer-ids Neinfilter-organizer-ids=„1,2234,7“ Liste mit vorgefilterten Organizer-IDs: Es werden nur Events dieser Organizer angezeigt
filter-organizer-group-ids Neinfilter-organizer-group-ids=„2,5,18“ Liste mit vorgefilterten Kulturverbund-IDs: Es werden nur Events dieser Kulturverbünde (= Organizer Groups) angezeigt
filter-dataprovider-uuids Neinfilter-dataprovider-uuids=„0187dc91-4340-793f-8627-47938a4476c0“ Liste mit vorgefilterten Data Provider UUIDs: Es werden nur Events dieser Data Provider angezeigt
query-mode Neinquery-mode=„next“ Zeigt alle Daten eines Events (all) oder nurdas nächste Datum (next) eines Events. Default: next
min-date Neinmin-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 Neinwith-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: 

    <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>

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. 

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;
}