Brauchen wir für den Einbettcode einen Schlüssel oder einen Zugang?

Nein. Im Code steht nur die Kennung eures gespeicherten Widgets und die Adresse eurer Verwaltung. Die Angebotsliste ist öffentlich und wird nur gelesen; es gibt nichts zu verbinden und nichts zu autorisieren.

Warum ist die eingebettete Liste bei uns unten abgeschnitten?

Weil ihr die iframe-Fassung mit fester Höhe verwendet oder weil euer Baukasten den Code in einen eigenen Rahmen legt. Nur die Skript-Fassung passt ihre Höhe selbst an, und auch sie kann einen Rahmen, den euer Baukasten um sie herum zieht, nicht wachsen lassen. Erhöht in diesen Fällen die Höhe von Hand.

Was tun, wenn unser Baukasten kein HTML zulässt?

Dann verlinkt eure Kursliste unter eurer ClubVivo-Adresse. Der Link funktioniert in jedem Baukasten, in jedem Tarif und in jedem Newsletter, und die Anmeldung läuft danach genauso ab wie bei einer Einbettung.

Müssen wir den Code jedes Mal ändern, wenn wir andere Kurse zeigen wollen?

Nein. Im Code steht nur die Kennung. Welche Kategorien, Standorte, Abteilungen und Wochentage dahinter stecken, ändert ihr in eurer Verwaltung unter „Inhalte → Widgets“ — die fremde Website muss danach niemand mehr anfassen.

Einrichtung

Euren Kursplan auf eure Website bringen

Eine Frage, vier Wege, und bei jedem steht dabei, woran ihr merkt, dass es geklappt hat. Wenn euer Baukasten kein eigenes HTML zulässt, sagt diese Seite das auch — statt euch in eine Sackgasse zu schicken.

Ein Code zum Kopieren
Kein Schlüssel, kein Konto
Auch ohne HTML lösbar

Zur Frage Was das Widget kann

Der Weg in einem Bild

Womit ist eure Website gebaut?

Beantwortet die Frage, und ihr landet bei genau der Anleitung, die euch angeht. Alle Wege stehen auf dieser Seite — ihr müsst nur an den anderen nicht vorbei.

Womit ist eure Website gebaut?
Wenn ihr es nicht wisst: Schaut in die Adresszeile, wenn ihr euch in eure Website einloggt. Steht dort „/wp-admin", ist es WordPress. Steht dort „wix.com" oder „jimdo.com", ist es der jeweilige Baukasten.
Wenn „etwas anderes“
Dürft ihr dort eigenes HTML einfügen?
Sucht in eurem Editor nach einem Element namens „HTML“, „Code“, „Einbetten“ oder „Custom Code“. Gibt es keines, gibt es auch keinen Einbettcode – und das ist kein Beinbruch.
- JaDer allgemeine Einbettcode funktioniert überall, wo HTML unverändert gespeichert wird.
- NeinDann verlinkt eure Kursliste. Ein Link geht immer und reicht vielen Vereinen völlig.

Ablauf der Einrichtung: eine Einstiegsfrage nach dem Baukasten, für alle übrigen Systeme eine zweite Frage danach, ob eigenes HTML erlaubt ist.

Vor allen Wegen

Legt zuerst euer Widget an

Der Einbettcode enthält nur eine Kennung. Was dahinter steckt, pflegt ihr in eurer Verwaltung — das erspart euch, die fremde Website je wieder anzufassen.

In ClubVivo unter Inhalte → Widgets ein Widget anlegen und ihm einen Namen geben, etwa „Seepferdchen-Kurse“ oder „Wochenplan Halle Nord“.
Auswählen, was es zeigt: Kategorien, Standorte, Abteilungen, Wochentage und die Ansicht (Liste, Wochenplan, Kalender oder Terminliste). Daneben läuft eine Vorschau mit euren echten Angeboten mit.
Den fertigen Einbettcode kopieren. Darin steht eure Adresse schon richtig — die Beispiele auf dieser Seite tragen stattdessen den Platzhalter euer-verein.clubvivo.de.

Zwei Fassungen — und wann welche die richtige ist

