Установка виджета

Для кого

Администраторы TehProf Support и веб-разработчики, которые хотят встроить виджет обращения в поддержку на сайт, в приложение или в портал компании.

Что вы получите

Один из трёх вариантов встройки: форму в конкретном месте страницы, плавающий виджет на всех страницах или вашу собственную кнопку, которая открывает модальное окно поддержки. Обращение автоматически создаст тикет в TehProf Support.

Предварительные требования

• Роль администратора в TehProf Support
• Доступ к HTML-коду вашего сайта (для вставки скрипта виджета)
• Сайт, работающий по HTTPS (рекомендуется, но не обязательно)

Пошаговая инструкция

Шаг 1: Переход к установке виджета

Откройте TehProf Support и перейдите в "Настройки" -> "Интеграции" -> "Виджет".

В правой шторке отображаются готовые виджеты, краткое описание способов встройки и ссылки на REST API / MCP для разработчиков. API и MCP не используют ключ виджета: для них создаётся отдельный API-ключ.

Вы можете создать несколько виджетов для разных сайтов или разных разделов одного сайта. Например, отдельный виджет для основного сайта и отдельный -- для личного кабинета.

Шаг 2: Создание нового виджета

Нажмите "Создать виджет". Заполните основные параметры:

• Название -- внутреннее имя виджета, которое видите только вы (например, "Виджет для example.kz" или "Виджет лендинга").
• Тип виджета:
• Форма внутри страницы -- код вставляется в конкретный блок страницы.
• Виджет на всех страницах -- код ставится в общий шаблон сайта или приложения и показывает кнопку в углу.
• Своя кнопка -- вы оставляете свой дизайн кнопки, а код открывает окно поддержки через tpw('open').
• Разрешённые домены -- укажите домены, на которых виджет будет работать. Это защита от несанкционированного использования вашего виджета на чужих сайтах. Примеры:
• example.kz -- основной домен и его поддомены.
• other-site.kz -- ещё один независимый домен.

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

• Язык по умолчанию -- язык интерфейса виджета (русский, казахский, английский). Если на сайте есть переключатель языков, виджет может подстраиваться автоматически.

Шаг 3: Настройка внешнего вида

После создания виджета перейдите на вкладку "Внешний вид":

• Основной цвет -- цвет кнопки виджета и заголовка всплывающего окна. Введите hex-код (например, #2196F3 для синего) или выберите из палитры. Рекомендуется использовать основной цвет бренда вашей компании.
• Текст кнопки -- надпись на плавающей кнопке (например, "Поддержка", "Написать нам", "Помощь"). Если оставить пустым, отобразится только иконка.
• Позиция кнопки -- расположение на экране: правый нижний угол (по умолчанию), левый нижний угол. На мобильных устройствах кнопка адаптируется автоматически.
• Иконка кнопки -- выберите из предустановленных вариантов (чат, конверт, вопрос) или загрузите собственную (SVG, 24x24 px).
• Заголовок окна -- текст в верхней части формы/чата (например, "Техническая поддержка", "Как мы можем помочь?").
• Подзаголовок -- дополнительный текст под заголовком (например, "Обычно отвечаем в течение 30 минут").

Справа от настроек отображается предварительный просмотр виджета с вашими параметрами. Проверьте, что виджет выглядит корректно, прежде чем сохранять.

Шаг 4: Настройка полей формы

Если вы выбрали тип "Форма обращения", настройте поля:

Обязательные поля (нельзя отключить):

• Email -- для связи с клиентом и отправки уведомлений.
• Описание -- текст обращения.

Опциональные поля (можно включить/отключить):

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

Для каждого поля можно настроить:

• Обязательность (отмечено звёздочкой).
• Текст placeholder (подсказка внутри поля).
• Порядок отображения (перетаскивание).

Рекомендация: не перегружайте форму полями. Для простых сценариев достаточно 3--4 полей: имя, email, описание, вложения. Чем проще форма, тем больше клиентов её заполнят.

Шаг 5: Копирование кода для вставки

После сохранения всех настроек мастер покажет JavaScript-код виджета. Для плавающего виджета он выглядит примерно так:

<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>

Скопируйте этот код целиком, нажав кнопку "Копировать".

Важные замечания:

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

Шаг 6: Вставка кода на сайт

Вставьте скопированный код в HTML-код вашего сайта непосредственно перед закрывающим тегом </body>.

Примеры для разных CMS и платформ:

Для чистого HTML используйте код из шага 5 без изменений: загрузчик должен сопровождаться вызовом tpw('init', {key:'WIDGET_KEY'}). Атрибут data-widget-id сам по себе виджет не инициализирует.

WordPress: установите плагин "Insert Headers and Footers" (или аналог) и вставьте код в секцию "Footer Scripts".

Bitrix24 (сайты): в настройках сайта найдите раздел "Дополнительный HTML-код" и вставьте код в блок "Перед </body>".

Если у вас нет доступа к коду сайта, передайте скопированный код веб-разработчику с пояснением: "Вставить перед </body> на всех страницах сайта."

Шаг 7: Тестирование виджета

После вставки кода проведите тестирование:

• Откройте ваш сайт в браузере. В правом нижнем углу (или в другой заданной позиции) должна появиться кнопка виджета.

• Нажмите на кнопку. Должно открыться окно формы обращения или чата.

• Заполните форму тестовыми данными:
• Имя: Тестовый Клиент.
• Email: test@example.com.
• Описание: "Тестовое обращение через виджет на сайте."
• Прикрепите тестовый файл (например, скриншот).

• Нажмите "Отправить". Должно появиться подтверждение с номером тикета.

• Перейдите в TehProf Support -> "Тикеты". Убедитесь, что тикет создан, источник указан как "Виджет", данные соответствуют заполненным.

• Как оператор, напишите ответ на тикет. Клиент должен получить уведомление по email.

Дополнительные проверки:

• Откройте сайт на мобильном устройстве -- виджет должен корректно отображаться и быть удобным для использования.
• Проверьте в другом браузере (Chrome, Firefox, Safari).
• Убедитесь, что виджет не перекрывает важные элементы сайта (меню, кнопки, формы).

Если виджет не отображается:

• Проверьте, что домен сайта добавлен в список разрешённых доменов (шаг 2).
• Откройте консоль разработчика (F12) и проверьте наличие ошибок JavaScript.
• Убедитесь, что код вставлен корректно и не обрезан.

Что дальше

• Настройте автоматизацию для маршрутизации виджет-тикетов: "Настройка автоматизации"
• Подключите WhatsApp и Telegram: руководства по настройке каналов
• Создайте быстрые ответы для типовых обращений с сайта
• Отслеживайте конверсию виджета в разделе "Аналитика" -- сколько посетителей открывают виджет и отправляют обращение
• Рассмотрите A/B-тестирование: попробуйте разные цвета, тексты и позиции кнопки