Поп-апы и туры на Тильде, Битриксе и WordPress
Нужен поп-ап на лендинге, подсказка в форме заявки или тур по личному кабинету? В конструкторах и CMS есть поле для кода в head всего сайта: вставьте туда строку Clew один раз, а форматы собирайте в редакторе Clew.
- Время
- ● 5 минут
- Кто делает
- Администратор сайта
- Шагов
- 6
Пошагово
- Шаг 01
Скопируйте код из Clew
Зарегистрируйтесь или войдите в Clew и откройте Админка → Обзор. В карточке «Виджет пока не подаёт сигналов.» — строка с ключом сайта; нажмите на неё, чтобы скопировать.
<!-- Clew: замените ВСТАВЬТЕ_КЛЮЧ_САЙТА на ключ сайта из админки > Обзор --> <script src="https://tryclew.ru/widget/ВСТАВЬТЕ_КЛЮЧ_САЙТА.js" async></script>

Шаг 1 · схема интерфейса - Шаг 02
Найдите поле для кода в head всего сайта
Ищите настройку для всего сайта, а не для отдельной страницы: в Тильде это HTML-код для вставки внутрь HEAD, в Битриксе — шаблон сайта. Точные пути — в таблице ниже.

Шаг 2 · схема интерфейса - Шаг 03
Вставьте строку в head
Вставьте строку в поле для head — не в конец body и не на одну страницу. Если там уже есть другие скрипты, например Метрика, добавьте Clew с новой строки; порядок не важен.

Шаг 3 · схема интерфейса - Шаг 04
Сохраните и опубликуйте
Сохраните настройку. В Тильде и Webflow код попадёт на сайт только после публикации: в Тильде — Опубликовать все страницы. В WordPress и Битриксе достаточно сохранить.

Шаг 4 · схема интерфейса - Шаг 05
Очистите кеш
Если на сайте включено кеширование (композитный режим Битрикса, WP Rocket, LiteSpeed Cache, CDN), очистите кеш, чтобы посетители получили страницы с новой строкой. Плагины, которые откладывают или объединяют JavaScript, настройте так, чтобы они не трогали
tryclew.ru/widget.
Шаг 5 · схема интерфейса - Шаг 06
Убедитесь, что всё работает
Откройте любую страницу сайта в обычном окне браузера и вернитесь в Clew, в раздел Обзор. В течение минуты карточка станет зелёной: «Виджет активен.»