Mit Skript. Das Skript legt den Rahmen selbst an und passt seine Höhe laufend an die Zahl der Angebote an. Überall dort die richtige Wahl, wo euer Baukasten den Code unverändert in die Seite schreibt — bei WordPress etwa.
Ohne Skript, nur ein Rahmen. Feste Höhe, dafür kommt sie ohne JavaScript aus. Die richtige Wahl, wenn euer Baukasten kein fremdes Skript zulässt oder den Code ohnehin in einen eigenen Rahmen legt — dann wäre die Skript-Fassung ein Rahmen im Rahmen, ohne dass die Höhe dadurch besser würde.

Fassung mit Skript

Ersetzt euer-verein.clubvivo.de durch die Adresse eurer eigenen Verwaltung.

<div data-clubvivo-widget data-id="8bqz3k4p"></div>
<script src="https://euer-verein.clubvivo.de/widget.js" defer></script>

Passt die Höhe selbst an. Die Kennung 8bqz3k4p ist ein Beispiel — eure steht in eurer Verwaltung.

Fassung ohne Skript

Ersetzt euer-verein.clubvivo.de durch die Adresse eurer eigenen Verwaltung.

<iframe src="https://euer-verein.clubvivo.de/widget?id=8bqz3k4p"
        title="Angebote und Anmeldung"
        style="width:100%;height:900px;border:0"
        loading="lazy"></iframe>

Feste Höhe. 900 Pixel sind ein Startwert; passt ihn an, bis die Liste ohne zweiten Scrollbalken hineinpasst.

Wenn ihr die Auswahl lieber ausschreibt

Die Kennung ist der bequeme Weg, aber nicht der einzige. Ihr könnt jeden Filter auch direkt in den Code schreiben. In der iframe-Fassung stehen die Angaben als Parameter in der Adresse, in der Skript-Fassung als data--Attribut am <div> — also data-kategorie statt kategorie. Steht eine Kennung daneben, gewinnt die Kennung.

Die Parameter des Einbettcodes mit erlaubten Werten und Voreinstellung
Parameter	Erlaubte Werte	Voreinstellung	Beispiel
`id`	Kennung eines gespeicherten Widgets: acht Zeichen aus 0–9 und a–z	—	`id=8bqz3k4p`
`kategorie`	Kurzname einer eurer Angebotskategorien, mehrere mit Komma	alle	`kategorie=bronze,silber`
`standort`	Kennung eines aktiven Standorts, mehrere mit Komma	alle	`standort=6f1e…,9ab2…`
`abteilung`	Kennung einer aktiven Abteilung, mehrere mit Komma	alle	`abteilung=3c7d…`
`tage`	mo, di, mi, do, fr, sa, so oder die Ziffern 1–7 (1 = Montag), mit Komma	alle Tage	`tage=di,do`
`sortierung`	standard, wochentag, titel oder plaetze	standard	`sortierung=wochentag`
`ansicht`	liste, wochenplan, kalender oder terminliste	liste	`ansicht=wochenplan`
`monat`	JJJJ-MM, nur bei ansicht=kalender und nur in der iframe-Fassung	laufender Monat	`monat=2026-09`

Ein Wert, den euer Verein nicht hat, fällt ersatzlos weg — es gibt dadurch keine Fehlerseite und keine leere Liste. monat reicht die Skript-Fassung bewusst nicht durch; wer einen bestimmten Monat vorgeben will, nimmt die iframe-Fassung.

Weg 1 von 4

WordPress

Voraussetzung

Ihr müsst in eurem WordPress Plugins installieren dürfen. Bei einer selbst betriebenen Installation ist das immer der Fall. Bei gehosteten WordPress-Tarifen kann das Hochladen eigener Plugins gesperrt sein — schaut nach, ob es im Menü Plugins → Installieren → Plugin hochladen überhaupt gibt. Gibt es das nicht, nehmt den allgemeinen Weg mit dem Block „Individuelles HTML“.

Gut zu wissen

In WordPress ist das Plugin dem Schnipsel vorzuziehen, und zwar aus einem praktischen Grund: Der Absatz-Editor entfernt <script>, viele Sicherheits-Plugins tun dasselbe beim Speichern, und beim nächsten Theme-Wechsel ist ein „Individuelles HTML“-Block gern verschwunden. Ein Block übersteht das.

