Туры и онбординг в приложении, сделанном с ИИ

Пошагово

1. Шаг 01

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

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

   

2. Шаг 02

   Откройте проект в режиме, который правит файлы

   • Claude Code: запустите claude в папке проекта.
   • Cursor: чат в режиме Agent.
   • Lovable, Bolt.new, v0: чат проекта.
   • Replit: Agent или Assistant.

   В GigaCode и SourceCraft Code Assistant промпт тоже сработает, но если ассистент только предложит правку, примените её в редакторе сами.

   

3. Шаг 03

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

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

   Добавь в это приложение виджет онбординга Clew.
   
   Вставь этот тег без изменений, чтобы он загружался один раз на каждой странице, в том числе после переходов без перезагрузки:
   <script src="https://tryclew.ru/widget/ВСТАВЬТЕ_КЛЮЧ_САЙТА.js" async></script>
   
   Куда вставлять (выбери подходящее для этого проекта):
   - Обычный HTML, React + Vite, Vue + Vite: index.html, прямо перед </head>
   - Next.js App Router: app/layout.tsx, через next/script: <Script src="(тот же URL)" strategy="afterInteractive" /> внутри <body>
   - Next.js Pages Router: pages/_app.tsx, тот же компонент next/script
   - Nuxt 3: nuxt.config.ts, app.head.script: [{ src: "(тот же URL)", async: true }]
   - SvelteKit: src/app.html, прямо перед %sveltekit.head%
   - Astro: <head> общего layout
   - Иначе: корневой HTML-шаблон или layout, который рендерится на всех страницах
   
   Правила:
   - Используй URL ровно как указан. Не скачивай скрипт, не встраивай его в сборку и не ставь npm-пакеты.
   - Добавь его в одном месте, не внутри компонента, который перерисовывается.
   - Если в проекте задан Content-Security-Policy, разреши https://tryclew.ru в script-src и connect-src.
   - Больше ничего не меняй и покажи diff.

   Копировать

   

4. Шаг 04

   Проверьте, что изменился один файл

   Посмотрите diff, прежде чем принять. Ожидаемо: один файл и одна добавленная строка (или небольшой блок <Script> в Next.js) с вашим ключом. Если ассистент поправил компоненты, поставил пакеты или скопировал скрипт в проект, попросите откатить это и оставить только тег.

   

5. Шаг 05

   Опубликуйте или задеплойте

   Тег работает только в опубликованном приложении. Нажмите Publish или Deploy в Lovable, Bolt.new, v0 или Replit. В Claude Code и Cursor сделайте коммит и пуш, если хостинг деплоит из git.

   

6. Шаг 06

   Убедитесь, что всё работает

   Откройте опубликованное приложение в обычном окне браузера и вернитесь в Clew, в раздел Обзор. В течение минуты карточка станет зелёной: «Виджет активен.»

   

Куда ставится тег в разных стеках

Дальше: пусть ассистент собирает и туры

Что можно добавить через ИИ-ассистенты без программиста

После установки строки каждый формат ниже собирается в редакторе Clew. В этих инструкциях установка разобрана вместе с конкретным примером.

• LovableКак сделать продуктовый тур в приложении на Lovable без программиста
• CursorКак сделать продуктовый тур в приложении, сделанном в Cursor без программиста
• LovableКак добавить чеклист онбординга в приложении на Lovable без программиста

Если что-то не работает

Другие способы установки