Справочный центр / Встраивание виджета

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

Кратко

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

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

РольКопирование кодаУправление виджетом
Администратордада
Руководительдада
Операторнетнет
Сотрудник клиентанетнет

Для установки кода на сайт нужен доступ к 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> на каждой странице, где должен отображаться виджет.

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

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

<!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_abc123def456'});
  </script>
</body>
</html>

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

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

<div id="tehprof-support-form"></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_abc123def456',target:'#tehprof-support-form'});
</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_abc123def456',mode:'manual'});
  document.getElementById('tehprof-support-btn').addEventListener('click',function(){tpw('open')});
</script>

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

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

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

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

Rate limiting

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

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

Настройка

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

WordPress:

Tilda:

Bitrix (1C-Bitrix):

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

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

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

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

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

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

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

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

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

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

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

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

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

Цвет кнопки и текст подписи настраиваются в платформе. Дополнительная кастомизация CSS доступна через переопределение стилей.

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

Да, виджет адаптивен и корректно отображается на мобильных устройствах. Форма занимает полный экран на маленьких экранах.

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

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

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

Не нашли ответ? Найдите другую статью или напишите в поддержку.