Clew

Поп-апы и туры на Тильде, Битриксе и WordPress

Нужен поп-ап на лендинге, подсказка в форме заявки или тур по личному кабинету? В конструкторах и CMS есть поле для кода в head всего сайта: вставьте туда строку Clew один раз, а форматы собирайте в редакторе Clew.

Время
● 5 минут
Кто делает
Администратор сайта
Шагов
6

Пошагово

  1. Шаг 01

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

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

    <!-- Clew: замените ВСТАВЬТЕ_КЛЮЧ_САЙТА на ключ сайта из админки > Обзор -->
    <script src="https://tryclew.ru/widget/ВСТАВЬТЕ_КЛЮЧ_САЙТА.js" async></script>
    Обзор в админке Clew: карточка «Виджет пока не подаёт сигналов» и строка кода со скрытым ключом сайта
    Шаг 1 · схема интерфейса
  2. Шаг 02

    Найдите поле для кода в head всего сайта

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

    Пути к полю кода в head: Тильда, 1С-Битрикс, WordPress, Webflow, Яндекс Тег Менеджер, Google Tag Manager
    Шаг 2 · схема интерфейса
  3. Шаг 03

    Вставьте строку в head

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

    Поле «HTML-код для вставки внутрь HEAD» в настройках сайта со вставленной строкой Clew
    Шаг 3 · схема интерфейса
  4. Шаг 04

    Сохраните и опубликуйте

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

    Верхняя панель настроек сайта с кнопками «Сохранить» и «Опубликовать все страницы»
    Шаг 4 · схема интерфейса
  5. Шаг 05

    Очистите кеш

    Если на сайте включено кеширование (композитный режим Битрикса, WP Rocket, LiteSpeed Cache, CDN), очистите кеш, чтобы посетители получили страницы с новой строкой. Плагины, которые откладывают или объединяют JavaScript, настройте так, чтобы они не трогали tryclew.ru/widget.

    Меню кеша в панели администратора с выделенным пунктом «Очистить весь кеш»
    Шаг 5 · схема интерфейса
  6. Шаг 06

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

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

    Обзор в админке Clew: зелёная карточка «Виджет активен»
    Шаг 6 · схема интерфейса

Точные пути по платформам

ПлатформаКуда вставитьПримечание
ТильдаНастройки сайта → Ещё → HTML-код для вставки внутрь HEAD → Редактировать код → Сохранить, затем Опубликовать все страницыНужен тариф Personal или Business.
1С-БитриксНастройки → Настройки продукта → Сайты → Шаблоны сайтов → активный шаблон → вкладка Шаблон → строка перед </head> → СохранитьПосле сохранения очистите кеш: Настройки → Настройки продукта → Автокеширование → Очистка файлов кеша. Если шаблон из Маркетплейса, обновление решения может перезаписать правку — сохраните копию шаблона.
WordPressБесплатный плагин WPCode → Code Snippets → Header & Footer → поле Header → Save ChangesИли настройка «скрипты в шапке» вашей темы. Файлы темы не правьте: обновление их перезапишет.
WebflowSite settings → Custom code → Head code → Save, затем PublishНужен платный Site plan.
Обычный HTMLПеред </head> на каждой странице или один раз в общем подключаемом headerЗагрузите изменённые файлы на хостинг.

Лендинг или продукт?

Больше всего пользы от туров внутри продукта, в который пользователи входят по логину. Если лендинг на Тильде, а личный кабинет написан с нуля, ставьте Clew в кабинет: подойдут ИИ-ассистент, Яндекс Тег Менеджер или Google Tag Manager.

Что можно добавить через Тильда, Битрикс, WordPress без программиста

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

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

Можно поставить только на некоторые страницы?

Ставьте на весь сайт. На каких страницах и кому показывать тур, настраивается в 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 по-прежнему работает.

Одна строка на сайте — и туры, подсказки и чеклисты без релизов.

Туры, попапы и онбординг в эпоху ИИ

7 паттернов с числом шагов, правилами текста и метриками, что меняет ИИ, чек-лист перед публикацией. PDF, 2 страницы. Что внутри гайда →