Osadź wydarzenie na swojej stronie

Każde ze swoich wydarzeń możesz umieścić na własnej stronie na dwa sposoby: jako osadzoną kartę, na której można od razu potwierdzić obecność, albo jako przycisk, który otwiera wydarzenie w okienku pop-up. Oba sposoby skopiujesz z sekcji Zarządzaj → Zaawansowane → Osadź swojego wydarzenia.

Zastąp your-event adresem swojego wydarzenia (częścią po /e/ w jego URL-u).

Osadzona karta

Pokazuje wydarzenie — okładkę, datę, lokalizację i przycisk potwierdzenia obecności — bezpośrednio na Twojej stronie.

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

Skrypt embed.js dopasowuje rozmiar karty. Odwiedzający rejestrują się i płacą kartą bezpośrednio w karcie; w Safari atrybut allow="payment" pozwala im także zapłacić za pomocą Apple Pay.

Przycisk rejestracji

Przycisk, który otwiera wydarzenie w wyśrodkowanym okienku pop-up — przydatny, gdy chcesz po prostu dodać wezwanie do działania.

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

Przycisk ma domyślny styl. Aby użyć własnego stylu, usuń klasę cloomba-checkout--button i ostyluj element <a> dowolnie — okienko pop-up nadal będzie działać.

Dostosowywanie

Osadzona karta — dodaj parametry zapytania do URL-a src (np. …/embed/e/your-event?theme=dark):

Parametr	Wartości	Co robi
`locale`	`en`, `sk`, `uk`, …	Początkowy język karty
`theme`	`light`, `dark`	Wymuś jasny lub ciemny (domyślnie: zgodnie z ustawieniami odwiedzającego)
`accent`	`%23rrggbb`	Nadpisz kolor akcentu (znak `#` zapisz jako `%23`)
`bg`	`transparent`, `%23rrggbb`	Tło karty — `transparent` wtapia się w Twoją stronę
`coupon`	kod kuponu	Stosuje kod, gdy gość otworzy podsumowanie — zobacz Kupony rabatowe
`utm_source`	etykieta, np. `partner-site`	Zlicza wizyty i rejestracje z tego osadzenia pod tą etykietą — zobacz Linki śledzące

locale ustawia język, w jakim otwiera się karta, a nie jedyny, jaki może wyświetlić: każda karta ma w stopce przełącznik języka, więc odwiedzający może przełączyć się na swój własny język. Pomiń locale, a karta otworzy się w języku przeglądarki odwiedzającego.

Przycisk — przekaż te same opcje jako atrybuty data-cloomba-*; są one przekazywane do okienka pop-up:

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

Kupon i etykieta to data-cloomba-coupon oraz 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>

Linki z karty do strony Twojego wydarzenia na Cloomba przenoszą ze sobą kupon i etykietę.

Warto wiedzieć

Osadzić można tylko wydarzenia publiczne i niepubliczne (unlisted) — wydarzenia prywatne się nie wyświetlą.
Odwiedzający logują się wewnątrz widżetu lub okienka pop-up, aby się zarejestrować. Płatne bilety można też kupić, podając jedynie imię i adres e-mail — bilet przyjdzie e-mailem.
Dodaj skrypt embed.js / button.js raz na stronę, nawet przy kilku osadzeniach.