Как опубликовать программу мероприятия на сайте: iframe, виджет или отдельная страница
После анонса конференции в Telegram люди открывали внутренний сайт Контура с телефона. По аналитике сайта, около 70% посетителей заходили именно так. Они искали доклад, время и зал, а программа вела их в Google Таблицу. Для трёх организаторов таблица была удобным рабочим файлом; для участника — ещё одной вкладкой, в которой нужно разбираться.
Конференция проходит дважды в год, и команда решила оформлять программу прямо на внутреннем сайте. Она стала выглядеть частью события. Но вместе с этим появилась повторяющаяся работа: собрать карточки докладов, проверить время и залы, а после изменений не забыть исправить и таблицу, и страницу. Красивая верстка не помогала, если в одном из этих мест оставалось старое расписание.
В итоге команда встроила на внутренний сайт Контура виджет программы «Тут и там». Сайт был не публичным, но задача знакома и организаторам открытых конференций: оставить расписание там, куда аудитория уже приходит, и не собирать его заново после каждой правки. Ниже разберём варианты публикации и шаги, которые можно повторить на своём сайте.
Ссылка на таблицу, ручная страница или виджет: что выбрать
iframe и виджет здесь не конкуренты. Виджет показывает расписание; iframe — способ поместить его на страницу вашего сайта. Отдельная страница может означать как страницу на вашем домене со встроенным виджетом, так и прямую ссылку на программу на go.tutitam.top.
В Контуре выбрали третий вариант: расписание осталось на внутреннем сайте, но его не пришлось оформлять карточка за карточкой. Прямую ссылку на программу можно использовать отдельно, например отправить в чате. Однако у виджета есть существенная граница: встраивание на внутренний сайт не делает саму программу закрытой. Виджет доступен по прямой ссылке, поэтому в него не стоит помещать информацию, которую нельзя показывать за пределами команды.
Что должно быть видно участнику
Человек переходит из Telegram не для того, чтобы изучать устройство сайта. Ему нужны время, тема и место доклада, а если есть параллельные потоки — возможность сравнить их. Название без описания и спикера мало помогает с выбором. Поэтому перед публикацией стоит проверить не только внешний вид сетки, но и содержание карточек: понятны ли темы, верно ли указаны залы, есть ли описания выступлений.
Публичный виджет программы «Тут и там» показывает события по времени и залам, секции и спикеров. Из сетки можно открыть подробную карточку события; по программе работает поиск. Это удобно для первого знакомства с конференцией на сайте. Личное расписание и другие действия во время события решает уже мобильное приложение для конференции: виджет не стоит представлять как его полную замену.
Как подготовить программу в «Тут и там»
- Создайте мероприятие, заведите залы, секции и спикеров в соответствующих разделах. Затем в «Программе» добавьте события: доклады, перерывы и общие активности.
- Проверьте сетку по залам. Особенно внимательно посмотрите на пересечения по времени, названия помещений и карточки спикеров.
- Пригласите коллег через раздел «Команда» в рабочее пространство мероприятия. Все трое смогут работать с доступным им событием; отдельного обмена файлами не потребуется.
- Когда версия готова для участников, нажмите «Опубликовать». Виджет показывает только опубликованные данные: сохранённый черновик посетители не увидят.
- Откройте раздел «Виджеты», посмотрите программу по прямой ссылке и нажмите «Скопировать код для вставки».
Код уже содержит адрес программы именно вашего мероприятия. Не нужно искать идентификатор и собирать ссылку вручную. По виду это обычный iframe:
<iframe
src="https://go.tutitam.top/program/event_uuid"
title="Программа"
width="100%"
height="580"
loading="lazy"
style="display:block; border:0;">
</iframe>event_uuid здесь только пример. На сайт вставляйте код, скопированный из своей админки. Высоту 580 можно увеличить, если длинная программа оказывается в тесном окне. В документации виджета также описано, как зафиксировать светлую или тёмную тему; без настройки виджет ориентируется на системную тему посетителя.
Как вставить программу на сайт Tilda
Внутренний сайт Контура — не пример внедрения на Tilda или WordPress. Следующие инструкции нужны тем, кто хочет разместить такой же виджет на своём сайте.
- Откройте страницу конференции или создайте для программы отдельную страницу на своём сайте.
- В библиотеке блоков выберите «Другое» → T123 «Вставка HTML-кода».
- Вставьте в блок код, скопированный в разделе «Виджеты» «Тут и там».
- Опубликуйте страницу Tilda и откройте её по публичному адресу. По инструкции Tilda, в редакторе и режиме предпросмотра код отображается как текст; работу встраивания проверяйте после публикации.
На странице оставьте название конференции, дату, место, основные темы и ссылку на регистрацию; ниже разместите виджет. Ссылку на эту страницу можно поставить в меню и в посте Telegram-канала. Если программа велика, дайте блоку достаточно места по высоте и проверьте её на реальном телефоне, а не только в редакторе.
Как вставить программу на WordPress
В редакторе блоков WordPress откройте страницу конференции, нажмите + и добавьте блок «Произвольный HTML» (Custom HTML). Вставьте код виджета, затем обновите или опубликуйте страницу. Откройте её как посетитель на компьютере и телефоне. Порядок добавления блока описан в документации WordPress.
Если после сохранения iframe исчез, проверьте права пользователя, который редактирует страницу. WordPress может удалить этот тег у аккаунта без разрешения на нефильтрованный HTML. Это ограничение WordPress, а не настройка виджета; в таком случае попросите администратора сайта разместить код или используйте прямую ссылку на программу.
Что проверить на телефоне и после первой правки
Вернитесь к тому самому переходу из Telegram. Откройте страницу с телефона и попробуйте найти конкретный доклад. Видны ли время и зал? Можно ли открыть карточку? Не обрезана ли сетка краями страницы? Не приходится ли прокручивать маленькое окно внутри длинной страницы? Если приходится, увеличьте высоту iframe и снова проверьте результат. Для конференции с несколькими залами такой тест важнее, чем аккуратный вид блока в настольном редакторе.
Затем проверьте обновление: измените время тестового доклада в админке, сохраните и нажмите «Опубликовать». Откройте публичную страницу заново. Данные в виджете и в приложении берутся из опубликованной программы, поэтому повторно править блок сайта не требуется. Но если вы вручную написали на странице время того же доклада, этот текст придётся обновить отдельно.
Для команды из трёх человек полезно заранее договориться, кто сверяет расписание, кто проверяет страницу на телефоне и кто нажимает «Опубликовать». Рабочее пространство даёт совместный доступ к мероприятию, а публикация отделяет подготовку от версии, которую видит аудитория. Это не отменяет редакторскую проверку, зато убирает повторную ручную сборку программы на сайте.
А что с поиском Google?
Виджет решает задачу посетителя, но не должен быть единственным содержимым страницы. Google объясняет, что содержимое iframe может быть связано с основной страницей при индексации, однако это не гарантировано. Если вам важен поиск по программе конференции, дайте странице собственный заголовок и обычный текст: для кого событие, какие темы и форматы будут в программе, когда и где оно пройдёт. Не дублируйте в этом тексте все часы и залы, если они часто меняются: для точного расписания оставьте виджет.
Для публичного сайта это разделение особенно полезно: собственный текст страницы объясняет, что это за конференция, а виджет помогает выбрать доклад и показывает новую версию после публикации. В Контуре его разместили на внутреннем сайте; там преимущество было другим — команде больше не нужно вручную собирать на нём ту же программу из таблицы.
Если вы только выбираете цифровой формат события, начните с полного гида «Приложение для мероприятия»: там разобрано, когда достаточно сайта, а когда участнику полезно отдельное приложение.
Посмотрите пример публичной программы, затем создайте своё мероприятие и проверьте виджет на собственной странице. Подробнее о платформе и тарифах — на сайте «Тут и там».