Как установить виджет онбординга на сайт: техническая инструкция
Команда userStream
Обновлено 22 июня 2026 г.
Установка виджета — единственный шаг который требует разработчика, и он занимает считанные минуты. Разбираем технические детали: от тега script до особенностей SPA-приложений.
Оглавление
Зачем нужен виджет и что он делает технически
Виджет — это небольшой JavaScript-файл который подключается к сайту один раз и дальше отвечает за отображение всего контента онбординга: туров, подсказок, чеклистов, баннеров, опросов и ленты обновлений. После установки виджета весь дальнейший контент создаётся и публикуется из личного кабинета, без необходимости трогать код продукта повторно.
Это ключевое архитектурное решение которое определяет всю последующую работу с инструментом: разработчик тратит несколько минут один раз, а дальше product manager, маркетолог или CS работают самостоятельно.
Способ 1: прямая установка через тег script
Самый простой и быстрый способ — добавить тег script в HTML-код сайта, обычно перед закрывающим тегом </body> или в <head>.
html
<!-- userStream Widget -->
<script src="https://userstream.ru/widget.js" data-api-key="ВАШ_API_КЛЮЧ" data-api-url="https://api.userstream.ru"></script>API-ключ для конкретного проекта находится в личном кабинете: Настройки проекта → Общее. Каждый проект (если у вас несколько окружений — например, продакшен и тестовое) имеет свой уникальный ключ.
Этот способ подходит когда у вас есть прямой доступ к редактированию HTML-шаблона сайта или к компоненту в коде фронтенда (для SPA-приложений — об этом отдельно ниже).
Способ 2: установка через Google Tag Manager
Если у разработчиков нет быстрого доступа к продакшен-коду, или скрипт должен подключаться по условию (например, только для авторизованных пользователей, только на определённых страницах) — установка через GTM решает эту проблему без прямого изменения кодовой базы.
Процесс: создаётся новый тег в GTM с типом "Произвольный HTML", внутрь вставляется тот же сниппет виджета, настраивается триггер срабатывания (например, "All Pages" для показа везде, или более специфичное условие если нужно ограничить).
Этот способ особенно удобен для команд где маркетинг или продукт имеют доступ к GTM, но не к репозиторию кода — установка происходит без участия разработчика вообще.
Способ 3: особенности для одностраничных приложений (SPA)
Современные продукты часто построены как одностраничные приложения — React, Vue, Angular, Next.js с client-side рендерингом. Для них установка виджета имеет важные нюансы.
Виджет поддерживает SPA из коробки без дополнительной настройки: он автоматически отслеживает изменения маршрута (когда пользователь переходит между "страницами" внутри приложения без полной перезагрузки) и обновляет условия показа контента соответственно — например, если тур настроен на конкретный URL-путь, он сработает корректно даже если переход на этот путь произошёл через client-side роутинг, а не через обычную загрузку страницы.
Для React, Vue и Angular приложений тег script устанавливается так же, как и для обычного сайта — обычно в корневой HTML-шаблон (index.html для большинства SPA-сборок), а не в каждый отдельный компонент.
Шаг: проверьте что виджет загружается
После установки скрипта — важно убедиться что он действительно загружается и работает. В разделе "Настройки → Установка" есть встроенная проверка которая показывает статус подключения виджета на сайте.
Дополнительный способ проверки — открыть консоль разработчика в браузере (F12 → Console) на странице сайта и проверить наличие объекта window.userStream:
javascript
if (window.userStream) {
console.log("Виджет загружен");
} else {
console.log("Виджет не найден");
}Если виджет не загружается — типичные причины: неверный или отсутствующий data-api-key в теге script (в консоли появится соответствующее предупреждение), скрипт блокируется блокировщиком рекламы или Content Security Policy на стороне сайта, скрипт размещён в части кода которая не выполняется на нужных страницах (например, только в части SPA не относящейся к авторизованным маршрутам).
Шаг: настройте идентификацию пользователей
Установка виджета — это только первый технический шаг. Чтобы сегментация и персонализация контента работали, нужно дополнительно вызвать метод идентификации после того как пользователь авторизовался в вашем продукте.
javascript
userStream.identify("user-123", {
email: "user@example.com",
plan: "pro"
});Без этого вызова виджет всё равно работает и может показывать контент без сегментации (всем посетителям одинаково), но любая персонализация на основе ролей, тарифов или других атрибутов будет недоступна.
Что не требует повторного участия разработчика
После того как виджет установлен и идентификация настроена — весь следующий функционал управляется из личного кабинета без изменения кода: создание и редактирование туров, подсказок, чеклистов и баннеров, настройка условий показа и сегментов, публикация и снятие с публикации контента, настройка брендинга (цвета, шрифты под стиль продукта), просмотр аналитики.
Единственные ситуации когда снова потребуется участие разработчика — если нужно отправить специфическое программное событие в систему (через JavaScript API, для сложных поведенческих триггеров) или изменить сами атрибуты идентификации (если структура данных о пользователе в вашей системе изменилась).
Один скрипт — и дальше без разработчика
Подключите виджет userStream и начните создавать туры и подсказки самостоятельно.
Начать бесплатноЕсли статья откликнулась — отметьте реакцией: так мы понимаем, что для вас полезно, и куда двигаться дальше.
Читайте также
Как настроить онбординг для пользователей, которые переходят в B2B SaaS из привычных офлайн-инструментов (Excel, 1С, бу…
Ветвящиеся туры адаптируются под действия пользователя на trial, ускоряя активацию и снижая отток. Пошаговый гайд без к…
Узнайте, как комбинировать email и in-app сообщения для снижения оттока на trial: пошаговая стратегия гибридного онборд…