Встраивание виджета

Кратко

После создания и настройки виджета его нужно встроить в сайт, приложение или портал. Код зависит от выбранного сценария: форма внутри страницы, плавающий виджет на всех страницах или своя кнопка, которая открывает модальное окно поддержки. Виджет работает на доменах из списка разрешённых (если список задан), не требует авторизации от посетителей и создаёт заявки анонимно (с указанием контактных данных в форме).

Кто имеет доступ

Для установки кода на сайт нужен доступ к HTML-коду сайта (веб-разработчик или администратор сайта).

Где найти

Настройки -- Интеграции -- Виджет -- выберите готовый виджет или нажмите "Создать виджет". Код с ключом показывается в мастере один раз -- сразу после создания. Для уже созданного виджета код с новым ключом можно получить кнопкой "Перевыпустить ключ" в окне редактирования.

Как работает

Код встраивания

Код виджета состоит из загрузчика widget/loader.js и инициализации с ключом виджета. Это не REST API-ключ: API и MCP подключаются отдельно в соответствующих интеграциях.

<script>
  (function(w,d,s,o,f,js,fjs){w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
  js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];js.async=1;js.src=f;
  fjs.parentNode.insertBefore(js,fjs);})(window,document,'script','tpw','https://support.tehprof.kz/widget/loader.js');
  tpw('init',{key:'WIDGET_KEY'});
</script>

Код необходимо вставить перед закрывающим тегом </body> на каждой странице, где должен отображаться виджет.

Процесс установки

1. Откройте карточку "Виджет" в настройках интеграций
2. Нажмите "Создать виджет" или отредактируйте готовый виджет
3. Выберите способ встройки в мастере
4. Нажмите "Копировать" -- код скопируется в буфер обмена
5. Откройте HTML-код вашего сайта или приложения
6. Вставьте код в место, соответствующее выбранному сценарию
7. Сохраните и опубликуйте изменения
8. Откройте страницу -- виджет должен появиться

Пример установки

<!DOCTYPE html>
<html>
<head>
  <title>Мой сайт</title>
</head>
<body>
  <!-- Содержимое страницы -->
  <h1>Добро пожаловать</h1>
  <p>Контент сайта...</p>
  <!-- Виджет поддержки (вставить перед </body>) -->
  <script>
    (function(w,d,s,o,f,js,fjs){w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];js.async=1;js.src=f;
    fjs.parentNode.insertBefore(js,fjs);})(window,document,'script','tpw','https://support.tehprof.kz/widget/loader.js');
    tpw('init',{key:'wgt_XXXXXXXXXXXX'});
  </script>
</body>
</html>

Для формы внутри страницы

Если выбран сценарий "Форма внутри страницы", добавьте HTML-контейнер в то место страницы, где должна отображаться форма:

<div id="tehprof-support"></div>
<script>
  (function(w,d,s,o,f,js,fjs){w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
  js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];js.async=1;js.src=f;
  fjs.parentNode.insertBefore(js,fjs);})(window,document,'script','tpw','https://support.tehprof.kz/widget/loader.js');
  tpw('init',{key:'wgt_XXXXXXXXXXXX',target:'#tehprof-support'});
</script>

Если форма встраивается в контактную страницу, пригодятся советы из статьи как сделать форму обратной связи на сайте.

Для своей кнопки

Если выбран сценарий "Своя кнопка", оставьте кнопку в вашем дизайне и повесьте открытие окна поддержки:

<button type="button" id="tehprof-support-btn">Написать в поддержку</button>
<script>
  (function(w,d,s,o,f,js,fjs){w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
  js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];js.async=1;js.src=f;
  fjs.parentNode.insertBefore(js,fjs);})(window,document,'script','tpw','https://support.tehprof.kz/widget/loader.js');
  tpw('init',{key:'wgt_XXXXXXXXXXXX',mode:'manual'});
  document.getElementById('tehprof-support-btn').addEventListener('click',function(){tpw('open')});
</script>

Анонимное создание заявок

Виджет не требует авторизации от посетителя сайта. Клиент заполняет контактные данные (имя, email, телефон) в форме виджета. Заявка создаётся с этими данными без привязки к учётной записи Bitrix24.

CORS и безопасность

Сервер проверяет источник запроса по списку доменов виджета:

• Домены настраиваются при создании или редактировании виджета
• Запрос с неразрешённого домена получает отказ 403; это прикладная проверка сервера, а не доверие к одному CORS-заголовку
• Запись example.kz разрешает сам домен и его поддомены; префикс *. вводить не нужно
• Для локальной разработки добавьте localhost в список доменов
• Если список доменов пуст, ограничения по доменам нет

Rate limiting

Для защиты от злоупотреблений действует почасовой лимит по IP-адресу и типу запроса:

• Не более 60 загрузок конфигурации в час с одного IP-адреса
• Не более 10 отправок формы в час с одного IP-адреса
• При превышении лимита форма показывает сообщение о временной недоступности

После входа из анонимного виджета загрузчик получает только одноразовый код обмена и открывает клиентский кабинет без помещения действующего токена в URL родительской страницы. Число непрочитанных ответов отображается бейджем на кнопке виджета.

Общий обзор шагов установки без привязки к конкретному сайту — в статье установка виджета.

Настройка

Установка на конструкторах сайтов

WordPress:

1. Откройте Внешний вид -- Редактор темы -- footer.php
2. Вставьте код перед </body>
3. Или используйте плагин "Insert Headers and Footers" для более простой установки

Tilda:

1. Настройки сайта -- Ещё -- HTML код для вставки внутрь HEAD или перед </BODY>
2. Вставьте код в поле "Перед </BODY>"
3. Опубликуйте сайт

Bitrix (1C-Bitrix):

1. Откройте шаблон сайта
2. Вставьте код в footer.php перед </body>
3. Сбросьте кэш

Установка через Google Tag Manager

1. Создайте новый тег типа "Пользовательский HTML"
2. Вставьте код виджета
3. Триггер: "Все страницы"
4. Опубликуйте контейнер

Проверка установки

После установки откройте сайт и убедитесь:

1. Виджет отображается (кнопка FAB, кнопка на странице или встроенная форма)
2. При нажатии открывается окно поддержки с формой обращения
3. Форма успешно отправляется (тестовая заявка появляется в платформе)
4. После отправки появляется сообщение "Заявка создана!" с номером заявки

Решение проблем

Виджет не отображается:

• Проверьте, что домен сайта добавлен в разрешённые домены виджета (или что список пуст)
• Откройте консоль браузера (F12) и проверьте наличие ошибок
• Убедитесь, что скрипт загружается (вкладка Network в DevTools)
• Проверьте, что виджет включён (переключатель на карточке виджета) и что включён способ установки "На сайте (код)"

Похожий чек-лист для формы обратной связи, которая не работает, — в статье форма обратной связи не работает: что проверить.

Ошибка 403 или CORS в консоли:

• Домен сайта не добавлен в разрешённые домены виджета
• Добавьте основной домен: поддомены, включая www, он разрешит автоматически

Виджет загружается медленно:

• Скрипт загружается асинхронно и не блокирует рендеринг страницы
• Первая загрузка может быть медленнее (кэширование)

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

Нужно ли обновлять код на сайте при изменении настроек виджета?

Нет, настройки (цвет, позиция, тексты, язык, услуги) загружаются с сервера. Код на сайте нужно заменить только при смене способа показа или после перевыпуска ключа.

Влияет ли виджет на скорость загрузки сайта?

Минимально. Скрипт загружается асинхронно и не блокирует отображение страницы. Размер загрузчика -- около 11 КБ.

Можно ли стилизовать виджет под дизайн сайта?

Цвет, позиция, текст кнопки и приветствие настраиваются в платформе. Окно поддержки открывается во фрейме, поэтому стили сайта на него не действуют. Если нужен свой внешний вид кнопки -- используйте способ "Своя кнопка".

Виджет работает на мобильных устройствах?

Да, виджет работает на мобильных устройствах.

Можно ли показывать виджет только авторизованным пользователям?

Платформа не управляет отображением на стороне сайта. Загружайте скрипт как обычно, но вызывайте tpw('init', {key:'...'}) только после собственной проверки авторизации пользователя.

Связанные статьи

• Создание виджета -- первичное создание
• Настройка виджета -- параметры виджета
• Создание заявки (клиент) -- процесс подачи заявки
• Входящие вебхуки -- альтернативный способ создания заявок с внешних систем