Как сделать попап с картинкой без программиста
Иногда одно изображение объясняет быстрее трёх абзацев: как выглядит новый отчёт, что внутри гайда, из чего состоит тариф. В Clew картинка — часть шага модального окна: вы вставляете её адрес, выбираете размер и сторону, остальное окно остаётся обычным туром с кнопкой и ссылкой.
- Время
- ● 10 минут
- Цена
- 14 дней бесплатно, без карты
- Формат
- Модальное окно
Что такое попап с картинкой в Clew
Это тур в формате Модальное окно, у шага которого есть картинка. Вы задаёте её адрес (полный https), положение — сверху, слева, справа или по центру — и размер: маленький, средний или большой. Рядом живут заголовок, текст и кнопка-ссылка шага.
Текст шага поддерживает простое форматирование — жирный, курсив, ссылки, — и разбирается нашим кодом в элементы страницы, а не вставляется как HTML: чужую разметку в ваш сайт через попап не протащить. Адрес картинки принимается только https и только абсолютный, чтобы окно не стало способом подгрузить что угодно откуда угодно.
Когда картинка в попапе помогает, а когда мешает
Показать новую функцию
Скриншот нового экрана рядом с двумя предложениями объяснит обновление лучше, чем абзац про «улучшенный интерфейс».
Лид-магнит с обложкой
Обложка отчёта или чек-листа рядом с формой email заметно повышает отклик: видно, что именно получат.
Схема или тариф
Одна схема вместо списка из восьми пунктов — положите её слева, а текст справа.
Чего избегать
Тяжёлых файлов: окно ждёт картинку, как любая картинка на странице. Берите сжатый JPEG или PNG под размер показа, а не исходник с фотоаппарата. И не прячьте в картинку важный текст — его не прочитает ни поиск, ни скринридер.
Как добавить попап с картинкой за 5 шагов
- Шаг 01
Скопируйте код Clew
Зарегистрируйтесь бесплатно или войдите, добавьте сайт и откройте Админка → Обзор. Нажмите на строку в карточке «Виджет пока не подаёт сигналов.» — она скопируется уже с ключом вашего сайта вместо заглушки.
<!-- Clew: замените ВСТАВЬТЕ_КЛЮЧ_САЙТА на ключ сайта из админки > Обзор --> <script src="https://tryclew.ru/widget/ВСТАВЬТЕ_КЛЮЧ_САЙТА.js" async></script>
Шаг 1 · схема интерфейса - Шаг 02
Один раз поставьте строку на сайт
Вставьте код там, где вы управляете сайтом. Каждая инструкция занимает 5–10 минут, и повторять её не придётся: всё остальное делается в Clew.
Шаг 2 · схема интерфейса - Шаг 03
Соберите окно в Clew
В Clew откройте Сценарии → + Новый сценарий, выберите Формат — Модальное окно. В шаге напишите Заголовок и Текст, вставьте адрес картинки и выберите её размер и сторону. Кнопку задайте в Текст ссылки и Адрес ссылки.
Шаг 3 · схема интерфейса - Шаг 04
Укажите, где, когда и кому показывать
В том же редакторе заполните Где показывать (URL страницы), Когда показывать, Таргетинг аудитории и Частота. Настройки примера выше:
Настройка Значение Формат Модальное окно Где показывать (URL страницы) Раздел по префиксу /blogКогда показывать После прокрутки на N%: 60 % страницы Таргетинг аудитории Без правил — все, кто открыл страницу Частота Один раз на посетителя 
Шаг 4 · схема интерфейса - Шаг 05
Опубликуйте и проверьте на сайте
Поставьте Статус — Опубликован и сохраните. Откройте страницу в режиме инкогнито: Clew помнит, кто уже видел показ «один раз», поэтому в обычном окне его может не быть. Показы, прохождения и отвалы появятся в статистике тура.
Шаг 5 · схема интерфейса
Пошагово: попап с картинкой на вашей платформе
Выберите платформу, на которой сделан сайт или приложение. В каждой инструкции — шаги установки, разобранный пример с готовыми настройками и подводные камни этой платформы.
Это бесплатно?
https — файл остаётся у вас: в вашей CDN, в медиатеке сайта, в облаке. Так вы в любой момент его замените, не трогая тур, а мы не становимся файловым хостингом, который однажды придётся модерировать.Формат входит в тариф Pro. Каждый новый аккаунт начинается с 14 дней бесплатного пробного периода со всеми форматами и правилами аудитории, карта не нужна. После пробного периода ничего не удаляется и опубликованное продолжает показываться, а туры и подсказки остаются бесплатными на тарифе Free.
Вопросы и ответы
Можно загрузить файл прямо в Clew?
Нет. Картинка подключается по полному адресу https — файл остаётся у вас и заменяется без правки тура. Так мы не становимся файловым хостингом на вашем домене и на нашем.
Где взять адрес картинки?
В медиатеке вашего сайта (в WordPress — «Медиафайлы», в Тильде — загрузка в блоке), в облачном хранилище или в вашей CDN. Нужен адрес самого файла, оканчивающийся на .jpg, .png или .webp, открывающийся по https.
Почему адрес http не принимается?
Картинка по http на сайте с https не загрузится в большинстве браузеров — это смешанное содержимое. Чтобы окно не оказалось пустым у половины посетителей, Clew принимает только https.
Попап с картинкой бесплатный?
Нужен формат модального окна — он входит в Pro. 14 дней пробного периода со всеми форматами, без карты.
А на телефоне?
Картинка занимает всю ширину окна, а положения «слева» и «справа» на узком экране становятся «сверху»: иначе и картинка, и текст были бы нечитаемыми.