Как мы можем помочь?

19. Виджеты мероприятий

Создано
Последнее обновление
Вы здесь:

В разделе «Виджеты мероприятий» отображается список всех созданных виджетов мероприятий компании. Каждый виджет представлен с названием, кратким описанием и настройками. Пользователь может выбрать, отображать ли в виджете все мероприятия компании или только те, которые привязаны через настройки мероприятия. Также доступна возможность скопировать код виджета для вставки на сайт, чтобы интегрировать виджет на внешней платформе.

Создание виджета мероприятий

Шаг 1: Откройте раздел «Настройки организации» и перейдите на вкладку «Виджеты мероприятий».

Шаг 2: Нажмите на кнопку «Добавить новый виджет»

Шаг 3: В появившейся форме заполните следующие поля:

Название виджета — укажите название, которое будет отображаться в списке виджетов.

Краткое описание — напишите короткое описание, которое будет пояснять назначение виджета.

Отметьте или оставьте пустым чекбокс «Все мероприятия компании»

✅ Отметить: виджет будет отображать все мероприятия компании.

⬜️ Не отмечать: виджет будет показывать только те мероприятия, у которых в разделе «Основная информация» в поле «Привязанные виджеты» выбран этот виджет.

Шаг 4: После заполнения формы нажмите «Сохранить».

Управление виджетами мероприятий

При открытии раздела «Виджеты мероприятий» открывается таблица со списком всех созданных виджетов.

Каждая строка — отдельный виджет

Таблица включает столбцы:

  1. Название — имя виджета, заданное при создании
  2. Краткое описание — пояснение или цель виджета
  3. Чекбокс «Все мероприятия компании»
  4. Код виджета — при клике по значению, код копируется в буфер обмена. Этот код можно вставить на сайт для отображения виджета. Виджет автоматически подтянет и будет отображать нужные мероприятия согласно его настройкам
  5. Иконка редактирования — при нажатии на иконку открывается форма редактирования выбранного виджета. В этой форме можно изменить название, описание и отметку чекбокса «Все мероприятия компании»
  6. Иконка удаления —при нажатии на эту иконку появляется подтверждение удаления виджета. Если пользователь подтверждает, виджет удаляется из системы и больше не будет доступен для использования.

Добавление мероприятий в виджет

Если при создании виджета мероприятий не был отмечен чекбокс «все мероприятия», то виджет будет показывать только те мероприятия, у которых в разделе «Основная информация» в поле «Привязанные виджеты» выбран этот виджет

Добавление мероприятия в виджет:

  1. Создать мероприятие и перейти к настройкам мероприятия в раздел «Основная информация»
  2. Найти блок «Привязанные виджеты»
  3. Раскрыть список доступных виджетов
  4. Отметить чекбокс ✅ напротив виджетов, в которые необходимо добавить данное мероприятие

Инструкция по установке и использованию виджета Make.Events

1. Подключение стилей

Для корректного отображения виджета необходимо добавить ссылку на CSS-файл в секцию <head> вашего сайта:

<link href="https://make.events/widget/css/widget-css.css" rel="stylesheet" as="style">

⚠️ Важно: ссылка должна быть именно в <head>, чтобы стили были загружены до отрисовки виджета.

2. Подключение скрипта и вставка контейнера

В том месте страницы, где должен отображаться виджет (обычно внутри <body>), вставьте следующий код:

<!-- app -->
<div id="app"></div>
<script 
  type="text/javascript" 
  src="https://make.events/widget/js/widget-app.js" 
  onload="window.EventWidget('https://make.events', '900ed4ed-aab8-4e25-a965-7f455aed0662')">
</script>
<!-- /app -->
Что здесь происходит:
  • <div id="app"></div> — контейнер, внутри которого будет отрисован виджет.
  • widget-app.js — основной скрипт, который подгружает функционал виджета.
  • onload="window.EventWidget(...)" — вызов функции инициализации виджета.

3. Параметры функции инициализации

window.EventWidget('URL_ИНСТАНСА', 'КОД_ВИДЖЕТА');
  • URL_ИНСТАНСА — адрес платформы Make.Events (https://make.events).
  • КОД_ВИДЖЕТА — уникальный идентификатор, который можно взять в личном кабинете

Пример:

window.EventWidget('https://make.events', '1339d001-8e47-4d09-8668-8442b4d87ce1');

4. Рекомендации по размещению

  • Размещайте код ближе к месту фактического отображения виджета, чтобы упростить верстку.
  • Если на странице используется async или defer для других скриптов — не применяйте их к виджету, так как вызов должен произойти сразу после загрузки widget-app.js.
  • Убедитесь, что на странице нет других элементов с id=»app», чтобы не возникло конфликтов.

5. Проверка корректной работы

После установки:

  1. Откройте страницу в браузере.
  2. Проверьте, что блок с виджетом отображается корректно.
  3. В консоли браузера (F12 → Console) не должно быть ошибок, связанных с загрузкой widget-app.js.
  4. Если виджет не отображается — убедитесь, что переданы правильные параметры URL_ИНСТАНСА и КОД_ВИДЖЕТА.

6. Частые ошибки

  • ❌ Пропущен <link> на CSS → виджет отображается без стилей.
  • ❌ Неверный КОД_ВИДЖЕТА → виджет не загружается.
  • ❌ Несколько контейнеров с id=»app» → сбой в отрисовке.
  • ❌ Указан неверный URL инстанса → ошибка при инициализации.

Содержание