HTML-блок в Тильде официально называется T123, но большинство ищет его по запросу «тильда html»: через этот блок в страницу попадает любой HTML, CSS и JavaScript, которые не входят в стандартный набор конструктора. Я регулярно вставляю туда виджеты, калькуляторы и формы для клиентов, и по моим наблюдениям такой блок закрывает большую часть задач, для которых раньше просили отдельную доработку сайта. Но у него есть чёткая граница возможностей, и в этой статье разбираю, что туда стоит класть, а что там работать не будет в принципе.
По теме статьи
Готовое решение
Подсказки адреса DaData в форме Tilda
Посетитель начинает вводить адрес, и под полем появляются готовые варианты из базы DaData. Выбранная строка встаёт в поле целиком. Без jQuery, на бесплатном тарифе DaData.
Бесплатно
Кастомный скрипт
Когда стандартных блоков не хватает
Доработка сайтов на Тильде: скрипты для корзины, промокоды, зоны доставки, интеграции с CRM и Telegram. Простой скрипт от 3 000
от3 000 ₽
Что такое HTML-блок T123 и зачем он нужен
T123 лежит в панели блоков в категории «Другое». Внутри три вкладки: HTML, CSS и Javascript. Положить в блок можно любой код, включая скрипты и стили, а вот PHP на стороне Тильды не выполняется. Тильда не проверяет и не форматирует содержимое, блок просто выводит переданный HTML на странице в том месте, куда его перетащили.
На практике я использую его для трёх типов задач: встраивание готового виджета от внешнего сервиса (карта, форма бронирования, чат), кастомный интерактивный элемент, который в конструкторе руками не собрать (калькулятор, конвертер, фильтр), и точечная правка поведения соседних блоков через JavaScript, когда штатных настроек Тильды под конкретную задачу не хватает.
Что реально кладут в HTML-блок на практике
Виджеты и калькуляторы
Сюда попадают самостоятельные скрипты, которые не привязаны к каталогу или форме Тильды, а просто выводят интерфейс и считают что-то на своей стороне. Например, готовый конвертер валют для Tilda целиком представляет собой такой скрипт: его вставляют в HTML-блок, и он сразу показывает пересчёт цены в разных валютах без перезагрузки страницы. По той же логике работают виджеты расчёта доставки по зонам, подарочных сертификатов с проверкой номинала и расчёта налогов для интернет-магазина.
Встраивание сторонних сервисов
Карты, видеоплееры, виджеты онлайн-чатов, формы бронирования из внешних систем - почти все такие сервисы выдают готовый embed-код, и его просто вставляют в HTML-блок целиком. Здесь моя единственная правка обычно касается адаптива: у сторонних виджетов часто фиксированная ширина, и на мобильной версии её приходится подрезать через CSS внутри того же блока.
Формы с отправкой во внешние сервисы
Если нужна не просто заявка на почту, а форма с нестандартными полями и логикой валидации, я собираю её вручную в HTML-блоке и отправляю данные через fetch на внешний вебхук. Дальше данные разбирает сценарий в n8n: он раскладывает заявку по CRM, таблице и присылает уведомление в чат, и токены сторонних сервисов при этом остаются на сервере, а не в браузере посетителя.
Типичные ошибки при вставке кода в HTML-блок
- Не оборачивают JavaScript в самовызывающуюся функцию, из-за чего переменные и функции конфликтуют между несколькими HTML-блоками на одной странице.
- Пишут <style> внутри блока в надежде, что он подействует только на этот блок. На деле Тильда выводит стили в общий поток страницы, и селектор без уникального класса легко перекрывает соседние блоки.
- Проверяют поведение скрипта прямо в редакторе Тильды. Редактор не всегда исполняет JavaScript так же, как опубликованная страница, поэтому финальную проверку нужно делать на реальном URL.
- Вставляют библиотеку целиком внутрь блока вместо подключения через CDN-ссылку. Это раздувает вес страницы и грузится с нуля при каждом визите.
- Забывают про мобильную версию: CSS и JavaScript внутри HTML-блока не подчиняются адаптиву Тильды автоматически, брейкпоинты нужно считать вручную через media queries.
Вот минимальный пример, как я оборачиваю скрипт, чтобы он не спорил с другими блоками на странице:
(function () {
var counter = document.querySelector('.js-counter');
if (!counter) return;
counter.textContent = 'Готово';
})();Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Чего HTML-блок не умеет делать
Всё, что вставлено в блок, выполняется в браузере посетителя, а не на сервере. Отсюда несколько реальных ограничений, а не выдуманных:
- В блоке нельзя хранить секретные ключи API, пароли от CRM или токен Telegram-бота: любой человек откроет консоль разработчика и увидит исходный код страницы. Для таких сценариев нужен промежуточный обработчик, обычно это PHP-скрипт на том же хостинге, где лежит сайт (отдельный сервер под него не нужен, хостинг уже оплачен клиентом), который принимает запрос от формы и сам обращается к CRM или Telegram Bot API с ключом на своей стороне.
- Блок не хранит данные между визитами, кроме localStorage и cookies в браузере. Полноценный счётчик, например остаток промокодов, там не завести, для этого нужна база на сервере.
- Если задача решается штатными настройками Тильды, HTML-блок для неё не нужен вообще. Ограничение количества использований промокода настраивается в разделе магазина, доставка Яндекса подключается через поле токена в настройках платёжных систем и доставки, обмен товарами и остатками с 1С идёт по CommerceML прямо из интерфейса. Штатная настройка отработает надёжнее самописного скрипта.
- Блок не подсвечивает синтаксис и не проверяет код, как полноценная среда разработки. Опечатка тихо ломает только этот блок, без внятного сообщения об ошибке в интерфейсе Тильды.
- Контент, который блок дорисовывает через JavaScript уже после загрузки страницы, посетитель видит сразу, но для поисковых роботов такой рендер обрабатывается не так предсказуемо, как обычный HTML. Ключевые заголовки и текст лучше верстать через штатные блоки Тильды, а HTML-блок оставлять под интерактив.
Если уведомление должно прийти в Telegram, я поднимаю отдельного бота на aiogram и шлю запрос туда с сервера, а не пытаюсь отправить сообщение прямо из браузера с токеном внутри кода блока.
HTML-блок и штатные блоки Тильды: что выбрать
Есть ещё Zero Block со своим html-элементом: он живёт внутри сетки Zero Block и чуть более предсказуем в адаптиве, но ограничения по секретам и серверной логике у него те же самые. Разница по сути только в верстке-обёртке, а не в возможностях кода внутри.
| Критерий | HTML-блок T123 | Готовые блоки Тильды |
|---|---|---|
| Что можно вставить | Любой HTML, CSS и JavaScript без ограничений платформы | Только то, что предусмотрено настройками конкретного блока |
| Кто отвечает за адаптив на мобильных | Вёрстка и медиазапросы на вашей стороне | Адаптив уже настроен Тильдой, правится через панель настроек |
| Когда уместно | Кастомный виджет, сторонний скрипт, нестандартная логика | Меню, галерея, форма обратной связи, каталог и другие типовые разделы |
Когда самостоятельная вставка кода обходится дороже, чем заказ готового решения
Отладка конфликта переменных между тремя чужими скриптами на одной странице легко съедает вечер, а утечка ключа API из клиентского кода это уже не потерянное время, а реальный риск для бизнеса клиента. Я оцениваю точечный кастомный скрипт под конкретную задачу для HTML-блока от 3 000 ₽, а если нужна связка из нескольких систем сразу, например CRM, эквайринг и СДЭК, это отдельная работа от 40 000 ₽, потому что там уже нужен свой backend-обработчик, а не один блок с кодом.
Условия и возможности Тильды меняются, поэтому перед запуском я уточняю их у самого сервиса.
Частые вопросы
Можно ли вставить несколько HTML-блоков на одну страницу в Тильде?
Да, ограничения на количество блоков на странице нет. Но все они выполняются в общем JavaScript-окружении страницы, поэтому переменные и id элементов из разных блоков могут конфликтовать, если код не обёрнут в отдельную функцию. Чем больше тяжёлых скриптов на странице, тем заметнее просаживается скорость загрузки.
Почему скрипт работает в редакторе Тильды, но ломается на опубликованной странице?
В режиме редактирования и в предпросмотре код не исполняется вообще, Тильда выводит его просто текстом. Чтобы скрипт заработал, страницу нужно опубликовать, поэтому проверять поведение можно только на опубликованной странице. Если после публикации ничего не изменилось, стоит сделать жёсткое обновление страницы в браузере, старую версию скрипта может отдавать кеш.
Индексируется ли контент, который выводится через JavaScript в HTML-блоке?
Поисковые системы умеют обрабатывать JavaScript, но делают это не так быстро и предсказуемо, как обычную html-разметку. Для интерактивных элементов, калькуляторов и виджетов это некритично, а вот заголовки, основной текст страницы и ссылки надёжнее верстать через штатные блоки Тильды, а не прятать их внутри скрипта.
Можно ли принимать оплату прямо через код в HTML-блоке?
Вывести форму оплаты внутри HTML-блока можно, а вот принять и подтвердить сам платёж без сервера нельзя: секретный ключ платёжной системы нельзя держать в браузере. Для Робокассы у Тильды есть готовая интеграция в настройках платёжных систем, а для остальных провайдеров эквайринг я обычно поднимаю через отдельный PHP-обработчик на хостинге, который проверяет подпись запроса и уже потом обновляет заказ.