Как сделать продуктовый тур в приложении на Lovable без программиста
Интерактивная обучалка в приложении на Lovable примерно за двадцать минут: ставим одну строку, прокликиваем свой интерфейс в визуальном редакторе и публикуем тур, который стартует там, где он нужен новым пользователям.
- Время
- ● 20 минут
- Цена
- Тариф Free
- Кто делает
- Вы и чат Lovable
Пример: продуктовый тур в приложении на Lovable
Трекер привычек, собранный в Lovable, получает регистрации, но новички не создают привычку. На /dashboard тур из трёх шагов указывает на data-tour="create-button", счётчик серии и переключатель напоминаний.
Бесплатно на тарифе Free — без карты и без срока: один сайт и до 3 опубликованных туров или подсказок. Правила аудитории и A/B-тесты — в тарифе Pro.
Как сделать продуктовый тур в приложении на Lovable: пошагово
- Шаг 01
Скопируйте код Clew
Зарегистрируйтесь бесплатно или войдите, добавьте сайт и откройте Админка → Обзор. Нажмите на строку в карточке «Виджет пока не подаёт сигналов.» — она скопируется уже с ключом вашего сайта вместо заглушки.
<!-- Clew: замените ВСТАВЬТЕ_КЛЮЧ_САЙТА на ключ сайта из админки > Обзор --> <script src="https://tryclew.ru/widget/ВСТАВЬТЕ_КЛЮЧ_САЙТА.js" async></script>
Шаг 1 · схема интерфейса - Шаг 02
Откройте чат проекта в Lovable
Откройте проект в Lovable. Чат правит код напрямую — убедитесь, что вы в основной версии, которую публикуете, а не в старом ремиксе.
Шаг 2 · схема интерфейса - Шаг 03
Отправьте промпт со своим ключом
Скопируйте промпт, замените
ВСТАВЬТЕ_КЛЮЧ_САЙТАна свой ключ и отправьте. Кроме тега, он просит то, что нужно из кода для формата «продуктовый тур».Добавь в это приложение виджет онбординга Clew. Вставь этот тег один раз, чтобы он загружался на каждой странице, в том числе после переходов без перезагрузки: <script src="https://tryclew.ru/widget/ВСТАВЬТЕ_КЛЮЧ_САЙТА.js" async></script> Это проект Lovable (React + Vite): вставь тег в index.html прямо перед </head>. Также добавь стабильные атрибуты data-tour элементам, на которые будет указывать продуктовый тур: главной навигации, основной кнопке создания/добавления, главному фильтру или поиску и заголовку страницы — например data-tour="create-button". Не меняй их стили, тексты и поведение. Правила: - Используй URL скрипта ровно как указано. Не скачивай его, не собирай в бандл и не ставь npm-пакет. - Если в проекте задан Content-Security-Policy, разреши https://tryclew.ru в script-src и connect-src. - Больше ничего не меняй и покажи дифф.
Шаг 3 · схема интерфейса - Шаг 04
Проверьте изменения и опубликуйте
Откройте код: ожидайте
index.htmlс одной добавленной строкой и небольшие добавления из промпта. Затем нажмите Publish — виджет работает только в опубликованном приложении.
Шаг 4 · схема интерфейса - Шаг 05
Соберите тур поверх своей страницы
В Clew откройте Сценарии → + Новый сценарий, оставьте Формат — Тултипы по шагам и нажмите Редактировать на сайте. На своей странице нажмите Выбрать элемент, кликните по элементу для первого шага и напишите заголовок и одно-два предложения. Повторите для 3–5 шагов — предпросмотр обновляется на лету.
Шаг 5 · схема интерфейса - Шаг 06
Укажите, где, когда и кому показывать
В том же редакторе заполните Где показывать (URL страницы), Когда показывать, Таргетинг аудитории и Частота. Настройки примера выше:
Настройка Значение Формат Тултипы по шагам Где показывать (URL страницы) Раздел по префиксу /dashboardКогда показывать Сразу при загрузке Таргетинг аудитории Без правил — все, кто открыл страницу Частота Один раз на посетителя 
Шаг 6 · схема интерфейса - Шаг 07
Опубликуйте и проверьте на сайте
Поставьте Статус — Опубликован и сохраните. Откройте страницу в режиме инкогнито: Clew помнит, кто уже видел показ «один раз», поэтому в обычном окне его может не быть. Показы, прохождения и отвалы появятся в статистике тура.
Шаг 7 · схема интерфейса
Подводные камни: продуктовый тур в приложении на Lovable
Авторизация Supabase загружается после страницы
Приложения Lovable обычно авторизуют через Supabase, поэтому пользователь известен через мгновение после загрузки. Это нормально: Clew.identify() перепроверяет правила при каждом вызове, и продуктовый тур появится в этот момент.
Предпросмотр в редакторе — не опубликованное приложение
Собирайте и проверяйте продуктовый тур на опубликованном адресе или своём домене. Правила URL сравнивают пути, поэтому одни и те же настройки работают на обоих.
Сгенерированные классы меняются при каждой пересборке
В приложениях, собранных ИИ, часто утилитарные классы или хешированные CSS-модули. Селектор вида .bg-blue-600.px-4 сломается после следующего промпта. Поэтому промпт выше просит атрибуты data-tour: выбирайте эти элементы, и тур переживёт перегенерацию.
Вопросы и ответы
Тексты тура можно править без промптов в Lovable?
Да. Тур живёт в Clew; Lovable один раз добавил строку и атрибуты.
Следующие промпты в Lovable не удалят строку?
Обычно нет — она в index.html. Если после крупной перегенерации в «Обзоре» пропал статус «Виджет активен», отправьте промпт ещё раз.
Продуктовый тур бесплатный?
Да, туры есть на тарифе Free — до 3 опубликованных. Тариф Pro нужен только для правил аудитории, A/B-тестов и большего числа туров.
Почему не попросить ИИ сразу сделать тур?
Можно, но тогда каждая правка текста — это новый промпт, новый дифф и новый деплой, и никакой статистики. С Clew ИИ один раз добавляет строку и пару атрибутов, а сам тур за минуты правит любой человек в команде.