Beta

Widgets einbetten

Mit Vereinly-Widgets zeigen Sie live Daten aus Ihrem Verein: Termine, Neuigkeiten und Mitglieder-Login, direkt auf Ihrer eigenen Website an. Sie pflegen alles wie gewohnt in Vereinly; die Website aktualisiert sich automatisch. Kein iframe, kein doppelter Aufwand.

Sie haben keine eigene Website? Dann ist die von Vereinly gehostete Vereins-Website das Richtige. Dort sind dieselben Live-Daten schon eingebaut. Die Widgets hier sind für Vereine mit einer bestehenden eigenen Website.

So funktioniert's

Zwei Zeilen HTML, das SDK einbinden und das gewünschte Widget platzieren:

<!-- 1. SDK einmal pro Seite einbinden (im <head> oder vor </body>) -->
<script src="https://cdn.vereinly.ch/sdk/v1/v5.js" defer></script>

<!-- 2. Widget dort platzieren, wo die Daten erscheinen sollen -->
<v5-events tenant="cantiamo" limit="5"></v5-events>

Ersetzen Sie cantiamo durch Ihren eigenen Vereins-Slug (siehe unten). Das war's, die Termine erscheinen live und bleiben automatisch aktuell.

Verfügbare Widgets

Widget	Zeigt
`<v5-events>`	Kommende Termine & Konzerte (öffentliche Events)
`<v5-posts>`	Neuigkeiten / öffentliche Beiträge
`<v5-proben>`	Kommende öffentliche Proben
`<v5-board>`	Vorstand & Leitung (öffentliche Mitglieder-Tafel)
`<v5-donate>`	Spendenbutton mit Fortschrittsbalken, Ziel via Attribut `donate-url`
`<v5-kontakt>`	Kontaktformular (Anfrage geht direkt in den Verein)
`<v5-openings>`	Stimmgruppen / Mitsingen-Aufruf (offene Plätze), Anmeldung via Attribut `join-url`
`<v5-trial-signup>`	Anmeldung zur Schnupperprobe
`<v5-newsletter-signup>`	Newsletter-Anmeldung
`<v5-login-button>`	Mitglieder-Login über Vereinly (OAuth-Popup, liefert ein Token)

Attribute

Beispiel <v5-events>, die anderen Widgets nutzen dieselbe Logik:

Attribut	Standard	Beschreibung
`tenant`	Pflicht	Ihr Vereins-Slug (der Teil vor `.vereinly.ch`)
`limit`	`10`	Anzahl der angezeigten Einträge
`lang`	`de`	Sprache der Oberfläche (`de` \| `en`)
`base-url`	Vereinly-API	Backend-Adresse, nur für Test und Self-Hosting nötig
`donate-url`	keiner	Nur `<v5-donate>`: Ziel-Link des Spendenbuttons
`join-url`	keiner	Nur `<v5-openings>`: Ziel-Link für „Mitsingen“ / Anmeldung

Eigenes Design

Die Widgets passen sich per CSS-Variablen an Ihr Website-Design an, setzen Sie sie auf dem Widget selbst oder einem beliebigen Eltern-Element:

<style>
  v5-events {
    --v5-primary: #1e40af;   /* Akzentfarbe   */
    --v5-radius: 12px;       /* Eckenradius   */
    --v5-font: 'Space Grotesk', sans-serif;
  }
</style>

Widgets gestalten (CSS)

Jedes Widget ist über CSS-Custom-Properties (Variablen, die mit --v5- beginnen) frei gestaltbar. Setzen Sie die Variablen auf dem Widget-Element selbst oder auf einem beliebigen Eltern-Element. Die Werte vererben sich an alle Widgets darunter. So passen Sie Farben, Schrift und Rundungen einmal an Ihr Website-Design an und alle Widgets übernehmen es:

<style>
  /* Auf dem Widget selbst oder einem beliebigen Eltern-Element. */
  v5-events {
    --v5-primary: #1e40af;             /* Akzent- / Buttonfarbe        */
    --v5-font: 'Space Grotesk', sans-serif; /* Schriftart              */
    --v5-radius: 12px;                 /* Eckenradius                  */
    --v5-text: #0f172a;                /* Textfarbe                    */
    --v5-border: #e2e8f0;              /* Rahmenfarbe                  */
    --v5-card-bg: #ffffff;             /* Hintergrund der Karten       */
    --v5-muted: #64748b;               /* gedämpfter Text (Datum etc.) */
  }
