Как добавить html код на сайт tilda

Платформа Tilda предоставляет встроенные инструменты для вставки собственного HTML-кода, что позволяет расширить функциональность сайта за пределы стандартных блоков Zero Block и библиотек шаблонов. Основной способ – блок T123 «HTML-код», доступный в категории «Другие». Он позволяет встроить любой фрагмент HTML, включая сторонние виджеты, формы, скрипты аналитики и другое.

Для добавления кода откройте нужную страницу в редакторе, нажмите «Добавить блок» и выберите T123. Вставьте код в появившееся окно. Поддерживаются все стандартные HTML-теги, включая iframe, script, form, при этом важно учитывать ограничения безопасности браузеров и возможные блокировки со стороны Tilda (например, попытки загрузки небезопасных HTTP-ресурсов будут автоматически отклонены при публикации).

Если код содержит скрипты, размещённые во внешних источниках, убедитесь, что домен включён в список разрешённых в настройках проекта (раздел Site Settings → More → Content Security Policy). Без этого часть внешних ресурсов может не загрузиться. Также Tilda не исполняет JavaScript внутри предпросмотра – результат будет корректно отображаться только на опубликованной странице.

Для постоянных вставок, таких как виджеты чата или скрипты аналитики, используйте блоки HEAD и BODY в разделе Site Settings → Custom Code. Это избавляет от необходимости вручную добавлять код на каждую страницу.

Где в Tilda можно вставить HTML код

В Tilda доступно несколько точек для вставки HTML-кода, каждая из которых подходит для конкретных задач. Вот основные из них:

• Блок T123 «HTML-код» – добавляется через кнопку «+ Блок», категория «Другие». Позволяет вставлять произвольный HTML, CSS и JavaScript. Удобен для встраивания виджетов, форм, скриптов аналитики.
• Настройки сайта → Дополнительный код – влияет на все страницы сайта. Используется для счетчиков, глобальных стилей, подключения внешних библиотек.
• Настройки страницы → HTML-код перед </body> – вставка скриптов перед закрывающим тегом. Применяется для подключения сервисов, не влияющих на загрузку контента (например, чаты, аналитика).
• Zero Block – через элемент «HTML» можно встроить код прямо в кастомный дизайн. Актуально для точной позиционировки элементов или нестандартных решений.

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

Как использовать блок T123 для вставки собственного кода

Блок T123 в Tilda предназначен для добавления HTML, CSS или JavaScript. Он используется для расширения стандартной функциональности сайта.

Чтобы вставить код через блок T123:

1. Откройте страницу в режиме редактирования и нажмите «+», чтобы добавить новый блок.

2. В каталоге блоков перейдите в категорию «Другие» и выберите T123 «HTML-код».

3. Кликните по блоку и нажмите «Контент», чтобы открыть редактор.

4. Вставьте код в поле. Можно использовать любые HTML-элементы, включая встроенные виджеты, скрипты аналитики, iFrame и стили.

Особенности:

• JavaScript-скрипты следует размещать внутри тегов <script>.
• Стили можно добавлять с помощью <style> или встроенными атрибутами.
• Поддерживаются iFrame, но стоит учитывать ограничение по размеру вёрстки блока.
• Асинхронные скрипты (например, виджеты чатов) работают корректно при загрузке страницы.

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

• Проверяйте код в режиме предпросмотра, чтобы избежать конфликтов с другими блоками.
• Избегайте размещения большого количества логики в одном блоке T123 – разбивайте по структуре страницы.
• Для загрузки внешних скриптов используйте async или defer, чтобы не замедлять рендеринг.
• Соблюдайте безопасность: не вставляйте код с неизвестных источников, особенно с доступом к DOM.

После вставки кода опубликуйте страницу – Tilda применит изменения моментально.

Ограничения и допустимые теги в HTML-блоках Tilda

