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

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

Замініть 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"
  title="My event"
></iframe>
<script src="https://cloomba.com/embed/embed.js" async></script>

Скрипт embed.js змінює розмір картки, щоб вона вписувалася. Участь у безкоштовних подіях можна підтвердити прямо в картці (відвідувачі входять у сам віджет); платні події відкривають Cloomba для завершення оплати.

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

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

<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` зливається з вашою сторінкою

Кнопка — передайте ті самі опції як атрибути 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>

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

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