Вбудуйте календар своєї спільноти на свій сайт

Ви можете вбудувати календар будь-якої зі своїх спільнот Cloomba на власний сайт. Відвідувачі бачать ваші майбутні події в акуратному віджеті, який оновлюється самостійно, — для перегляду обліковий запис не потрібен.

Візьміть готовий фрагмент коду на вкладці Налаштування вашої спільноти, у розділі Вбудовування, або створіть його самостійно за прикладами нижче.

Фрагмент коду

Вставте це туди, де має з'явитися календар. Замініть your-community на адресу вашої спільноти (частину після /c/ в її URL).

<iframe
  class="cloomba-embed"
  src="https://cloomba.com/embed/c/your-community"
  style="width: 100%; height: 800px; border: none"
  loading="lazy"
  allow="payment"
  title="My calendar"
></iframe>
<script src="https://cloomba.com/embed/embed.js" async></script>

Скрипт embed.js змушує календар змінювати власний розмір відповідно до вмісту, тож усередині ніколи не буде смуги прокручування чи порожнього місця під ним. Додайте його один раз на сторінку, навіть якщо ви вбудовуєте кілька календарів.

Налаштування календаря

Додавайте опції до URL-адреси src як параметри запиту — наприклад …/embed/c/your-community?view=week&theme=dark.

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

Темний словацький календар, що відкривається у вигляді тижня:

<iframe
  class="cloomba-embed"
  src="https://cloomba.com/embed/c/your-community?locale=sk&view=week&theme=dark"
  style="width: 100%; height: 800px; border: none"
  loading="lazy"
  allow="payment"
  title="My calendar"
></iframe>
<script src="https://cloomba.com/embed/embed.js" async></script>

Варто знати

Віджет показує лише публічні події — приватні та несписочні події ніколи не з'являються.
Клацання на подію відкриває її деталі всередині віджета, де відвідувачі входять, реєструються та оплачують карткою (у Safari allow="payment" додає Apple Pay). Кожна подія також має посилання на свою повну сторінку на Cloomba.
Початкова height — це лише запасний варіант на момент до завантаження скрипта; після цього віджет визначає свій розмір самостійно.