Ein Event auf deiner Website einbetten

Du kannst jedes deiner Events auf zwei Arten in deine eigene Website einbinden: als Inline-Karte, auf der Leute direkt zusagen können, oder als Button, der das Event in einem Pop-up öffnet. Kopiere beides aus dem Bereich Verwalten → Erweitert → Einbetten deines Events.

Ersetze your-event durch die Adresse deines Events (den Teil nach /e/ in der URL).

Inline-Karte

Zeigt das Event — Titelbild, Datum, Ort und einen Zusage-Button — direkt auf deiner Seite an.

<iframe
  class="cloomba-embed"
  src="https://cloomba.com/embed/e/your-event"
  style="width: 100%; height: 300px; border: none"
  loading="lazy"
  title="My event"
></iframe>
<script src="https://cloomba.com/embed/embed.js" async></script>

Das embed.js-Skript passt die Größe der Karte automatisch an. Für kostenlose Events kann direkt in der Karte zugesagt werden (Besucher melden sich im Widget an); bei kostenpflichtigen Events öffnet sich Cloomba, um die Zahlung abzuschließen.

Registrierungs-Button

Ein Button, der das Event in einem zentrierten Pop-up öffnet — praktisch, wenn du einfach nur einen Call-to-Action möchtest.

<a
  class="cloomba-checkout--button"
  data-cloomba-event="your-event"
>Register for Event</a>
<script src="https://cloomba.com/embed/button.js" async></script>

Der Button hat einen Standard-Stil. Um dein eigenes Styling zu verwenden, entferne die Klasse cloomba-checkout--button und gestalte das <a>-Element nach Belieben — das Pop-up funktioniert trotzdem.

Anpassen

Inline-Karte — füge der src-URL Query-Parameter hinzu (z. B. …/embed/e/your-event?theme=dark):

Parameter	Werte	Was er bewirkt
`locale`	`en`, `sk`, `uk`, …	Sprache der Karte
`theme`	`light`, `dark`	Helles oder dunkles Design erzwingen (Standard: richtet sich nach dem Besucher)
`accent`	`%23rrggbb`	Akzentfarbe überschreiben (`#` als `%23` schreiben)
`bg`	`transparent`, `%23rrggbb`	Kartenhintergrund — `transparent` fügt sich in deine Seite ein

Button — übergib dieselben Optionen als data-cloomba-*-Attribute; sie werden an das Pop-up weitergeleitet:

<a
  class="cloomba-checkout--button"
  data-cloomba-event="your-event"
  data-cloomba-locale="sk"
  data-cloomba-theme="dark"
>Register</a>
<script src="https://cloomba.com/embed/button.js" async></script>

Gut zu wissen

Nur öffentliche und nicht gelistete Events können eingebettet werden — private Events werden nicht angezeigt.
Für die Registrierung wird ein Cloomba-Konto benötigt (keine anonymen Anmeldungen), daher melden sich Besucher im Widget oder Pop-up an. Kostenpflichtige Tickets werden immer auf Cloomba abgeschlossen.
Füge das embed.js- / button.js-Skript nur einmal pro Seite hinzu, auch bei mehreren Einbettungen.