# Раздел «Виджеты»

Виджеты — это публичные блоки для сайта мероприятия. Они берут данные из текущего мероприятия и показывают их посетителям без входа в админку.

Сейчас доступен виджет программы: сетка событий по времени и залам для встраивания через `iframe` или по прямой ссылке.

![Раздел «Виджеты» в админке «Тут и там»](/assets/images/tutitam-admin-widget.png)

!!! Попробуйте прямо сейчас
[Перейдите по ссылке](https://go.tutitam.top/program/7e488db2-e925-4f30-ae0f-0a5a695aa88a) и посмотрите как выглядит и работает виджет с программой конференции.
!!!

## Виджет «Программа мероприятия»

Виджет показывает:
- сетку расписания по залам;
- время и названия событий;
- секции;
- спикеров;
- подробную карточку события;
- поиск по названию, описанию, секции, залу и спикеру.

![На сайте организатора программа мероприятия выглядит так](/assets/images/tutitam-admin-widget-site.png)

События типа «В зале» отображаются в колонке конкретного зала. События «Перерыв в зале» тоже отображаются только в колонке выбранного зала, но выделяются цветом как «Общее для программы». События «Общее для программы» растягиваются на все видимые залы. События «Организационное» показываются отдельными карточками внутри той же таблицы рядом со своим временем и не создают отдельные колонки залов.

Если в зале нет ни одного события типа «В зале» или «Перерыв в зале», колонка этого зала в виджете не показывается. Если у события не указана секция, чип секции в подробной карточке не отображается.

Публичный URL строится по UUID мероприятия:

```text
https://go.tutitam.top/program/<event_uuid>
```

Админка сама подставляет UUID текущего мероприятия и генерирует HTML-код для вставки.

## Код для вставки

Базовый код:

```html
<iframe
  src="https://go.tutitam.top/program/<event_uuid>"
  title="Программа"
  width="100%"
  height="580"
  loading="lazy"
  style="display:block; border:0;">
</iframe>
```

Высоту `580` можно увеличить, если программа большая. Например, для большого количества залов или длинного расписания удобно использовать `720` или больше.

## Тема виджета

По умолчанию виджет подстраивается под системную тему посетителя сайта: светлую или темную.

Если нужно зафиксировать тему вручную, добавьте параметр:

```text
?theme=light
```

или:

```text
?theme=dark
```

Пример:

```html
<iframe src="https://go.tutitam.top/program/<event_uuid>?theme=dark"></iframe>
```

## Важное про публикацию

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

## Рекомендации

- Сначала опубликуйте мероприятие.
- Откройте виджет в отдельной вкладке и проверьте программу.
- Скопируйте код для вставки.
- Проверьте iframe на сайте на компьютере и телефоне.
- Если на сайте темный фон, протестируйте `?theme=dark`.