Вбудуйте подію на свій вебсайт

Будь-яку зі своїх подій можна розмістити на власному вебсайті двома способами: як вбудовану картку, де люди можуть підтвердити участь прямо на місці, або як кнопку, що відкриває подію у спливному вікні. Скопіюйте будь-який варіант із розділу Керування → Додатково → Вбудовування вашої події.

Замініть your-event на адресу вашої події (частину після /e/ у її URL).

Вбудована картка

Показує подію — обкладинку, дату, місце та кнопку підтвердження участі — прямо на вашій сторінці.

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

Скрипт embed.js змінює розмір картки, щоб вона вмістилася. Відвідувачі реєструються та платять карткою прямо в картці; у Safari allow="payment" дозволяє їм платити також через Apple Pay.

Кнопка реєстрації

Кнопка, що відкриває подію в центрованому спливному вікні — зручно, коли потрібен лише заклик до дії.

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

Кнопка має типовий стиль. Щоб використати власне оформлення, видаліть клас cloomba-checkout--button і стилізуйте <a> як забажаєте — спливне вікно все одно працюватиме.

Налаштування

Вбудована картка — додайте параметри запиту до URL у src (наприклад, …/embed/e/your-event?theme=dark):

Параметр	Значення	Що робить
`locale`	`en`, `sk`, `uk`, …	Початкова мова картки
`theme`	`light`, `dark`	Примусово світла або темна (за замовчуванням: відповідає налаштуванням відвідувача)
`accent`	`%23rrggbb`	Перевизначає акцентний колір (пишіть `#` як `%23`)
`bg`	`transparent`, `%23rrggbb`	Фон картки — `transparent` зливається з вашою сторінкою
`coupon`	код купона	Застосовує код, коли гість відкриває оформлення — див. Купони на знижку
`utm_source`	мітка, напр. `partner-site`	Рахує відвідування та реєстрації з цього вбудовування під цією міткою — див. Посилання для відстеження

locale задає мову, якою відкривається картка, але не єдину, яку вона може показувати: кожна картка має перемикач мов у нижній частині, тож відвідувач може перейти на свою мову. Якщо не вказати locale, картка відкриється мовою браузера відвідувача.

Кнопка — передайте ті самі опції як атрибути data-cloomba-*; вони пересилаються у спливне вікно:

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

Купон та мітка — це data-cloomba-coupon і 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>

Посилання з картки на сторінку вашої події в Cloomba несуть із собою купон та мітку.

Корисно знати

Вбудувати можна лише публічні та приховані зі списку події — приватні події не відображаються.
Відвідувачі входять у віджеті або спливному вікні, щоб зареєструватися. Платні квитки також можна придбати, вказавши лише ім'я та email — квиток надійде електронною поштою.
Додайте скрипт embed.js / button.js один раз на сторінку, навіть якщо вбудовувань кілька.