Clew

Как добавить растяжку на сайт без программиста

Растяжка говорит одно короткое предложение и уходит, когда её закрыли. Это самый тихий формат в Clew: она не затемняет страницу, ничего не перекрывает и не требует реакции. Текст, кнопку, край экрана и момент показа вы задаёте в редакторе, клики видите в статистике.

Время
● 10 минут
Цена
14 дней бесплатно, без карты
Формат
Растяжка

Что такое растяжка в Clew

Это тур в формате Растяжка: одна полоса, прижатая к верхнему или нижнему краю окна. В ней строка текста, при желании кнопка со ссылкой, крестик и — если вы соберётесь собирать адреса — поле email. Шагов у растяжки нет: она показывается целиком и сразу.

Полоса по умолчанию лежит поверх страницы (position: fixed) и не может сломать вёрстку. Отдельно можно выбрать вариант, который сдвигает страницу вниз на свою высоту; он меняет отступ вашего body, и это стоит проверить на своём сайте. Закрывается крестиком, и закрытая растяжка не возвращается, пока вы не измените частоту показа. Правила показа — те же, что у всех туров: страницы, задержка, прокрутка, номер визита, свойства аудитории.

Полоса с объявлением и кнопкой у нижнего края сайта
схема интерфейса

Когда растяжка подходит, а когда нет

Объявление для всех

Вышел отчёт, меняются цены с первого числа, двенадцатого числа профилактика. Одна строка и ссылка — читают за секунду, не закрывая задачу.

Срок, который заканчивается

Скидка до пятницы, запись на вебинар до вторника. Поставьте растяжку снизу и снимите её с публикации, когда срок прошёл.

Подписка без модального окна

Поле email в растяжке — та же форма Clew, что и в попапе: со строкой согласия и ссылкой на вашу политику. Она не перекрывает контент и потому раздражает меньше.

Чего избегать

Растяжки без крестика — это ловушка, и Clew её не сохранит. Двух растяжек сразу: Clew показывает один элемент за раз. И варианта «сдвигает страницу» на сайте с прилипшей шапкой, пока вы не проверили его своими глазами.

Как добавить растяжку за 5 шагов

  1. Шаг 01

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

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

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

    Один раз поставьте строку на сайт

    Вставьте код там, где вы управляете сайтом. Каждая инструкция занимает 5–10 минут, и повторять её не придётся: всё остальное делается в Clew.

    Где поле для кода в head в популярных конструкторах и CMS
    Шаг 2 · схема интерфейса
  3. Шаг 03

    Напишите растяжку в Clew

    В Clew откройте Сценарии → + Новый сценарий и выберите Формат — Растяжка. Напишите Текст полосы, при желании Текст кнопки и Ссылка кнопки, выберите Где полоса. Как размещается оставьте на «Поверх страницы», если не проверили второй вариант на своём сайте.

    Полоса с объявлением и кнопкой у нижнего края сайта
    Шаг 3 · схема интерфейса
  4. Шаг 04

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

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

    НастройкаЗначение
    ФорматРастяжка
    Где показывать (URL страницы)Любая страница
    Когда показыватьСразу при загрузке
    Таргетинг аудиторииБез правил — все, кто открыл страницу
    ЧастотаОдин раз на посетителя
    Редактор тура в Clew: формат, правило URL, триггер и правило аудитории
    Шаг 4 · схема интерфейса
  5. Шаг 05

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

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

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

Пошагово: растяжка на вашей платформе

Выберите платформу, на которой сделан сайт или приложение. В каждой инструкции — шаги установки, разобранный пример с готовыми настройками и подводные камни этой платформы.

Это бесплатно?

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

Формат входит в тариф Pro. Каждый новый аккаунт начинается с 14 дней бесплатного пробного периода со всеми форматами и правилами аудитории, карта не нужна. После пробного периода ничего не удаляется и опубликованное продолжает показываться, а туры и подсказки остаются бесплатными на тарифе Free.

Вопросы и ответы

Растяжка бесплатная?

Формат входит во всплывающие форматы тарифа Pro. У каждого нового аккаунта 14 дней пробного периода со всеми форматами, без карты. Туры и подсказки остаются бесплатными на Free.

Она сдвинет мою шапку?

Нет, если оставить вариант по умолчанию: полоса лежит поверх страницы и ни на что не влияет. Вариант «сдвигает страницу вниз» выбирается явно и добавляет отступ телу страницы — на сайтах с прилипшей шапкой его нужно проверить.

Можно собирать почту в растяжке?

Да, поле email включается в настройках полосы. Как и в любой форме Clew, без строки согласия и ссылки на вашу политику конфиденциальности она не сохранится: адреса посетителей — ваши данные, и отвечаете за них вы.

Что видно в статистике?

Показы, закрытия и клики по кнопке — как у любого тура. Адреса из формы лежат отдельно, в списке заявок, с выгрузкой в CSV.

А на телефоне?

Полоса растягивается на всю ширину и переносит текст; кнопка и крестик остаются нажимаемыми. Снизу она реже перекрывает то, что человек читает.

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

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

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