Как сделать продуктовый тур без программиста
Продуктовый тур показывает новому пользователю, где что находится: «здесь создают проект, здесь приглашают команду». В Clew вы кликаете по элементам прямо в своём интерфейсе, пишете по предложению на шаг и публикуете — без CSS-селекторов и без релиза.
- Время
- ● 20 минут
- Цена
- Тариф Free
- Формат
- Тултипы по шагам
Что такое продуктовый тур в Clew
Продуктовый тур (интерактивная обучалка, walkthrough) — цепочка подсказок, привязанных к элементам страницы. В Clew это формат Тултипы по шагам: каждый шаг указывает на элемент, у него есть заголовок и текст, а пользователь нажимает Далее, пока не дойдёт до Готово.
CSS-селекторы писать не нужно: кнопка Редактировать на сайте открывает редактор поверх вашего сайта, где Выбрать элемент позволяет просто кликнуть по элементу. Тур следит за переходами в одностраничных приложениях и показывает, на каком шаге люди уходят.
Где тур окупается
Первая сессия в SaaS
Три-пять шагов на главном экране — до первого действия, которое приносит пользу. Длинные туры пролистывают.
Новый или переделанный раздел
Пользователь открывает изменившийся экран — короткий тур на этом URL объясняет, что куда переехало.
Сложные формы
Настройки, интеграции, отчёты с фильтрами: подсказка к каждому неочевидному полю экономит обращения в поддержку.
Где люди останавливаются
Воронка показывает, сколько человек увидели каждый шаг. Большой отвал на шаге обычно говорит о непонятном экране, а не о плохой подсказке.
Как сделать продуктовый тур за 5 шагов
- Шаг 01
Скопируйте код Clew
Зарегистрируйтесь бесплатно или войдите, добавьте сайт и откройте Админка → Обзор. Нажмите на строку в карточке «Виджет пока не подаёт сигналов.» — она скопируется уже с ключом вашего сайта вместо заглушки.
<!-- Clew: замените ВСТАВЬТЕ_КЛЮЧ_САЙТА на ключ сайта из админки > Обзор --> <script src="https://tryclew.ru/widget/ВСТАВЬТЕ_КЛЮЧ_САЙТА.js" async></script>
Шаг 1 · схема интерфейса - Шаг 02
Один раз поставьте строку на сайт
Вставьте код там, где вы управляете сайтом. Каждая инструкция занимает 5–10 минут, и повторять её не придётся: всё остальное делается в Clew.
Шаг 2 · схема интерфейса - Шаг 03
Соберите тур поверх своей страницы
В Clew откройте Сценарии → + Новый сценарий, оставьте Формат — Тултипы по шагам и нажмите Редактировать на сайте. На своей странице нажмите Выбрать элемент, кликните по элементу для первого шага и напишите заголовок и одно-два предложения. Повторите для 3–5 шагов — предпросмотр обновляется на лету.
Шаг 3 · схема интерфейса - Шаг 04
Укажите, где, когда и кому показывать
В том же редакторе заполните Где показывать (URL страницы), Когда показывать, Таргетинг аудитории и Частота. Настройки примера выше:
Настройка Значение Формат Тултипы по шагам Где показывать (URL страницы) Раздел по префиксу /personalКогда показывать Сразу при загрузке Таргетинг аудитории Без правил — все, кто открыл страницу Частота Один раз на посетителя 
Шаг 4 · схема интерфейса - Шаг 05
Опубликуйте и проверьте на сайте
Поставьте Статус — Опубликован и сохраните. Откройте страницу в режиме инкогнито: Clew помнит, кто уже видел показ «один раз», поэтому в обычном окне его может не быть. Показы, прохождения и отвалы появятся в статистике тура.
Шаг 5 · схема интерфейса
Пошагово: продуктовый тур на вашей платформе
Выберите платформу, на которой сделан сайт или приложение. В каждой инструкции — шаги установки, разобранный пример с готовыми настройками и подводные камни этой платформы.
Это бесплатно?
Бесплатно на тарифе Free — без карты и без срока: один сайт и до 3 опубликованных туров или подсказок. Правила аудитории и A/B-тесты — в тарифе Pro.
Вопросы и ответы
Продуктовый тур в Clew бесплатный?
Да. Туры и подсказки есть на тарифе Free: один сайт, до 3 опубликованных, без карты и без срока. Правила аудитории и A/B-тесты — в тарифе Pro.
Что будет, когда разработчики изменят страницу?
Если элемент пропадёт, вкладка Проблемы покажет шаг, который его не находит. Попросите разработчиков добавить ключевым элементам атрибут data-tour: селекторы вида [data-tour="create"] переживают редизайн.
Сколько шагов должно быть в туре?
Три-пять. Покажите путь до первого результата, а не каждую кнопку. Остальное — в подсказки на своих экранах или в чеклист.
Работает ли в приложениях на React, Vue или Next.js?
Да. Виджет отслеживает переходы без перезагрузки, поэтому тур, привязанный к /dashboard, запустится, когда пользователь туда перейдёт.