Шаг 6 · схема интерфейса
Точные пути по платформам
| Платформа | Куда вставить | Примечание |
|---|---|---|
| Тильда | Настройки сайта → Ещё → HTML-код для вставки внутрь HEAD → Редактировать код → Сохранить, затем Опубликовать все страницы | Нужен тариф Personal или Business. |
| 1С-Битрикс | Настройки → Настройки продукта → Сайты → Шаблоны сайтов → активный шаблон → вкладка Шаблон → строка перед </head> → Сохранить | После сохранения очистите кеш: Настройки → Настройки продукта → Автокеширование → Очистка файлов кеша. Если шаблон из Маркетплейса, обновление решения может перезаписать правку — сохраните копию шаблона. |
| WordPress | Бесплатный плагин WPCode → Code Snippets → Header & Footer → поле Header → Save Changes | Или настройка «скрипты в шапке» вашей темы. Файлы темы не правьте: обновление их перезапишет. |
| Webflow | Site settings → Custom code → Head code → Save, затем Publish | Нужен платный Site plan. |
| Обычный HTML | Перед </head> на каждой странице или один раз в общем подключаемом header | Загрузите изменённые файлы на хостинг. |
Лендинг или продукт?
Больше всего пользы от туров внутри продукта, в который пользователи входят по логину. Если лендинг на Тильде, а личный кабинет написан с нуля, ставьте Clew в кабинет: подойдут ИИ-ассистент, Яндекс Тег Менеджер или Google Tag Manager.
Что можно добавить через Тильда, Битрикс, WordPress без программиста
После установки строки каждый формат ниже собирается в редакторе Clew. В этих инструкциях установка разобрана вместе с конкретным примером.
- ТильдаКак добавить поп-ап на сайт на Тильде без программиста
- 1С-БитриксКак добавить поп-ап на сайт на 1С-Битрикс без программиста
- WordPressКак добавить поп-ап на сайт на WordPress без программиста
- ТильдаКак добавить подсказку на сайт на Тильде без программиста
- WordPressКак добавить подсказку на сайт на WordPress без программиста
- ТильдаКак добавить форму оценки на сайт на Тильде без программиста
Если что-то не работает
Можно поставить только на некоторые страницы?
Ставьте на весь сайт. На каких страницах и кому показывать тур, настраивается в Clew — в настройки сайта возвращаться не придётся.
В моём тарифе нет поля для своего кода
Тильда и Webflow разрешают сторонние скрипты только на платных тарифах, и обходного пути нет. Перейдите на подходящий тариф или установите Clew в сам продукт.
В админке всё ещё «Виджет пока не подаёт сигналов»
Откройте страницу сайта в обычном окне браузера и через минуту обновите админку. Если не помогло: проверьте, что изменения опубликованы, а не только сохранены; что вместо заглушки стоит ваш ключ; в инструментах разработчика браузера на вкладке Network найдите widget/…js — ответ должен быть 200. Ответ 404 означает ошибку в ключе.
На сайте настроен Content Security Policy
Нужны две директивы и больше ничего: script-src https://tryclew.ru и connect-src https://tryclew.ru. Виджет не использует eval, blob: и воркеры, а свои стили подключает через CSSOM, а не разметкой, — поэтому style-src 'unsafe-inline' не нужен в Chrome, Edge, Firefox 101+ и Safari 16.4+. Более старые браузеры получают запасной элемент <style>: если они вам важны, а в style-src нет 'unsafe-inline', там подсказки покажутся без оформления. Готовая строка: Content-Security-Policy: script-src 'self' https://tryclew.ru; connect-src 'self' https://tryclew.ru;
Можно ли зафиксировать версию виджета и указать <code>integrity=</code>?
Да. Строка из инструкций — /widget/ВСТАВЬТЕ_КЛЮЧ_САЙТА.js — «скользящая»: она всегда отдаёт текущий виджет, поэтому хэш Subresource Integrity к ней не приложить (байты меняются). Рядом каждая версия отдаётся ещё и по неизменяемому адресу с хэшем содержимого. Запросите https://tryclew.ru/api/v1/widget-version?site=ВАШ_КЛЮЧ — в ответе будут version, path и integrity; подставьте их в тег: <script src="https://tryclew.ru/widget/v/<версия>/ВАШ_КЛЮЧ.js" integrity="sha384-…" crossorigin="anonymous" async></script>. Закреплённый адрес не меняется, поэтому браузер откажется выполнить файл, если отличается хотя бы один байт. Версию вы обновляете тогда, когда сами решите, — тот же запрос можно делать из скрипта деплоя. Больше ничего не меняется: туры по-прежнему публикуются в редакторе Clew без правок сайта.
Не съест ли виджет блокировщик рекламы?
Нет. Нашего домена нет ни в одном из больших списков — EasyList, EasyPrivacy, AdGuard, uBlock Origin, — поэтому туры, подсказки и чеклисты видят и те посетители, у кого блокировщик включён. Тоньше со статистикой: EasyPrivacy блокирует любые сторонние запросы типа ping, поэтому виджет отправляет события обычным запросом — его эти списки пропускают. Чтобы выйти из-под любых пользовательских списков совсем, отдавайте виджет со своего домена: направьте https://ваш-сайт/clew/* на https://tryclew.ru/* в CDN или nginx и замените строку на <script src="/clew/widget/ВАШ_КЛЮЧ.js" async></script>. Виджет сам будет обращаться к API по тому же префиксу — всё станет first-party.
Работает ли в SPA (React, Vue, Next.js)?
Да. Подключите строку один раз — в корневом HTML или корневом шаблоне. Смену страниц без перезагрузки виджет отслеживает сам (History API и изменения hash), поэтому не добавляйте его на каждый маршрут. Повторная загрузка игнорируется, но это лишняя работа для браузера.
А что с баннером согласия на cookie?
Clew хранит собственную cookie и записи в localStorage, чтобы помнить, какие туры посетитель уже прошёл, и считать прохождения. В рекламные системы данные не передаются. Можно ли запускать виджет до согласия, решает ваша политика обработки данных; если баннер блокирует его до согласия, туры просто начнутся после него.
Стоит плагин кеширования или оптимизации
После установки очистите кеш, иначе посетители будут получать старые страницы без строки. Если плагин откладывает, объединяет или минифицирует JavaScript (WP Rocket, LiteSpeed Cache, композитный режим Битрикса), исключите tryclew.ru/widget из этих оптимизаций.
Сайт станет медленнее?
Нет. У строки есть атрибут async: браузер загружает виджет параллельно и не блокирует страницу. Зависимостей у виджета нет.
Может ли приложение само сообщить Clew, что шаг онбординга пройден?
Да, это одна строка. У пункта чеклиста может быть правило, которое отмечает его без клика посетителя: страница, на которую он зашёл, клик по элементу с указанным CSS-селектором или событие из вашего кода — Clew.complete('invited'), где invited — ключ, который вы вписали рядом с пунктом в редакторе. Вызывайте в момент, когда дело действительно сделано, например после ответа вашего API. Вызывать безопасно в любой момент: если чеклиста с таким ключом на странице нет, вернётся false. Старое имя TutorKit по-прежнему работает.
Другие способы установки
Google Tag Manager
Тег «Пользовательский HTML» на всех страницах, проверка в предварительном просмотре, публикация.
Открыть инструкцию →МетрикаЯндекс Тег Менеджер
Тег «Пользовательский HTML» с триггером на просмотр страницы — прямо в Метрике, без кода Google Tag Manager на сайте.
Открыть инструкцию →ВайбкодингИИ-ассистенты
Один промпт для Cursor, Claude Code, Lovable, Bolt.new, v0 и Replit, который ставит строку в правильный корневой файл.
Открыть инструкцию →