Binde den Kalender deiner Community auf deiner Website ein

Du kannst den Kalender jeder deiner Cloomba-Communitys auf deiner eigenen Website einbinden. Besucher sehen deine kommenden Events in einem übersichtlichen, sich selbst aktualisierenden Widget – zum Durchstöbern ist kein Konto nötig.

Hol dir das fertige Snippet aus dem Tab Einstellungen deiner Community, im Abschnitt Einbetten, oder erstelle es selbst anhand der Beispiele unten.

Das Snippet

Füge dies dort ein, wo der Kalender erscheinen soll. Ersetze your-community durch die Adresse deiner Community (der Teil nach /c/ in ihrer URL).

<iframe
  class="cloomba-embed"
  src="https://cloomba.com/embed/c/your-community"
  style="width: 100%; height: 800px; border: none"
  loading="lazy"
  allow="payment"
  title="My calendar"
></iframe>
<script src="https://cloomba.com/embed/embed.js" async></script>

Das embed.js-Skript sorgt dafür, dass der Kalender seine Größe selbst anpasst, damit er zu seinem Inhalt passt – so gibt es nie eine innere Scrollleiste oder leeren Platz darunter. Füge es einmal pro Seite hinzu, auch wenn du mehrere Kalender einbettest.

Den Kalender anpassen

Füge der src-URL Optionen als Query-Parameter hinzu – zum Beispiel …/embed/c/your-community?view=week&theme=dark.

Parameter	Werte	Was er bewirkt
`locale`	`en`, `sk`, `uk`, …	Sprache des Widgets
`view`	`month`, `week`, `day`, `list`	Mit welcher Ansicht geöffnet wird
`tz`	z. B. `Europe/Bratislava`	Zeitzone, in der Zeiten angezeigt werden
`theme`	`light`, `dark`	Hell oder dunkel erzwingen (Standard: richtet sich nach dem Besucher)
`accent`	`%23rrggbb`	Die Akzentfarbe überschreiben (schreibe `#` als `%23`)
`bg`	`transparent`, `%23rrggbb`	Kartenhintergrund – `transparent` verschmilzt mit deiner Seite
`utm_source`	ein Label, z. B. `partner-site`	Zählt die Besuche und Anmeldungen von diesem Kalender unter diesem Label, auch bei den Events, die Besucher von dort öffnen – siehe Tracking-Links

Ein dunkler slowakischer Kalender, der in der Wochenansicht öffnet:

<iframe
  class="cloomba-embed"
  src="https://cloomba.com/embed/c/your-community?locale=sk&view=week&theme=dark"
  style="width: 100%; height: 800px; border: none"
  loading="lazy"
  allow="payment"
  title="My calendar"
></iframe>
<script src="https://cloomba.com/embed/embed.js" async></script>

Gut zu wissen

Das Widget zeigt nur öffentliche Events – private und nicht gelistete Events erscheinen nie.
Ein Klick auf ein Event öffnet dessen Details im Widget, wo Besucher sich anmelden, registrieren und per Karte bezahlen (in Safari fügt allow="payment" Apple Pay hinzu). Jedes Event verlinkt außerdem auf seine vollständige Seite auf Cloomba.
Die anfängliche height ist nur ein Rückfallwert für den Moment, bevor das Skript geladen ist – danach passt das Widget seine Größe selbst an.