Eine Veranstaltung auf deiner Website einbetten

Du kannst jede deiner Veranstaltungen auf zwei Arten auf deiner eigenen Website einbinden: als eingebettete Karte, über die Leute direkt zusagen können, oder als Button, der die Veranstaltung in einem Pop-up öffnet. Kopiere eine der beiden Varianten aus dem Bereich Verwalten → Erweitert → Einbetten deiner Veranstaltung.

Ersetze your-event durch die Adresse deiner Veranstaltung (den Teil nach /e/ in ihrer URL).

Eingebettete Karte

Zeigt die Veranstaltung — 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"
  allow="payment"
  title="My event"
></iframe>
<script src="https://cloomba.com/embed/embed.js" async></script>

Das Skript embed.js passt die Größe der Karte an. Besucher melden sich an und bezahlen per Karte direkt in der Karte; in Safari können sie dank allow="payment" auch mit Apple Pay bezahlen.

Anmelde-Button

Ein Button, der die Veranstaltung 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 ein Standard-Design. 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

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

Parameter	Werte	Was er bewirkt
`locale`	`en`, `sk`, `uk`, …	Anfangssprache der Karte
`theme`	`light`, `dark`	Hell oder Dunkel erzwingen (Standard: richtet sich nach dem Besucher)
`accent`	`%23rrggbb`	Akzentfarbe überschreiben (schreibe `#` als `%23`)
`bg`	`transparent`, `%23rrggbb`	Kartenhintergrund — `transparent` fügt sich in deine Seite ein
`coupon`	ein Gutscheincode	Wendet den Code an, wenn der Gast zur Kasse geht — siehe Rabattgutscheine
`utm_source`	eine Kennung, z. B. `partner-site`	Zählt die Besuche und Anmeldungen über diese Einbettung unter dieser Kennung — siehe Tracking-Links

locale legt die Sprache fest, in der die Karte geöffnet wird, nicht die einzige, die sie anzeigen kann: Jede Karte hat in ihrer Fußzeile eine Sprachauswahl, sodass Besucher in ihre eigene Sprache wechseln können. Lässt du locale weg, öffnet sich die Karte in der Browsersprache des Besuchers.

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

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

Der Gutschein und die Kennung sind data-cloomba-coupon und data-cloomba-utm-source:

<a
  class="cloomba-checkout--button"
  data-cloomba-event="your-event"
  data-cloomba-coupon="EARLYBIRD"
  data-cloomba-utm-source="partner-site"
>Register</a>
<script src="https://cloomba.com/embed/button.js" async></script>

Links von der Karte zu deiner Veranstaltungsseite auf Cloomba tragen den Gutschein und die Kennung mit sich.

Gut zu wissen

Nur öffentliche und nicht gelistete Veranstaltungen können eingebettet werden — private Veranstaltungen werden nicht angezeigt.
Besucher melden sich im Widget oder Pop-up an, um sich zu registrieren. Kostenpflichtige Tickets können auch allein mit Name und E-Mail-Adresse gekauft werden — das Ticket kommt per E-Mail.
Füge das Skript embed.js / button.js nur einmal pro Seite hinzu, auch bei mehreren Einbettungen.