Как настроить онбординг пользователей с помощью Claude Code без программиста

Пример: онбординг пользователей с помощью Claude Code

Как настроить онбординг с помощью Claude Code: пошагово

1. Шаг 01

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

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

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

   Копировать

   

2. Шаг 02

   Запустите Claude Code в проекте

   Выполните claude в папке проекта (или откройте Claude Code в IDE). Он работает с настоящим репозиторием и спрашивает разрешения перед правкой файлов.

   

3. Шаг 03

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

   Замените ВСТАВЬТЕ_КЛЮЧ_САЙТА на ключ и отправьте промпт.

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

   Копировать

   

4. Шаг 04

   Одобрите правки и выкатите

   Прочитайте предложенные правки и одобрите их, затем закоммитьте и задеплойте как обычно — или попросите Claude Code открыть пулл-реквест.

   

5. Шаг 05

   Создайте три элемента онбординга

   В разделе Сценарии создайте три элемента: Модальное окно с одним приветственным предложением и ссылкой на ключевой экран; тур Тултипы по шагам из 3–4 шагов на этом экране, собранный через Редактировать на сайте и Выбрать элемент; и Чеклист онбординга с оставшимися задачами настройки.

   

6. Шаг 06

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

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

   Настройка	Значение
   Приветственный поп-ап
   Формат	Модальное окно
   Где показывать (URL страницы)	Точный путь /invoices
   Когда показывать	Сразу при загрузке
   Таргетинг аудитории	Без правил — все, кто открыл страницу
   Частота	Один раз на посетителя
   Продуктовый тур
   Формат	Тултипы по шагам
   Где показывать (URL страницы)	Раздел по префиксу /invoices/new
   Когда показывать	Сразу при загрузке
   Таргетинг аудитории	Без правил — все, кто открыл страницу
   Частота	Один раз на посетителя
   Чеклист
   Формат	Чеклист онбординга
   Где показывать (URL страницы)	Раздел по префиксу /invoices
   Когда показывать	На N-й визит: 2
   Таргетинг аудитории	Свойство first_invoice_sent не равно true
   Частота	Один раз на посетителя

   

7. Шаг 07

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

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

   

Подводные камни: онбординг пользователей с помощью Claude Code