В HTML-блоках Tilda разрешены только безопасные теги, не влияющие на работу системы и не нарушающие политику безопасности. Поддерживаются стандартные теги: <div>, <span>, <p>, <a>, <ul>, <ol>, <li>, <h1>–<h6>, <img>, <br>, <strong>, <em>. Также допускается использование атрибутов class, id, href, target, rel, alt, title, style в ограниченном объёме.

Скрипты JavaScript через <script> и встроенные события (например, onclick) блокируются. Для добавления JS используется отдельный блок T123, где код исполняется изолированно.

Встраивание фреймов с помощью <iframe> ограничено. Допустимы только проверенные источники, например YouTube и Google Maps. В остальных случаях код удаляется автоматически.

Теги <style>, <link> и подключение сторонних CSS-файлов не поддерживаются. Для стилизации рекомендуется использовать встроенный редактор стилей Tilda или CSS внутри атрибута style.

Вставка форм с внешних ресурсов (например, с других CRM) возможна, но Tilda не гарантирует их корректную работу без настройки через Zero Block или API.

Все HTML-блоки проходят фильтрацию. Код, нарушающий политику безопасности (включая попытки внедрения XSS), автоматически удаляется при сохранении или публикации.

Добавление HTML кода в Zero Block через настройку элемента

Чтобы встроить HTML код в Zero Block, нужно использовать элемент «HTML». Это позволяет вставлять сторонние виджеты, скрипты или стилизованные блоки без выхода за пределы Tilda.

1. Откройте страницу в режиме редактирования и войдите в Zero Block.
2. В верхней панели нажмите кнопку +Element.
3. Выберите элемент HTML.
4. На холсте появится серый прямоугольник – это контейнер для вставки кода. Выделите его.
5. В правой панели нажмите кнопку Content.
6. Во всплывающем окне вставьте нужный HTML код. Примеры:
   • Скрипт формы обратной связи от стороннего сервиса
   • Виджет расписания
   • Произвольный блок с кастомной вёрсткой
7. Нажмите Save and Close, чтобы сохранить код.
8. Настройте размеры и позицию блока с помощью полей Width, Height, X и Y.

Если код содержит JavaScript, он будет работать только на опубликованной странице. В режиме предварительного просмотра могут быть ограничения.

Для подключения внешних библиотек (например, jQuery или карт от Яндекса), используйте атрибут <script> внутри элемента или добавьте библиотеку через настройки страницы – раздел Доп. HTML-код.

Избегайте дублирующихся ID в коде и проверьте консоль браузера при возникновении ошибок отображения.

Как подключить внешний скрипт с помощью HTML-кода

Чтобы добавить внешний JavaScript-файл на сайт в Tilda, используйте тег <script> с атрибутом src. Убедитесь, что скрипт размещён по HTTPS-ссылке – иначе он может быть заблокирован браузером.

Пример вставки:

<script src="https://example.com/script.js"></script>

Размещайте код во вкладке «Настройки страницы → Доп. HTML-код в <head>», если скрипт должен загружаться до отрисовки контента. Для выполнения после загрузки страницы – используйте «Настройки страницы → Доп. HTML-код в <body>».

Если требуется инициализация скрипта после загрузки DOM, оберните вызов в конструкцию:

<script>
document.addEventListener("DOMContentLoaded", function() {
// Инициализация
});
</script>

Для асинхронной загрузки добавьте атрибут async или defer. async – выполняет скрипт сразу после загрузки, defer – после полной загрузки HTML.

<script src="https://example.com/script.js" defer></script>

Избегайте подключения скриптов, не совместимых с политикой Content Security Policy. Если требуется доступ к DOM-элементам Tilda, дожидайтесь полной загрузки страницы или используйте window.Tilda, если библиотека предоставляет интерфейс.

Проблемы с отображением HTML кода на опубликованной странице

Если HTML-код не отображается на опубликованной странице Tilda, в первую очередь проверь, добавлен ли он в блок «HTML-код» (T123 или T230), а не в стандартный текстовый блок. Вставка кода в неподходящий блок приводит к тому, что он интерпретируется как обычный текст.

