Beta

Widgets einbetten

Mit Vereinly-Widgets zeigst du live Daten aus deinem Verein — Termine, Neuigkeiten, Mitglieder-Login — direkt auf deiner eigenen Website an. Du pflegst alles wie gewohnt in Vereinly; die Website aktualisiert sich automatisch. Kein iframe, kein doppelter Aufwand.

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

Ersetze cantiamo durch deinen 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	Dein 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/Self-Hosting nötig
`donate-url`	—	Nur `<v5-donate>`: Ziel-Link des Spendenbuttons
`join-url`	—	Nur `<v5-openings>`: Ziel-Link für „Mitsingen“ / Anmeldung

Eigenes Design

Die Widgets passen sich per CSS-Variablen an dein Website-Design an — setze 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. Setze die Variablen auf dem Widget-Element selbst oder auf einem beliebigen Eltern-Element — die Werte vererben sich an alle Widgets darunter. So passt du Farben, Schrift und Rundungen einmal an dein 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)

Du musst nicht alle Variablen setzen — nicht gesetzte Variablen behalten ihren Standardwert. Am schnellsten gelingt die Anpassung, wenn du dieselben Werte (Farben, Schriftart) wie auf deiner übrigen Website verwendest.

Erlaubte Domains

Aus Sicherheitsgründen lädt ein Widget nur Daten, wenn die Domain deiner Website in Vereinly als erlaubte Einbettungs-Quelle hinterlegt ist. Sonst blockiert der Browser die Anfrage (CORS). Melde uns kurz deine Domain — wir schalten sie frei (die Selbstverwaltung im Bereich „Website & Widgets" folgt in Kürze). Danach funktioniert das Widget sofort.

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

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

Deinen Vereins-Slug finden

Der Slug ist der eindeutige Kurzname deines Vereins — der Teil vor .vereinly.ch in deiner Adresse. Beispiel: bei cantiamo.vereinly.ch lautet der Slug cantiamo.

Widgets in WordPress einbinden

Die Vereinly-Widgets funktionieren in jeder Website — auch in WordPress. Du brauchst dafür kein Plugin von uns, sondern bindest das SDK einmal ein und platzierst das Widget-Tag in einem HTML-Block. In vier Schritten:

1. SDK-Script einbinden

Das SDK muss einmal pro Seite geladen werden. Am einfachsten bindest du es global im Theme-Header ein — entweder über ein Code-Snippet-Plugin (z. B. „Code Snippets", „WPCode") oder direkt in der functions.php deines (Child-)Themes via wp_head. Alternativ fügst du 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üge an der gewünschten Stelle einen Custom-HTML-Block (im Block-Editor „Individuelles HTML") ein und setze das gewünschte Widget-Tag hinein — mit deinem tenant-Slug und der base-url:

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

Ersetze cantiamo durch deinen eigenen Vereins-Slug. Du kannst 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>. Achte 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 deiner 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.). Du buchst es in den Abo-Einstellungen deines 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) erhältst du bei der Freischaltung.