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

Создано30 апреля, 2025

Последнее обновление18 декабря, 2025

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

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

Шаг 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. Проверка корректной работы

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

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

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

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

Кастомизация виджета мероприятий

Что нового появилось в настройках виджета мероприятия?

В разделе «Организация → Виджет мероприятия» добавлена расширенная панель кастомизации.
Она позволяет гибко настраивать внешний вид виджета без привлечения разработчиков и мгновенно видеть результат изменений.

Сколько настроек доступно и как они организованы?

Всего доступно 23 настройки, сгруппированные в 3 логические секции:

Общие стили и типографика
Стили карточки мероприятия
Кнопки и фильтры

Такое разделение упрощает навигацию и позволяет быстро находить нужные параметры.

Какие настройки входят в раздел «Общие стили и типографика»?

В этом разделе настраивается общий визуальный стиль виджета:

Шрифт
Выпадающий список с доступными шрифтами (например: Montserrat, Inter, Roboto).
Фон афиши
Цветовой ввод (HEX / RGB).
Основной текст
Цвет текста всего виджета (HEX / RGB).

Какие параметры доступны для карточки мероприятия?

Раздел «Стили карточки мероприятия» отвечает за внешний вид карточек событий:

Фон карточки — цветовой ввод (HEX / RGB)
Скругление карточки — слайдер от 0px до 32px (по умолчанию 12px)
Толщина рамки — слайдер от 0px до 5px (по умолчанию 1px)
Цвет рамки — цветовой ввод (HEX / RGB)
Тень карточки — слайдер от 0 до 10 (по умолчанию 0)
Заголовок карточки — цвет текста заголовка
Размер заголовка — слайдер от 16px до 28px (по умолчанию 20px)
Мета-текст (дата, место) — цветовой ввод
Скругление изображения — слайдер от 0px до 24px (по умолчанию 8px)
Эффект при наведении — выпадающий список:
- Нет
- Увеличение
- Вращение
- Затемнение

Какие настройки есть для кнопок и фильтров?

В разделе «Кнопки и фильтры» настраиваются интерактивные элементы:

Главные и вторичные кнопки

Фон главных кнопок — HEX / RGB
Текст главных кнопок — HEX / RGB
Скругление кнопок — слайдер от 0px до 24px (по умолчанию 10px)
Фон вторичных кнопок — HEX / RGB
Текст вторичных кнопок — HEX / RGB

Поля фильтра

Фон полей фильтра — HEX / RGB
Рамка полей фильтра — HEX / RGB
Иконки полей фильтра — HEX / RGB

Табы и теги

Фон активных табов / тегов — HEX / RGB
Текст активных табов / тегов — HEX / RGB
Фон неактивных табов — HEX / RGB
Текст неактивных табов — HEX / RGB
Цвет рамки табов — HEX / RGB
Скругление рамки — слайдер от 0px до 32px (по умолчанию 22px)

Можно ли увидеть изменения до сохранения настроек?

Да. В панели настроек добавлен фрейм предварительного просмотра.

Как работает предпросмотр?

Все изменения отображаются в реальном времени
Виджет в превью полностью повторяет внешний вид на сайте
Можно экспериментировать с цветами, скруглениями и эффектами без риска

Это позволяет быстро подобрать оптимальный дизайн и избежать лишних правок.

Нужно ли обновлять страницу после изменения настроек?

Нет. Все визуальные изменения:

применяются мгновенно в превью,
сохраняются после подтверждения,
не требуют перезагрузки страницы.

Кому будут полезны новые настройки?

Маркетологам и контент-менеджерам
Дизайнерам
Организаторам мероприятий
Всем, кто хочет адаптировать виджет под фирменный стиль бренда

How-to: Использование виджета мероприятий

1. Встраивание виджета на страницу

Чтобы разместить виджет на сайте, необходимо добавить HTML-контейнер и подключить скрипт инициализации внутрь тега <body> в том месте, где должен отображаться виджет.

Пример кода для вставки

<!-- app -->
<div id="ID_элемента_куда_будет_монтироваться_виджет"></div>
<script
  type="text/javascript"
  src="https://make.events/widget/js/widget-app.js"
  onload="window.EventWidget.init(
    'https://make.events',
    '900ed4ed-aab8-4e25-a965-7f455aed0662',
    '#ID_элемента_куда_будет_монтироваться_виджет',
    'ru'
  )"
></script>
<!-- /app -->

2. Параметры инициализации виджета

Виджет инициализируется с помощью функции:

window.EventWidget.init(
  'Ссылка на инстанс МЕ',
  'КОД_ВИДЖЕТА_ИЗ_ЛК',
  '#ID_элемента_куда_будет_монтироваться_виджет',
  'локаль (ru|en)'
);

Описание параметров

Параметр	Описание
Ссылка на инстанс МЕ	URL платформы Make Events
КОД_ВИДЖЕТА_ИЗ_ЛК	Уникальный код виджета, полученный в личном кабинете
ID элемента	CSS-селектор контейнера, в который монтируется виджет
Локаль	Язык интерфейса (`ru` или `en`)

3. Переключение локали вручную

При необходимости язык виджета можно изменить динамически после инициализации.

Синтаксис

window.EventWidget.changeLang(
  'локаль (ru|en)',
  'перезагрузить страницу true|false'
);

Пример

window.EventWidget.changeLang('en', true);

true — страница будет перезагружена
false — язык сменится без перезагрузки (если поддерживается окружением)

4. Ручная передача темы оформления

Виджет поддерживает передачу пользовательской темы оформления через JavaScript-объект.

Пример объекта темы

const theme = {
  mainFont: "montserrat",
  mainBackground: "#F3F4F4ff",
  mainTextColor: "#000000de",

  cardBackground: "#ffffffff",
  cardBorderRadius: 12,
  cardBorderWidth: 1,
  cardBorderColor: "#ffffffff",
  cardElevation: 0,
  cardTitleColor: "#000000de",
  cardTitleFontSize: 20,
  cardMetaColor: "#1A213250",
  cardImageBorderRadius: 8,
  visualEffect: "noEffect",

  primaryButtonColor: "#007bffff",
  primaryButtonTextColor: "#ffffffff",
  primaryButtonRadius: 10,

  secondaryButtonColor: "#808080FF",
  secondaryButtonTextColor: "#000000de",

  toggleActiveColor: "#007bffff",
  toggleActiveFontColor: "#ffffffff",
  toggleInactiveColor: "#ffffffff",
  toggleInactiveFontColor: "#000000de",
  toggleBorderRadius: 10,
  toggleBorderColor: "#007bffff",

  mainFieldBackgroundColor: "#00000000",
  mainFieldBorderColor: "#00000061",
  mainFieldIconColor: "#007bffff"
};

5. Применение темы к виджету

После изменения или формирования объекта темы необходимо обновить виджет:

window.EventWidget.refreshTheme(theme);

Изменения применяются мгновенно, без перезагрузки страницы.

6. Рекомендуемый порядок использования

Добавить контейнер <div> на страницу
Подключить widget-app.js
Инициализировать виджет через EventWidget.init()
(Опционально) сменить локаль
(Опционально) передать и обновить тему оформления

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