Убедись, что в коде отсутствуют синтаксические ошибки. Даже одна незакрытая кавычка или тег может нарушить работу всей страницы. Для проверки можно использовать валидатор, например, https://validator.w3.org.

Некоторые скрипты и фреймы блокируются Tilda на этапе публикации из соображений безопасности. Например, загрузка внешних скриптов через HTTP вместо HTTPS будет автоматически удалена. Также запрещены inline-скрипты с небезопасным содержимым.

Код, добавленный в блок, может конфликтовать с глобальными стилями Tilda. Это особенно актуально для классов и ID, уже используемых системой. Избегай переопределения системных классов. Лучше использовать уникальные имена, недоступные в стандартной верстке.

JavaScript-код, размещённый в блоке, может не срабатывать из-за отложенной загрузки DOM. Для решения используй конструкцию document.addEventListener('DOMContentLoaded', ...) или размести скрипт через «Настройки сайта» → «Дополнительно» → «HTML в <head> или перед </body>».

Если код содержит внешние библиотеки (например, jQuery), убедись, что они подключаются до использования. Подключение можно разместить в разделе «Настройки сайта» → «HTML-код на всех страницах».

После внесения изменений не забывай повторно публиковать страницу. Tilda не обновляет HTML автоматически при сохранении проекта без публикации.

Интеграция виджетов и сторонних сервисов через HTML вставки

Для добавления стороннего виджета на сайт в Tilda откройте блок T123 «HTML-код» или добавьте его через «+» → «Другие» → «HTML». Вставьте код, предоставленный сервисом, в поле редактирования блока.

Часто используемые виджеты: формы обратной связи (например, Jivo, CallbackHunter), онлайн-чаты (LiveChat, Tawk.to), карты (Google Maps, 2GIS), бронирование (Timepad, Yclients), платежные формы (ЮKassa, CloudPayments).

Для отслеживания ошибок используйте инструменты разработчика в браузере (F12) и консоль. Ошибки в консоли часто указывают на конфликты скриптов или блокировку сторонних ресурсов (например, политикой CORS).

Избегайте одновременной вставки нескольких виджетов, использующих одинаковые глобальные переменные или идентификаторы, чтобы исключить конфликты. Уточняйте в документации сервиса возможность интеграции с Tilda – многие виджеты имеют специальные инструкции для этой платформы.

Проверьте, что вставленный код работает на всех устройствах. Используйте предпросмотр и адаптивный режим. При необходимости – добавьте медиа-запросы вручную в HTML-блок, если сервис этого не делает автоматически.

Безопасность: чего избегать при добавлении HTML кода

Не вставляйте скрипты, полученные из ненадёжных источников. Даже короткий фрагмент JavaScript может содержать вредоносные инструкции, например, отправку данных формы третьим лицам или загрузку стороннего кода без вашего ведома.

Избегайте использования тегов <iframe> с внешними URL, особенно если источник не контролируется вами. Такие элементы могут подгружать фишинговые страницы или внедрять трекеры без вашего согласия.

Не используйте inline-обработчики событий, вроде onclick или onmouseover, если в них содержится выполнение непроверенного JavaScript. Это один из самых распространённых векторов XSS-атак.

Не подключайте сторонние библиотеки через HTTP – всегда используйте HTTPS. Несекурное подключение может быть перехвачено и модифицировано злоумышленником на этапе загрузки страницы.

Не вставляйте HTML-код, полученный от пользователей, напрямую на страницу без предварительной фильтрации и экранирования. Это может привести к выполнению вредоносных скриптов в браузере других пользователей.

Не храните чувствительные данные (например, ключи API) в открытом HTML или JavaScript-коде. Такие данные легко извлекаются через инструменты разработчика в браузере.

Регулярно проверяйте добавленные вручную фрагменты на наличие устаревших или уязвимых библиотек. Уязвимости могут быть обнаружены через сервисы типа Snyk или Retire.js.

Вопрос-ответ: