ДелоВход.ру

Как встроить виджет на сайт

Виджеты ДелоВход — лид-формы, квизы, видео-виджет, онлайн-чат — встраиваются на любой сайт одним тегом <script>. Ниже — пошаговые инструкции для Tilda, Creatium и Bitrix, а также универсальный способ для произвольного сайта.

1. Как это работает

Скрипт embed.js грузится асинхронно с нашего домена и сам отрисовывает виджет внутри iframe. Это значит:

  • стили вашего сайта не конфликтуют со стилями виджета;
  • скрипт не блокирует загрузку страницы (async);
  • UTM-метки из URL автоматически попадают в лид — настраивать ничего не нужно.

Сниппет для встройки лежит в кабинете на вкладке «Вставка»каждого виджета. Есть два формата:

  • data-widget-id — встраивает один конкретный виджет.
  • data-embed-token — общий код проекта: вставляется один раз, подгружает все активные виджеты проекта (попап, кнопка-триггер, чат и т.д.).

2. Универсальный способ (любой сайт)

Если у сайта есть возможность вставить произвольный HTML-код в <head>или перед закрывающим тегом </body> — этого достаточно. Скопируйте нужный сниппет из кабинета и вставьте его на сайт.

Все виджеты проекта (попап / кнопка-триггер / онлайн-чат):

<script src="https://delovhod.ru/embed.js" data-embed-token="EMBED_TOKEN" async></script>

Один конкретный виджет (лид-форма, квиз, видео):

<script src="https://delovhod.ru/embed.js" data-widget-id="WIDGET_ID" async></script>

Видео-виджет использует отдельный лёгкий бандл — он не зависит от общегоembed.js:

<script src="https://delovhod.ru/embed-video.js" data-widget-id="WIDGET_ID" async></script>

Важно про режим «inline» (встроенный блок). Inline-виджет отрисовывается на месте <script>-тега, поэтому такой сниппет нужно класть именно в то место страницы, где должен появиться виджет — а не в общий <head>. Попап и кнопка-триггер работают из любого места.

3. Tilda

В Tilda есть три способа добавить наш скрипт.

А. Один виджет на одной странице (рекомендуется для inline-форм и квизов):

  1. Откройте нужную страницу в редакторе.
  2. В правом меню добавьте блок T123 «HTML» (категория «Другое»).
  3. Перетащите блок в место, где должен быть виджет.
  4. Нажмите «Контент» → вставьте сниппет с data-widget-id → «Сохранить».
  5. Опубликуйте страницу.

Б. Один виджет — на одной странице, но в <head>(для попапов и кнопок-триггеров):

  1. В редакторе страницы нажмите «Настройки страницы».
  2. Вкладка «Ещё» → поле «HTML-код для вставки внутрь HEAD».
  3. Вставьте сниппет → «Сохранить» → опубликуйте страницу.

В. Все виджеты проекта на всём сайте (один код везде, самый удобный вариант):

  1. В Tilda откройте «Настройки сайта».
  2. Раздел «Аналитика» → блок «HTML-код для вставки внутрь HEAD всех страниц».
  3. Вставьте сниппет с data-embed-token → «Сохранить».
  4. Опубликуйте сайт (Tilda пересобирает шаблон).

4. Creatium

  1. Откройте «Настройки сайта» в редакторе.
  2. Найдите раздел «HEAD / BODY» (или «Дополнительный код»). Вставьте сниппет в поле BODY — он загрузится перед закрывающим</body>. Поле HEAD тоже подходит, скрипт сам ждёт DOM.
  3. Сохраните и опубликуйте сайт.

Для inline-режима используйте блок «Произвольный HTML»(в библиотеке блоков Creatium): перетащите его в нужное место страницы и вставьте сниппет с data-widget-id.

5. Bitrix

Есть два разных продукта Битрикс — у каждого свой способ.

А. 1С-Битрикс (CMS «Управление сайтом»):

  1. Через шаблон сайта — для всех страниц сразу. В административной панели: «Настройки» → «Сайты» → «Шаблоны сайтов» → выберите активный шаблон → откройте header.php (или footer.php) → вставьте сниппет перед </head> или </body> → сохраните. Альтернативно — через файловый менеджер в local/templates/<шаблон>/.
  2. Через компонент HTML/JavaScript — на одной странице. В визуальном редакторе страницы поместите курсор в нужное место → «Компоненты» → «Служебные» → «Включаемая область типа HTML» или«HTML/JavaScript» → вставьте сниппет в поле «Код» → сохраните.

Б. Битрикс24.Сайты (онлайн-конструктор):

  1. Откройте сайт в редакторе Битрикс24.
  2. «Настройки сайта» → раздел «Аналитика и счётчики» (или «Свой код»).
  3. Вставьте сниппет в поле «Код перед закрывающим </body>» (если такого поля нет — подойдёт и поле <head>).
  4. Сохраните и опубликуйте сайт.
  5. Для inline-формы используйте блок «Произвольный HTML» внутри нужной секции.

6. Частые вопросы

Виджет не появляется после вставки. Откройте сайт, нажмите F12 → вкладка «Console». Если есть ошибка про embed.js — проверьте, что сниппет скопирован целиком (включая async) и чтоdata-widget-id / data-embed-token не пустые. Если ошибок нет, но виджет с режимом «попап» не открывается — значит ещё не сработал триггер (вход на страницу, скролл, exit-intent — настраивается в кабинете).

Можно ли вставить несколько виджетов сразу. Да. Лучше всего — один сниппет с data-embed-token для всего проекта: виджеты автоматически не конфликтуют по z-index и не открывают два попапа одновременно. Если используете несколько data-widget-id, тоже можно — они координируются между собой автоматически.

Сайт на HTTPS — будет ли работать. Да, скрипт грузится сhttps://delovhod.ru, mixed-content не возникает. Виджет работает только на HTTPS-сайтах (включая Tilda, Creatium и Битрикс24.Сайты — у всех HTTPS по умолчанию).

Лимит по доменам. На вкладке «Вставка» в кабинете можно указать список доменов, на которых виджет разрешено показывать — это защита от копирования сниппета на чужие сайты. Если поле пустое, виджет работает на любом домене.

UTM-метки. Скрипт автоматически считывает utm_source,utm_medium, utm_campaign, utm_term, utm_contentиз адреса страницы и сохраняет их вместе с лидом. Дополнительно настраивать ничего не надо.

Не нашёл свою CMS. Любой сайт, в котором можно вставить произвольный HTML-код в <head> или перед </body> — подходит. Если возникнут сложности — напишите в support@delovhod.ru, поможем со встройкой.

Последнее обновление: 6/15/2026