Das Plugin liegt nicht hier zum Herunterladen, sondern in eurer eigenen Verwaltung — dort ist eure Adresse schon hinterlegt.

Schritte

Die ZIP-Datei in ClubVivo unter Inhalte → Widgets herunterladen.
In WordPress: Plugins → Installieren → Plugin hochladen, Datei wählen, installieren, aktivieren.
Einstellungen → ClubVivo öffnen und die Adresse eurer ClubVivo-Seite eintragen, also https://euer-verein.clubvivo.de.
Die Seite bearbeiten, an der die Liste stehen soll, und den Block ClubVivo Angebote einfügen. Im klassischen Editor und in Seitenbaukästen wie Elementor schreibt ihr stattdessen den Shortcode.
In der Seitenleiste unter „Welches Widget?“ euer gespeichertes Widget wählen — ihr müsst keine Kennung abtippen.

Der Einbettcode

Mit dem Block braucht ihr gar keinen Code. Für den klassischen Editor und für Seitenbaukästen gibt es den Shortcode:

Shortcode

[clubvivo id="8bqz3k4p"]

Ersetzt die Beispiel-Kennung durch die eures Widgets. Ohne Kennung könnt ihr die Filter auch einzeln angeben, etwa [clubvivo ansicht="wochenplan" tage="di,do"].

Woran ihr merkt, dass es geklappt hat

Ruft die Seite in einem privaten Fenster auf, nicht im Editor. Dort stehen eure echten Angebote mit Terminen und freien Plätzen.

Zweite Probe: Verkleinert das Fenster. Der Kasten wird höher oder niedriger, aber es erscheint kein zweiter Scrollbalken darin. Dann meldet die Einbettung ihre Höhe richtig.

Wenn es nicht klappt

Es erscheint gar nichts. Meist hält ein Cookie- oder Sicherheits-Plugin fremde Skripte zurück, bis jemand zustimmt. Gebt widget.js dort frei.
Ein leerer Kasten. Prüft unter Einstellungen → ClubVivo, ob dort eure Adresse steht — und in ClubVivo, ob ihr die erlaubten Einbett-Adressen eingeschränkt und eure WordPress-Adresse dabei vergessen habt.
Nach dem Speichern ist der Code weg. Ihr habt ihn in den Absatz-Editor geschrieben statt in den Block. Genau dafür gibt es das Plugin.

Alles zum WordPress-Plugin

Weg 2 von 4

Wix

Voraussetzung

Ein Wix-Auftritt, in dem ihr Elemente einfügen dürft. Für das Element „HTML einbetten“ genügt der Editor. Wollt ihr Code stattdessen fest in den Seitenkopf legen („Individueller Code“), verlangt Wix zusätzlich ein Premiumpaket mit verbundener eigener Domain — für unseren Weg braucht ihr das nicht.

Gut zu wissen

Wix schreibt in seinem Hilfe-Center, die HTML- und URL-Elemente des Editors seien selbst iFrames. Das hat eine Folge, die kaum eine Anleitung erwähnt: unsere automatische Höhenanpassung kommt hier nicht durch. Sie meldet ihre Höhe korrekt an unser eigenes Skript, aber der Wix-Rahmen darum herum bleibt so hoch, wie ihr ihn im Editor gezogen habt. Wachsen kann er dadurch nicht.

Deshalb ist bei Wix die Fassung ohne Skript die ehrlichere Wahl: ein Rahmen statt zwei, und die Höhe stellt ihr ohnehin von Hand ein.

Schritte

In ClubVivo unter Inhalte → Widgets das Widget anlegen und den Code kopieren.
Im Wix-Editor: Hinzufügen → Code einbetten → HTML einbetten.
Im geöffneten Feld „Code“ wählen und den Einbettcode einfügen.
Das Element auf die volle Spaltenbreite ziehen und die Höhe großzügig einstellen — lieber etwas zu hoch als zu niedrig.
Veröffentlichen und die veröffentlichte Seite aufrufen. In der Editor-Vorschau bleibt der Bereich häufig leer; das allein ist noch kein Fehler.

Der Einbettcode

Für Wix empfohlen: Fassung ohne Skript

Ersetzt euer-verein.clubvivo.de durch die Adresse eurer eigenen Verwaltung.

<iframe src="https://euer-verein.clubvivo.de/widget?id=8bqz3k4p"
        title="Angebote und Anmeldung"
        style="width:100%;height:900px;border:0"
        loading="lazy"></iframe>

Passt 900px an, bis die Liste ohne zweiten Scrollbalken hineinpasst, und stellt das Wix-Element auf dieselbe Höhe.

Die Skript-Fassung von weiter oben funktioniert in diesem Element ebenfalls — sie bringt hier nur keinen Vorteil, weil sie den Wix-Rahmen nicht vergrößern kann.

Woran ihr merkt, dass es geklappt hat

Auf der veröffentlichten Seite stehen eure Angebote — nicht in der Editor-Vorschau, die ist hier kein verlässlicher Prüfstein.

Ein Klick auf „Anmelden“ öffnet einen neuen Tab mit eurer ClubVivo-Seite. Das ist so gewollt: Ein Anmeldeformular in einem schmalen Rahmen wäre niemandem zuzumuten.

Wenn es nicht klappt

Der Kasten bleibt leer. Prüft, ob die Adresse im Code mit https:// beginnt. Wix verlangt das ausdrücklich; über http eingebundene Inhalte zeigt die veröffentlichte Seite nicht an.
Unten fehlt etwas oder es gibt einen Scrollbalken im Kasten. Der Rahmen ist zu niedrig. Zieht das Element höher — eine automatische Höhe gibt es hier nicht.
Es erscheint nichts, obwohl der Code stimmt. Habt ihr in ClubVivo die erlaubten Einbett-Adressen eingeschränkt? Dann muss eure Wix-Adresse in der Liste stehen.

Stand: 31. August 2026. Grundlage sind die Angaben im Wix-Hilfe-Center zu eingebetteten Elementen und zu individuellem Code. Tarife und Menüwege können sich ändern — prüft im Zweifel dort nach.

Weg 3 von 4

Jimdo

Voraussetzung

Ein Tarif, in dem es ein Element für eigenen Code gibt. Es heißt bei Jimdo „Widget/HTML“. Findet ihr es in eurer Elementliste nicht, hat euer Tarif kein Code-Element — dann ist der Link auf eure Kursliste die richtige Lösung, nicht ein Tarifwechsel.

Gut zu wissen

Jimdo betreibt zwei Baukästen nebeneinander: den älteren Creator und den heutigen Jimdo-Website-Baukasten. Für den Creator beschreibt Jimdos Hilfe-Center das Element „Widget/HTML“ ausdrücklich. Für den heutigen Baukasten konnten wir nicht belegen, in welchen Tarifen es enthalten ist — deshalb steht hier keine Tarifangabe, sondern die Prüfung: nachsehen, ob es das Element gibt.

Schritte

In ClubVivo unter Inhalte → Widgets das Widget anlegen und den Code kopieren.
Bei Jimdo auf Bearbeiten gehen, mit der Maus über die Stelle fahren, an der die Liste stehen soll, und „Element hinzufügen“ anklicken.
Unter „Weitere Elemente & Add-ons“ das Element „Widget/HTML“ wählen.
Den Einbettcode in das Feld einfügen und speichern.
Die Seite veröffentlichen und in einem normalen Browserfenster aufrufen — nicht im Bearbeitungsmodus.

Der Einbettcode

Zuerst probieren: Fassung mit Skript

Ersetzt euer-verein.clubvivo.de durch die Adresse eurer eigenen Verwaltung.

<div data-clubvivo-widget data-id="8bqz3k4p"></div>
<script src="https://euer-verein.clubvivo.de/widget.js" defer></script>

Wenn nach dem Speichern nichts erscheint, lässt euer Tarif das Skript nicht durch — dann nehmt die Fassung darunter.

Rückfallweg: Fassung ohne Skript

Ersetzt euer-verein.clubvivo.de durch die Adresse eurer eigenen Verwaltung.

<iframe src="https://euer-verein.clubvivo.de/widget?id=8bqz3k4p"
        title="Angebote und Anmeldung"
        style="width:100%;height:900px;border:0"
        loading="lazy"></iframe>

Kommt ohne JavaScript aus. Feste Höhe: Erhöht 900px, bis die Liste hineinpasst.

Woran ihr merkt, dass es geklappt hat

Im veröffentlichten Auftritt stehen eure echten Angebote. Wenn ihr die Skript-Fassung verwendet, wächst der Bereich mit der Zahl der Angebote mit — es gibt keinen zweiten Scrollbalken.

Bleibt die Skript-Fassung leer und die iframe-Fassung zeigt die Liste, dann wisst ihr, woran es lag, und könnt beim Rückfallweg bleiben.

Wenn es nicht klappt

Der Code steht nach dem Speichern noch da, aber es erscheint nichts. Das spricht dafür, dass eingefügtes JavaScript nicht ausgeführt wird. Nehmt die iframe-Fassung.
„Widget/HTML“ gibt es bei euch nicht. Dann hat euer Tarif kein Code-Element. Verlinkt eure Kursliste, statt zu suchen.
Die Liste ist unten abgeschnitten. In der iframe-Fassung ist die Höhe fest: Erhöht den Wert hinter height:.

Stand: 31. August 2026. Der Klickweg folgt der Beschreibung im Jimdo-Hilfe-Center zum Einfügen eigenen Codes. Zur Tarifzuordnung im heutigen Baukasten machen wir bewusst keine Angabe — wir konnten sie nicht belegen.

Weg 4 von 4

Alle anderen Systeme

Voraussetzung

Irgendeine Stelle, an der ihr eigenes HTML einfügen dürft. Sie heißt je nach System anders — „HTML-Inhaltselement“ in TYPO3, „Custom HTML“ in Joomla, „Code-Block“ in Squarespace, „HTML-Element“ bei IONOS MyWebsite, „Individuelles HTML“ in WordPress ohne Plugin. Wie sie heißt, ist gleich. Sie muss den Code nur unverändert speichern.

Gut zu wissen

Wenn eure Website von einer Agentur betreut wird, ist das hier die Stelle zum Weiterreichen: Der Code ist vollständig, er braucht keinen Zugang und keinen Schlüssel, und er lädt nichts von Dritten nach.

Schritte

In ClubVivo unter Inhalte → Widgets das Widget anlegen und den Code kopieren.
In eurem System die Seite bearbeiten und ein HTML- oder Code-Element einfügen.
Den Code hineinkopieren und speichern.
Die Seite veröffentlichen.
Die veröffentlichte Seite in einem normalen Fenster aufrufen und die Probe rechts machen.

Der Einbettcode

Fassung mit Skript

Ersetzt euer-verein.clubvivo.de durch die Adresse eurer eigenen Verwaltung.

<div data-clubvivo-widget data-id="8bqz3k4p"></div>
<script src="https://euer-verein.clubvivo.de/widget.js" defer></script>

Erste Wahl überall dort, wo der Code unverändert in die Seite geschrieben wird.

Fassung ohne Skript

Ersetzt euer-verein.clubvivo.de durch die Adresse eurer eigenen Verwaltung.

<iframe src="https://euer-verein.clubvivo.de/widget?id=8bqz3k4p"
        title="Angebote und Anmeldung"
        style="width:100%;height:900px;border:0"
        loading="lazy"></iframe>

Für Systeme, die fremde Skripte entfernen oder den Code in einen eigenen Rahmen legen.

Woran ihr merkt, dass es geklappt hat

Auf der veröffentlichten Seite stehen eure Angebote — mit denselben Terminen und Plätzen wie in eurer Verwaltung.

Wenn ihr genauer prüfen wollt: Seht euch den Quelltext der veröffentlichten Seite an. Steht dort data-clubvivo-widget beziehungsweise euer <iframe> unverändert, hat euer System den Code durchgelassen.

Wenn es nicht klappt

Im Quelltext fehlt der Code. Euer System filtert HTML im Text-Editor. Sucht nach einem eigenen Code- oder HTML-Element; im normalen Textfeld wird das nichts.
Der Rahmen bleibt weiß. Zwei häufige Ursachen: Die Adresse beginnt nicht mit https://, oder in ClubVivo sind die erlaubten Einbett-Adressen eingeschränkt und eure fehlt.
Die Liste ist da, aber abgeschnitten. Ihr habt die iframe-Fassung oder euer System legt den Code in einen eigenen Rahmen. In beiden Fällen stellt ihr die Höhe von Hand ein.

Der Weg, der immer geht

Wenn euer Baukasten kein HTML zulässt

Manche Tarife erlauben kein eigenes HTML — und manche Baukästen überhaupt nicht. Das ist kein Grund, den Tarif zu wechseln.

Setzt in eurem Menü oder auf eurer Kursseite einen gewöhnlichen Link auf eure Kursliste unter eurer ClubVivo-Adresse. Das kann jeder Baukasten, in jedem Tarif, und es funktioniert genauso im Newsletter, im Aushang per QR-Code und in eurem Social-Media-Profil.

Die Anmeldung läuft danach exakt so ab wie bei einer Einbettung — Warteliste, Bestätigung und Rechnung inbegriffen. Für viele Vereine ist das die ganze Lösung, und sie ist keine schlechtere.

Zwei Adressen kommen dafür in Frage: eure Kursseite in ClubVivo oder direkt die Ansicht eines gespeicherten Widgets. Die zweite zeigt genau den Ausschnitt, den ihr im Widget gewählt habt — praktisch, wenn ihr aus einer Unterseite heraus nur auf einen Teil eures Programms verweisen wollt.

Ein Link, zwei mögliche Ziele

<a href="https://euer-verein.clubvivo.de/kurse">Unsere Kurse und Anmeldung</a>

<a href="https://euer-verein.clubvivo.de/widget?id=8bqz3k4p">Unsere Seepferdchen-Kurse</a>

Die genaue Adresse eurer Kursseite steht in eurer Verwaltung bei der Seite selbst; die Widget-Adresse steht neben dem Einbettcode.

Und wenn wir ganz neu bauen?

Im Basispaket steckt ein Website-Baukasten. Die Angebotsliste ist dort ein Block wie jeder andere — kein Einbettcode, keine Tariffrage. Beides nebeneinander geht auch.

Häufige Fragen

Brauchen wir für den Einbettcode einen Schlüssel oder einen Zugang?: Nein. Im Code steht nur die Kennung eures gespeicherten Widgets und die Adresse eurer Verwaltung. Die Angebotsliste ist öffentlich und wird nur gelesen; es gibt nichts zu verbinden und nichts zu autorisieren.
Warum ist die eingebettete Liste bei uns unten abgeschnitten?: Weil ihr die iframe-Fassung mit fester Höhe verwendet oder weil euer Baukasten den Code in einen eigenen Rahmen legt. Nur die Skript-Fassung passt ihre Höhe selbst an, und auch sie kann einen Rahmen, den euer Baukasten um sie herum zieht, nicht wachsen lassen. Erhöht in diesen Fällen die Höhe von Hand.
Was tun, wenn unser Baukasten kein HTML zulässt?: Dann verlinkt eure Kursliste unter eurer ClubVivo-Adresse. Der Link funktioniert in jedem Baukasten, in jedem Tarif und in jedem Newsletter, und die Anmeldung läuft danach genauso ab wie bei einer Einbettung.
Müssen wir den Code jedes Mal ändern, wenn wir andere Kurse zeigen wollen?: Nein. Im Code steht nur die Kennung. Welche Kategorien, Standorte, Abteilungen und Wochentage dahinter stecken, ändert ihr in eurer Verwaltung unter „Inhalte → Widgets“ — die fremde Website muss danach niemand mehr anfassen.

Woher die Angaben stammen

Was hier steht — und was bewusst nicht

Die Einbettcodes, die Parameter und das Verhalten der Höhenmeldung sind gegen unsere eigene Software geprüft, nicht aus dem Gedächtnis geschrieben. Die Angaben zu fremden Baukästen stammen aus deren eigenen Hilfe-Zentren und tragen deshalb ein Datum: Stand 31. August 2026. Tarife und Menüpunkte ändern sich, und eine undatierte Behauptung altert unbemerkt.

Was hier fehlt, fehlt mit Absicht: keine Screenshots fremder Oberflächen — die ändern sich laufend —, keine Bewertung fremder Tarife und keine Zusage, dass wir eure fremde Website für euch einrichten. Wo wir eine Aussage nicht belegen konnten, steht das ausdrücklich dabei.

Jetzt buchen Demo ansehen Dieselben Schritte im Hilfe-Center

Weiter zu den Nachbarseiten: Was das Widget kann · Das WordPress-Plugin · Der Website-Baukasten