Как добавить чеклист онбординга в приложении на Lovable без программиста

Пример: чеклист онбординга в приложении на Lovable

Как добавить чеклист онбординга в приложении на Lovable: пошагово

1. Шаг 01

   Скопируйте код Clew

   Зарегистрируйтесь бесплатно или войдите, добавьте сайт и откройте Админка → Обзор. Нажмите на строку в карточке «Виджет пока не подаёт сигналов.» — она скопируется уже с ключом вашего сайта вместо заглушки.

   <!-- Clew: замените ВСТАВЬТЕ_КЛЮЧ_САЙТА на ключ сайта из админки > Обзор -->
   <script src="https://tryclew.ru/widget/ВСТАВЬТЕ_КЛЮЧ_САЙТА.js" async></script>

   Копировать

   

2. Шаг 02

   Откройте чат проекта в Lovable

   Откройте проект в Lovable. Чат правит код напрямую — убедитесь, что вы в основной версии, которую публикуете, а не в старом ремиксе.

   

3. Шаг 03

   Отправьте промпт со своим ключом

   Скопируйте промпт, замените ВСТАВЬТЕ_КЛЮЧ_САЙТА на свой ключ и отправьте. Кроме тега, он просит то, что нужно из кода для формата «чеклист онбординга».

   Добавь в это приложение виджет онбординга Clew.
   
   Вставь этот тег один раз, чтобы он загружался на каждой странице, в том числе после переходов без перезагрузки:
   <script src="https://tryclew.ru/widget/ВСТАВЬТЕ_КЛЮЧ_САЙТА.js" async></script>
   
   Это проект Lovable (React + Vite): вставь тег в index.html прямо перед </head>.
   
   Когда загружен вошедший пользователь и когда эти значения меняются, вызывай Clew.identify() с несколькими неперсональными свойствами в виде строк — например { plan: "trial", role: "owner", onboarded: "false" }. Если виджет мог ещё не загрузиться, сначала объяви заглушку очереди: window.TutorKit = window.TutorKit || { q: [], identify: function (p) { this.q.push(["identify", p]); } }; и вызывай window.TutorKit.identify(...). Никогда не передавай имена, email и другие персональные данные.
   
   Правила:
   - Используй URL скрипта ровно как указано. Не скачивай его, не собирай в бандл и не ставь npm-пакет.
   - Если в проекте задан Content-Security-Policy, разреши https://tryclew.ru в script-src и connect-src.
   - Больше ничего не меняй и покажи дифф.

   Копировать

   

4. Шаг 04

   Проверьте изменения и опубликуйте

   Откройте код: ожидайте index.html с одной добавленной строкой и небольшие добавления из промпта. Затем нажмите Publish — виджет работает только в опубликованном приложении.

   

5. Шаг 05

   Напишите пункты чеклиста в Clew

   В Clew откройте Сценарии → + Новый сценарий и выберите Чеклист онбординга. Заполните Заголовок чеклиста и добавьте 3–5 пунктов в Пункты чеклиста: название-действие, одну строку пояснения и в Адрес ссылки страницу, где это делается. Селекторы не нужны.

   

6. Шаг 06

   Укажите, где, когда и кому показывать

   В том же редакторе заполните Где показывать (URL страницы), Когда показывать, Таргетинг аудитории и Частота. Настройки примера выше:

   Настройка	Значение
   Формат	Чеклист онбординга
   Где показывать (URL страницы)	Раздел по префиксу /dashboard
   Когда показывать	Сразу при загрузке
   Таргетинг аудитории	Свойство onboarded не равно true
   Частота	Один раз на посетителя

   

7. Шаг 07

   Опубликуйте и проверьте на сайте

   Поставьте Статус — Опубликован и сохраните. Откройте страницу в режиме инкогнито: Clew помнит, кто уже видел показ «один раз», поэтому в обычном окне его может не быть. Показы, прохождения и отвалы появятся в статистике тура.

   

Подводные камни: чеклист онбординга в приложении на Lovable