</style>

Diese Variablen werden von den Widgets ausgewertet:

Variable	Steuert
`--v5-primary`	Akzent- und Buttonfarbe (Links, aktive Elemente)
`--v5-font`	Schriftart (`font-family`)
`--v5-radius`	Eckenradius von Karten, Buttons & Feldern
`--v5-text`	Standard-Textfarbe
`--v5-border`	Rahmen- und Trennlinienfarbe
`--v5-card-bg`	Hintergrundfarbe der Karten / Einträge
`--v5-muted`	Gedämpfter Text (Datum, Meta-Angaben)

Sie müssen nicht alle Variablen setzen. Nicht gesetzte behalten ihren Standardwert. Am schnellsten gelingt die Anpassung, wenn Sie dieselben Werte (Farben, Schriftart) wie auf Ihrer übrigen Website verwenden.

Erlaubte Domains

Anzeigende Widgets (Termine, Neuigkeiten, Vorstand) laufen sofort, auch bevor Sie etwas hinterlegen. Widgets, die etwas entgegennehmen, also Kontaktformular sowie Newsletter- und Schnupper-Anmeldung, brauchen Ihre Domain als erlaubte Einbettungs-Quelle; sonst blockiert der Browser die Anfrage (CORS). Melden Sie uns kurz Ihre Domain, wir schalten sie frei (die Selbstverwaltung im Bereich „Website & Widgets" folgt in Kürze).

Für die produktive Einbindung zeigt das Widget zudem auf die Vereinly-API. Falls nötig, setzen Sie die Adresse explizit:

<v5-events tenant="cantiamo" base-url="https://api.vereinly.ch"></v5-events>

Ihren Vereins-Slug finden

Der Slug ist der eindeutige Kurzname Ihres Vereins, also der Teil vor .vereinly.ch in Ihrer Adresse. Beispiel: bei cantiamo.vereinly.ch lautet der Slug cantiamo.

Widgets in WordPress einbinden

Die Vereinly-Widgets funktionieren in jeder Website, auch in WordPress selbst. Sie brauchen dafür kein Plugin von uns, sondern binden das SDK einmal ein und platzieren das Widget-Tag in einem HTML-Block. In vier Schritten:

1. SDK-Script einbinden

Das SDK muss einmal pro Seite geladen werden. Am einfachsten binden Sie es global im Theme-Header ein, entweder über ein Code-Snippet-Plugin (z. B. „Code Snippets", „WPCode") oder direkt in der functions.php Ihres (Child-)Themes via wp_head. Alternativ fügen Sie das Script-Tag auf einer einzelnen Seite über einen Custom-HTML-Block ein:

<script src="https://cdn.vereinly.ch/sdk/v1/v5.js" defer></script>

2. Widget-Tag platzieren

Fügen Sie an der gewünschten Stelle einen Custom-HTML-Block (im Block-Editor „Individuelles HTML") ein und setzen Sie das gewünschte Widget-Tag hinein, mit Ihrem tenant-Slug und der base-url:

<v5-events tenant="cantiamo" base-url="https://api.vereinly.ch"></v5-events>

Ersetzen Sie cantiamo durch Ihren eigenen Vereins-Slug. Sie können beliebig viele Widgets auf einer Seite platzieren.

3. HTML-Blöcke nicht entfernen lassen

Manche Themes oder Sicherheits-Plugins „bereinigen" eingefügtes HTML und entfernen dabei <script>- oder unbekannte Tags wie <v5-events>. Achten Sie darauf, dass das HTML im Custom-HTML-Block unverändert erhalten bleibt. Tritt das Problem auf, hilft ein Code-Snippet-Plugin oder das Einbinden über die functions.php.

4. Domain freischalten

Damit das Widget Daten lädt, muss die Domain Ihrer WordPress-Website in Vereinly unter Website & Widgets → Einbettung als erlaubte Domain hinterlegt sein (siehe Erlaubte Domains oben). Ohne diesen Eintrag blockiert der Browser die Anfrage.

Widgets sind ein kostenpflichtiges Zusatzmodul (6 CHF/Mt.). Sie buchen es in den Abo-Einstellungen Ihres Vereins hinzu; danach lassen sich die Widgets überall einbinden.

Status: Die Widgets befinden sich in der Beta. Die genaue SDK-Adresse (cdn.vereinly.ch/sdk/v1/v5.js) erhalten Sie bei der Freischaltung.