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

Для кого

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

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

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

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

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

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

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

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

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

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

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

Нажмите Создать виджет. Мастер проходит шаги Способ, Оформление, Параметры и Установка:

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

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

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

Шаг 3: Настройка оформления

На шаге Оформление задаются:

• Цвет -- цвет кнопки и акцентов виджета. Рекомендуется использовать основной цвет бренда вашей компании.
• Текст кнопки -- надпись на кнопке (по умолчанию «Написать в поддержку»).
• Позиция -- Справа внизу или Слева внизу.
• Приветствие -- текст в окне виджета (например, «Чем можем помочь?»).

Шаг 4: Поля формы

Набор полей формы фиксированный, отдельно поля не настраиваются:

• Имя -- обязательно.
• Email или Телефон -- нужно указать хотя бы одно из двух.
• Тема -- необязательно.
• Услуга -- выбор из списка; в параметрах виджета можно ограничить список услуг.
• Приоритет -- выбор срочности клиентом.
• Описание -- обязательно, не короче 10 символов.
• Вложения -- можно прикрепить изображения, документы, архивы, аудио и видео.

Шаг 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: Тестирование виджета

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

1. Откройте ваш сайт в браузере. В правом нижнем углу (или в другой заданной позиции) должна появиться кнопка виджета.
2. Нажмите на кнопку. Должно открыться окно формы обращения или чата.
3. Заполните форму тестовыми данными:
   • Имя: Тестовый Клиент.
   • Email: test@example.com.
   • Описание: "Тестовое обращение через виджет на сайте."
   • Прикрепите тестовый файл (например, скриншот).
4. Нажмите «Отправить». Должно появиться подтверждение «Заявка создана!» с номером заявки.
5. Перейдите в TehProf.kz Support -> «Заявки». Убедитесь, что заявка создана, источник указан как «Виджет», данные соответствуют заполненным.
6. Как оператор, напишите ответ на заявку и убедитесь, что он дошёл до клиента.

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

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

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

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

Что дальше

• Настройте автоматизацию для маршрутизации виджет-тикетов: «Настройка автоматизации»
• Подключите WhatsApp и Telegram: руководства по настройке каналов
• Создайте быстрые ответы для типовых обращений с сайта
• Следите за числом заявок с каждого виджета в его карточке в списке виджетов
• Что выбрать — форму, чат или виджет, и какие поля оставить: Форма обратной связи или чат на сайте