Как добавить всплывающее окно при клике на кнопку в WordPress (Полное руководство)

Хотите превратить больше посетителей вашего сайта в клиентов или подписчиков? Всплывающие окна — это скрытое оружие, которое вам нужно. На самом деле, исследования показывают, что своевременные всплывающие окна могут увеличить коэффициент конверсии в среднем до 9,28%.

Независимо от того, управляете ли вы интернет-магазином, SaaS-компанией или малым бизнесом, правильно настроенные всплывающие окна могут творить чудеса. Например, всплывающие окна помогают восстановить как минимум 17% оставленных корзин (ResultFirst) и даже могут увеличить ваши продажи до 25% (VWO). Лучшая часть? Всплывающие окна невероятно универсальны. Вы можете настроить их, чтобы они появлялись на основе поведения пользователя или вызывались простым нажатием кнопки.

В этой статье мы углубимся в то, как добавить всплывающие окна, вызванные нажатием кнопки в WordPress, как с плагином, так и без него, и покажем, как использовать их, чтобы привлекать ваших посетителей, как профессионал.

Что такое всплывающее окно при нажатии кнопки?

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

Создание всплывающего окна по клику в WordPress с использованием Claspo

Давайте подробно разберем, как добавить всплывающее окно, открываемое по клику на кнопке в WordPress с использованием конструктора всплывающих окон Claspo шаг за шагом.

Шаг 1: Установите и активируйте плагин в WordPress

1. Войдите в панель управления WordPress. Зайдите на свой сайт WordPress, войдя как администратор.
2. Перейдите к плагинам. На левой боковой панели наведите курсор на "Плагины" и нажмите "Добавить новый".
3. Найдите плагин Claspo. В строке поиска в правом верхнем углу введите "Claspo". Когда плагин появится в результатах, нажмите "Установить сейчас", а затем "Активировать".
4. Подключите ваш аккаунт Claspo. Если у вас еще нет аккаунта, просто следуйте инструкциям, чтобы его создать. После входа в систему авторизуйте подключение.

Шаг 2: Создайте всплывающее окно в Claspo

Теперь, когда плагин настроен, пришло время создать ваше всплывающее окно в панели управления Claspo.

1. Перейдите в панель управления Claspo из меню WordPress.

2. Создайте новое всплывающее окно. Нажмите "Создать новый виджет" и выберите заранее созданный шаблон или начните проектировать свое всплывающее окно с нуля.

Claspo предлагает различные шаблоны для генерации лидов, скидок и других целей.

3. Создайте дизайн вашего всплывающего окна путем настройки содержания и визуальных элементов всплывающего окна.

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

• Улучшите свое всплывающее окно с помощью динамических элементов, таких как блоки изображений, видеофрагменты, промокоды, таймеры обратного отсчета и игровые функции. Вы можете загрузить свои собственные изображения или использовать бесплатные ресурсы из нашей встроенной медиа-библиотеки, чтобы создать более увлекательный опыт, который способствует конверсии.

Если вы хотите собирать электронные письма или другие данные, включите форму во всплывающее окно. В Claspo конструкторе всплывающих окон вы найдете готовые блоки, которые можно легко перетащить в рабочую область. Просто разместите их там, где хотите, внутри виджета для быстрой и простой настройки. 

4. Настройте параметры отображения всплывающего окна. Чтобы вызвать всплывающее окно по нажатию кнопки в WordPress, у вас есть два варианта: запускать виджет по нажатию на лаунчер или по нажатию на HTML-элемент.

Лаунчер — это плавающая кнопка или иконка, которая остается видимой на вашем сайте и может быть нажата для вызова всплывающего окна или виджета. Вы можете создать её с нуля в нашем редакторе или выбрать из шаблонов в библиотеке и настроить её, чтобы соответствовать вашему дизайну.

Если вы решите запускать виджет по нажатию на HTML-элемент, вам нужно вставить CSS-селектор в соответствующее поле. Мы расскажем, где его найти позже.

Шаг 3: Добавьте Кнопку на Страницу или Публикацию WordPress

С созданным всплывающим окном, вам нужно добавить кнопку, которая будет запускать его на вашем сайте WordPress.

1. Перейдите к Публикациям в вашей административной панели WordPress. Чтобы добавить кнопку в ваш контент, нажмите на + значок в верхнем левом углу редактора. Это действие откроет браузер блоков.
2. Прокрутите вниз до раздела ‘Элементы макета’ и выберите ‘Кнопку’. Далее введите полный URL, на который вы хотите, чтобы кнопка ссылалась, в предоставленное текстовое поле. 
3. Чтобы изменить текст кнопки, просто нажмите на текст-плейсхолдер, на котором написано ‘Добавить текст…’ и начните печатать желаемый текст.

С помощью клавиатуры, вы также можете ввести /buttons на новой строке и нажать Enter, чтобы быстро добавить новый блок кнопки.

Или вы можете добавить кнопку с помощью плагина. Перейдите в административную панель WordPress и выберите Плагины > Добавить новый. В строке поиска плагина введите ‘button block’, чтобы найти соответствующий плагин. Установите и активируйте его. После активации вы получите приглашение подтвердить свой email, чтобы подписаться на плагин Button Block.

Найдите CSS-селектор и вставьте его в настройки виджета.

1. Сначала откройте свою домашнюю страницу в новой вкладке. Щелкните правой кнопкой мыши в любом месте страницы и выберите опцию ‘Инспектировать’ (также может отображаться как ‘Инспектировать элемент’).
2. В инструментах разработчика вы увидите две панели: на левой панели отображается иерархия HTML-элементов, тогда как правую панель пока можно игнорировать.
3. Этот подход позволяет вам легко перейти к интересующему вас элементу, даже если вы не знакомы с HTML. Просто щелкните правой кнопкой мыши элемент, который хотите, и инструменты разработчика автоматически выделят его.
4. Как только вы нашли HTML-элемент, последний шаг — скопировать его CSS-селектор. Ищите класс под названием .button на элементе ссылки, так как он может быть использован в качестве вашего CSS-селектора.

Вставьте скопированный CSS-селектор в соответствующее поле ввода в настройках вашего виджета.

Шаг 4: Протестируйте и настройте всплывающее окно

1. Просмотрите вашу страницу. Сохраните страницу и просмотрите её, чтобы увидеть, как работает всплывающее окно, вызванное кнопкой. Убедитесь, что при нажатии на кнопку окно открывается как ожидалось.
2. Отрегулируйте настройки всплывающего окна (если необходимо). Если всплывающее окно не ведет себя должным образом или вы хотите изменить его внешний вид, вернитесь в панель управления Claspo и внесите необходимые изменения.

Шаг 5: Опубликуйте страницу

Когда вы будете довольны настройками, опубликуйте вашу страницу или пост в WordPress. Теперь всплывающее окно, вызванное кнопкой, активно и готово к взаимодействию с посетителями. Теперь, когда вы знаете, как открыть всплывающее окно с помощью нажатия кнопки в Wordpress, мы раскроем несколько советов для повышения конверсии.

10 Реальных примеров всплывающих окон в WordPress и почему они работают

Задумывались ли вы, как реальные бренды используют всплывающие окна без нарушения опыта пользователей? Этот раздел разбирает 10 реальных примеров всплывающих окон, вызванных кнопкой, и объясняет, почему они работают с точки зрения UX и маркетинга. Вы увидите, что возможно за пределами простых форм и как можно стимулировать регистрации, продажи и увеличить количество рефералов. Каждый пример сопровождается четкими выводами, которые вы можете применить сразу же.

Ненавязчиво, но эффективно: увеличение вашего списка рассылки

Этот вариант использования показывает, как всплывающее окно в WordPress можно оформить так, чтобы оно мягко приглашало пользователей подписаться — без нарушения их просмотра.

Обратите внимание
Brooklinen размещает маленький значок конверта в меню, который ведет себя как ненавязчивое уведомление. Красная точка имитирует психологию нового сообщения — это умный способ привлечь внимание без агрессии. При нажатии всплывающее окно открывается как плавающая панель, предлагающая скидку на первую покупку в обмен на адрес электронной почты.

С точки зрения UX и маркетинга, это делает несколько вещей правильно:

• Это кажется естественной частью интерфейса, а не навязываемым прерыванием.
• Плавающая панель остается видимой, не закрывая основное содержание — улучшает пользовательский опыт.
• Она нацелена на пользователей с высокой вовлеченностью, которые уже перемещаются по сайту и более склонны к конверсии.
• Чистый дизайн идеально соответствует общей эстетике сайта — без визуального напряжения.

Этот подход идеально подходит для любого сайта на WordPress, который хочет показать всплывающее окно для сбора электронной почты — особенно когда важны доверие пользователей и эстетика.

Регистрация через полезные микроинтеракции

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

Обратите внимание
Вместо перенаправления пользователей на сторонний сервис, такой как Pinterest, кнопка «Сохранить статью» вызывает всплывающее окно с простым сообщением: создайте аккаунт, чтобы разблокировать эту функцию. Это гармоничное сочетание пользовательского взаимодействия и ненавязчивой конверсии.

С точки зрения UX и маркетинга это работает, потому что:

• Оно привлекает пользователей в нужный момент — они выразили намерение, захотев сохранить.
• Виджет появляется мгновенно, предлагая контекст и ценность, а не просто холодную стену авторизации.
• Это подталкивает пользователей к созданию аккаунта, что воспринимается как выгода, а не как преграда.
• Создаётся естественный путь к более глубокому взаимодействию — подписки на рассылки, персонализация и многое другое.

Этот пример показывает, как всплывающие окна WordPress могут использоваться не только для продаж или сбора email, но и для триггеров поведения на сайте, направляющих пользователей к долгосрочной лояльности.

Увеличение среднего чека с помощью умного порогового предложения

Этот пример страницы продукта демонстрирует ненавязчивый, но убедительный способ вызвать всплывающее окно при нажатии кнопки в WordPress — такое, которое подталкивает пользователей тратить больше без давления.

Что заметить
Плавающий значок подарка на правом краю экрана намекает на что-то приятное. При нажатии всплывающее окно сообщает пользователю, что он получит бонус, если сумма его заказа достигнет определённого уровня. Это не прерывает процесс покупок, а скорее предлагает заманчивое улучшение.

Почему это работает с психологической и UX точки зрения:

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

С Claspo вы можете пойти дальше. Используя события Data Layer, ваша настройка всплывающего окна на WordPress может отобразить динамический контент на основе поведения пользователя. Например, вместо общего «потратьте $50, чтобы разблокировать подарок» ваш виджет может сказать: «Потратьте $50 на головоломки, чтобы получить сюрприз!», если пользователь просматривает продукт из категории Головоломки. 

Этот небольшой элемент делает предложение более личным и актуальным — улучшая взаимодействие с пользователем и потенциал конверсии. И да — такой уровень персонализации доступен без кодирования, если у вас уже настроен ваш Data Layer.

Вызов всплывающего окна для уведомлений о поступлении товара в продажу

Заканчиваются популярные размеры или продукты? Это не обязательно должно означать потерянный доход. Этот пример показывает, как использовать всплывающее окно WordPress при нажатии, чтобы запечатлеть спрос, а не терять его.

Что заметить
Вместо перенаправления пользователя или показа тупикового сообщения кнопка открывает лайтбокс, приглашающий посетителя оставить свой email. Это делает две вещи одновременно — создаёт ожидание, что продукт вернётся, и удерживает пользователя в экосистеме бренда.

С точки зрения UX и маркетинга, это невероятно умно:

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

И все это делается с чистым модальным окном, который кажется естественной частью страницы — именно то, что вы ожидаете от хорошего плагина модального окна WordPress, а не неповоротливого редиректа или навязчивого оверлея. Это выигрывает и для пользовательского опыта, и для бизнеса. Будь то создание собственной настраиваемой формы или использование всплывающего плагина WordPress по клику, это обязательный случай использования для любого магазина, который справляется с ограниченным запасом или частыми пополнениями.

Создайте Спрос До Поступления Товара

Предзаказы — это больше, чем просто обходной путь для отсутствующих товаров — это умный инструмент для создания спроса. Этот пример показывает, как попап WordPress нажатия кнопки может быть использован для превращения ожидания в электронные лиды и ранние конверсии.

Что заметить
На продуктовой сетке один товар отмечен ярлыком «Предзаказ». Щелчок по нему не сразу добавляет продукт в корзину. Вместо этого открывается стильное всплывающее окно, предлагающее пользователям оставить свою электронную почту для получения обновлений или раннего доступа — сигнализируя о высоком спросе и эксклюзивности.

С точки зрения психологии и маркетинга, эта стратегия достигает нескольких целей:

• Она обращается к эффекту дефицита — если это не доступно сейчас, значит, это должно быть популярно.
• Она создает у клиентов ощущение осведомленности — как у инсайдеров, которые первыми получают уведомления о запуске.
• Она дает бренду чёткий показатель интереса до того, как принять решение по объему производства или логистике.
• Она избегает трения корзины — пользователи не разочаровываются, нажимая «добавить в корзину», только чтобы обнаружить, что они не могут купить.

Кроме того, попап является плавным и контекстуальным — он появляется как часть естественного потока, а не как прерывание. Это отличный пример того, как виджеты могут улучшить взаимодействие с пользователем, поддерживая вашу воронку продаж.

Если ваш магазин полагается на ограниченные партии, временные запуски или новые продукты, эта тактика позволяет создавать всплывающие окна, которые служат мини-списками ожидания — и дают вам готовую аудиторию для следующего электронного письма о запуске.

Персонализированное Всплывающее Окно с Намёком на Подарок

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

Что заметить
В этом примере с роскошными украшениями кнопка ‘Поделитесь намёком’ незаметно располагается рядом с ‘Добавить в корзину’. При нажатии она открывает мягкое, элегантное всплывающее окно, которое помогает пользователю отправить тонкий намёк близкому человеку. Нет необходимости в неудобном копировании или скриншотах — это изысканный способ сказать ‘я хочу это’ с чувством стиля.

Почему это так эффективно с точки зрения UX и маркетинга:

• Преобразует момент восхищения в действие, которым можно поделиться.
• Расширяет влияние страницы вашего продукта на второго, очень актуального человека — того, кто дарит подарки.
• Уменьшает трение — всё происходит внутри аккуратного всплывающего окна, без необходимости загружать новую страницу.
• Использует естественное поведение в дни рождения, годовщины и списки желаний — без ощущения давления на покупку.

Это настраиваемый способ объединить обаяние со стратегией — идеально для продуктов с высоким уровнем обдумывания или для тех моментов, когда посетителям просто нужна небольшая помощь, чтобы получить то, что они хотят.

Использование всплывающего окна для выделения отзывов клиентов

Если вы в сфере гостеприимства, один сияющий отзыв может снять комнату — а один негативный может лишить вас клиента. Вот почему эта стратегия всплывающих окон по клику так эффективна.

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

• Выводит общественное мнение на передний план — когда это важно (пока посетитель еще принимает решение).
• Формат всплывающего окна удерживает пользователей на текущей странице, уменьшая потерю или трение.
• Создает ощущение доверия и прозрачности, что критично в таких сферах, как отели, рестораны и мероприятия.
• Визуальный дизайн чистый и ненавязчивый — пользователи чувствуют контроль, а не засады.

Это больше, чем просто трюк для конверсии, это ориентированный на UX способ отображения всплывающего окна, который информирует, успокаивает и убеждает — без необходимости покидать страницу. Особенно в секторах, где доверие и репутация управляют бронированиями, это одна из самых простых и умных идей всплывающих окон по клику в WordPress, которые вы можете внедрить.

Получите действенные инсайты с помощью всплывающих окон, открывающихся по клику

Хотите знать, что ваши клиенты действительно думают — не прерывая их просмотр? Этот пример от The Body Shop воплощает это в жизнь.

Что стоит заметить
Незаметная кнопка ‘Обратная связь’ расположена в нижнем углу страницы. Она не кричит о себе, но всегда видна. При нажатии на нее открывается многошаговая форма во всплывающем окне, где пользователи могут быстро поделиться своим опытом. От оценки удовлетворенности до предложения улучшений — всё происходит в чистом, сфокусированном потоке. Почему это так хорошо работает с точки зрения UX, психологии и маркетинга:

• Это уважает время и пространство пользователя — они могут делиться мыслями, когда будут готовы.
• Пошаговая структура разбивает форму на мелкие действия, снижая переутомление и повышая процент завершения.
• Это поощряет честную, мгновенную обратную связь, которая более ценна, чем опросы после покупки.
• Для бренда это кладезь: нефильтрованные инсайты, которые улучшают продукты, поддержку и контент.

Если вы задаетесь вопросом, как добавить всплывающее окно по нажатию кнопки в WordPress для сбора отзывов, это идеальная модель. Это также отличный пример того, как открыть всплывающее окно по нажатию кнопки в WordPress, не нарушая путешествие — особенно когда вы хотите собрать данные, не раздражая ваших посетителей.

Пригласите покупателей присоединиться к вашей программе лояльности

Привлечь кого-то в вашу программу лояльности — это не только о бонусах — это о времени, видимости и удобстве. Этот пример делает все правильно.

На что обратить внимание
Кнопка «Программа лояльности» нежно плавает в нижней части экрана. Она заметна, но никогда не раздражает. При нажатии она открывает всплывающее окно в WordPress, давая быструю информацию о преимуществах — без захвата страницы или перенаправления. Почему это работает с точки зрения UX и маркетинга:

• Расположение кажется опциональным, но приглашающим — идеальный баланс между тонкостью и стратегией.
• Она предлагает мгновенную выгоду: пользователи могут изучить программу во всплывающем окне вместо поиска в меню.
• Она сохраняет основное путешествие непрерыванным — покупатели могут просмотреть, закрыть и продолжить просмотр за считанные секунды.
• А с точки зрения бренда, это мягкий проход, чтобы превратить случайных покупателей в лояльных фанатов.

Если вы уже используете один из лучших плагинов для всплывающих окон для WP, это такая функция, которую легко добавить — и легко полюбить покупателям. Всплывающие окна лояльности помогают оставаться в центре внимания, собирать электронные адреса и превращать случайных посетителей в постоянных клиентов — и все это без создания беспорядка на вашем сайте.

Используйте кликабельное всплывающее окно для активации вашей реферальной программы

Когда ваши клиенты любят то, что вы делаете, они захотят рассказать друзьям — вам просто нужно упростить это. Этот пример от MeUndies показывает, как сделать это правильно с помощью реферального всплывающего окна, запускаемого кнопкой.

На что обратить внимание
Тонкая вкладка «Получите $25» прилегает к краю экрана. Она не конкурирует с основным призывом к действию — вместо этого предлагает заманчивый дополнительный бонус. При нажатии она открывает чистое, фирменное всплывающее окно, приглашающее пользователей присоединиться к реферальной программе, поделиться ссылкой и получить вознаграждения. Почему это умно с точки зрения UX и маркетинга:

• Она всегда видима, но никогда не мешает — и это отличный пример дружественного к пользователю дизайна.
• Она открывается в нужный момент — по выбору, а не по прерыванию.
• Сообщение ясно, вознаграждение осязаемо, и нет трений для участия.
• — это тонкий толчок, который может превратить довольных покупателей в защитников бренда — органично.

Этот вид функции легко воспроизвести, используя плагин всплывающих окон для WordPress — просто установите вкладку на боковой панели, настройте сообщение и позвольте вашим клиентам выполнять работу по привлечению за вас. Это отличный способ поддерживать программу рекомендаций в фоновом режиме, не перегружая макет вашего сайта.

6 способов, как эффективно работают всплывающие окна по клику

Давайте более подробно рассмотрим, почему всплывающие окна WordPress, открывающиеся по клику, так эффективны.

1. Целевая аудитория теплых лидов

Такие всплывающие окна нацелены на теплых лидов — тех посетителей, которые уже проявили интерес, кликнув по ссылке или кнопке. Поскольку пользователи уже предприняли действия, они вовлечены и заинтересованы, что делает их более склонными к конверсии. Фокусируясь на этих заинтересованных посетителях, вы можете достичь более высоких коэффициентов конверсии, не тратя усилия на холодных лидов, которые могут быть не готовы совершить покупку. Этот подход помогает лучше использовать ваши ресурсы, захватывая квалифицированные лиды в идеальный момент.

2. Более высокие показатели конверсии при меньших затратах на рекламу

Всплывающие окна по клику появляются только после того, как пользователь нажмет соответствующий CTA (призыв к действию), например, "Скачать сейчас" или "Получить 10% скидку", что означает, что они показываются людям, уже заинтересованным в вашем предложении. Этот целевой подход ведет к более высоким коэффициентам конверсии, поскольку вы взаимодействуете с аудиторией, готовой к действию. Лучшее во всем этом? Поскольку больше трафика конвертируется в лиды, вы тратите меньше на рекламу, снижая стоимость лида (CPL) и максимизируя возврат инвестиций. Это умный способ оптимизировать ваш рекламный бюджет.

3. Эффективное использование трафика

Всплывающие окна WordPress по клику нацелены только на посетителей, которые предприняли действия. Вместо того, чтобы показывать общее всплывающее окно всем, вы фокусируетесь на уже вовлеченных, что увеличивает ваши шансы на конверсию. Только достигая пользователей с намерением, вы избегаете пустых показов и траты ресурсов на менее заинтересованных посетителей. Этот эффективный подход помогает вам получить больше от вашего существующего трафика, делая каждый доллар, потраченный на привлечение посетителей, более результативным и обеспечивая более высокий ROI.

4. Снижение лишних затрат на рекламу

Обеспечивая, что больший процент вашего платного трафика выполняет значимые действия (например, подписка, покупка или дальнейшее взаимодействие с контентом), вы делаете ваши расходы на рекламу более эффективными. Фокусируясь на вовлеченных посетителях, вы тратите меньше для достижения целей конверсии, снижая стоимость за привлечение. Всплывающее окно, активирующееся по клику, может стать разницей между потерей заинтересованного посетителя и его преобразованием в клиента, что гарантирует максимальную отдачу от ваших маркетинговых вложений.

5. Снижение процента отказов и ухода

Традиционные мгновенно появляющиеся всплывающие окна могут отвлекать пользователей, увеличивая показатели отказов и растрачивая ценный трафик. Напротив, всплывающие окна по клику появляются в нужный момент — когда пользователи уже вовлечены. Такое продуманное время появления помогает удерживать посетителей на вашем сайте дольше, снижая показатели отказов и обеспечивая больше шансов на конверсию. С меньшим количеством пользователей, покидающих ваш сайт, вы можете получить больше пользы от каждого посетителя, в конечном итоге снижая среднюю стоимость лиду. Это выигрышная ситуация как для вас, так и для вашей аудитории.

Если вы хотите узнать, как создать собственное всплывающее окно в WordPress, мы изложили все шаги и включили некоторые примеры, чтобы помочь вам создать привлекающие внимание всплывающие окна, которые повышают конверсии.

6. Выращивание лидов без дополнительных затрат

Когда пользователи взаимодействуют с всплывающими окнами, активирующимися по клику, и присоединяются к вашему списку email-рассылки, вы открываете дверь для nurt-введения этих лидов посредством автоматизированного email-маркетинга — подхода, который гораздо более экономичен, чем непрерывная платная реклама. Это означает, что вы можете поддерживать вовлеченность без постоянной необходимости тратиться на рекламу. Вместо этого вы можете сосредоточиться на создании email-кампаний, которые имеют более низкую стоимость на контакт. Со временем эта стратегия не только сохраняет вовлеченность вашей аудитории, но и снижает стоимость на лид, максимизируя ваш маркетинговый бюджет.

Если вы не уверены, как добавить подписку на email в WordPress, мы подробно изложили все шаги и предоставили интересные примеры, чтобы упростить процесс создания форм подписки для вас и помочь увеличить конверсии.

Дополнительные советы для всплывающих окон, запускаемых кнопкой

Запуск виджета с помощью кнопки — это эффективный способ таргетирования только заинтересованной аудитории. Вы также можете увеличить шансы на успех виджета, добавив дополнительные правила отображения. С Claspo вы можете легко настраивать такие опции, как:

• Таргетинг на определенных посетителей: Выберите показ виджетов в зависимости от местоположения посетителя, будь то новый, возвратный или даже по источнику перенаправления.
• Таргетинг на устройства: Отображение виджетов на настольных компьютерах, мобильных устройствах или обоих.
• Контроль частоты: Решите, как часто ваш виджет будет появляться — только один раз или через регулярные интервалы.
• A/B тестирование: Экспериментируйте с различными дизайнами кнопок, контентом всплывающего окна и действиями по запуску, чтобы выяснить, что лучше всего резонирует с вашей аудиторией. У Claspo есть встроенная функция A/B тестирования. Вы можете тестировать два или более виджета и получать автоматические результаты.
• Отслеживание аналитики: Используйте встроенную аналитику Claspo для мониторинга производительности всплывающих окон, отслеживания конверсий и внесения изменений на основе данных. Вы получаете данные о производительности для каждого виджета, которые постоянно обновляются и представлены в виде легко читаемых диаграмм с отдельными метриками для мобильных и настольных версий.

Как создать всплывающее окно в WordPress по нажатию кнопки с использованием HTML-кода

Если вы хотите узнать, как создать всплывающее окно в WordPress без плагинов, выполните следующие 3 шага.

Шаг 1: Создание всплывающего окна в Claspo

Прежде чем встроить всплывающее окно на свой сайт WordPress, вам нужно создать его в панели управления Claspo.

1. Создайте новый виджет всплывающего окна. В панели управления Claspo нажмите «Создать новый виджет». Выберите тип всплывающего окна, который вы хотите (например, генерация лидов, предложение со скидкой, подписка на новостную рассылку). Выберите предварительно разработанный шаблон или создайте пользовательское всплывающее окно с нуля.

2. Спроектируйте всплывающее окно. Настройте ваше всплывающее окно, изменив элементы, как объяснено в Шаге 2 Создание всплывающего окна по клику в WordPress, используя плагин Claspo.

3. Настройте триггеры всплывающего окна. В разделе Triggering установите, чтобы ваше всплывающее окно запускается по нажатию кнопки:

• Выберите основанный на клике HTML элемент.

4. Когда вы создадите кнопку на своем сайте WordPress, вам нужно будет скопировать ее CSS-селектор и вставить его в соответствующее поле в настройках виджета в Claspo.

5. Сохраните ваш виджет как черновик.

6. Чтобы отображать всплывающее окно, созданное в Claspo, на вашем сайте, необходимо установить скрипт. Это небольшой фрагмент кода, который нужно добавить на страницы, где вы хотите, чтобы появилось всплывающее окно, непосредственно перед закрывающим тегом </body>. Это не занимает много времени, а в вашем аккаунте будут подробные инструкции о том, как это сделать.

Шаг 2: Добавьте кнопку и код встраивания всплывающего окна в WordPress

Теперь, когда ваше всплывающее окно готово, следующим шагом будет добавление кнопки на вашу страницу или запись в WordPress.

Добавьте кнопку, как описано в Шаге 3 Создание всплывающего окна по клику в WordPress с использованием плагина Claspo.

1. Сначала откройте главную страницу в новой вкладке. Щелкните правой кнопкой мыши в любом месте страницы и выберите опцию «Просмотреть код» (может быть также указано «Просмотр элемента»).
2. В инструментах разработчика вы увидите две панели: левая сторона отображает иерархию HTML-элементов, а правая сторона может быть проигнорирована для этой задачи.
3. Такое расположение облегчает навигацию к нужному элементу без глубокого понимания HTML. Просто щелкните правой кнопкой мыши на желаемом элементе, и инструменты разработчика автоматически его выделят.
4. После того, как вы нашли HTML-элемент, последний шаг — скопировать CSS-селектор. Элемент ссылки будет иметь класс, поэтому найдите класс .button, который можно использовать в качестве CSS-селектора. 

Наконец, скопируйте CSS-селектор и вставьте его в соответствующее поле ввода в настройках вашего виджета.

Шаг 3: Тестирование всплывающего окна

После встраивания всплывающего окна важно протестировать его на вашем сайте в реальном времени.

1. Откройте страницу. Перейдите к живой версии страницы или записи, где вы добавили всплывающее окно, вызванное кнопкой.
2. Нажмите кнопку. Нажмите на кнопку, чтобы убедиться, что всплывающее окно отображается правильно. Проверьте, что дизайн всплывающего окна, сообщение и его поведение (например, отправка формы) работают, как ожидается.
3. Проверка адаптивности. Протестируйте всплывающее окно на различных устройствах (настольный компьютер, планшет, мобильное устройство), чтобы убедиться, что оно правильно отображается и не влияет на производительность страницы.

Заключительные слова

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

Это руководство дало вам все необходимое: от практического руководства до примеров из реальной жизни, плюс пошаговые инструкции по созданию всплывающих окон, вызываемых кликом, с использованием кода или без него. Мы даже рассмотрели, как персонализировать их, оптимизировать для различных устройств и отслеживать эффективность.

Независимо от вашей цели — от привлечения подписчиков по электронной почте до поощрения рекомендаций — вы найдете здесь варианты, выходящие за рамки основ. Попробуйте бесплатную версию Claspo, чтобы протестировать, что лучше всего подходит для вашей аудитории. Уже используете плагины подписки по электронной почте для WordPress или изучаете плагины всплывающих окон с намерением выхода для WordPress? Всплывающие окна, вызванные кнопкой, могут дополнить эти стратегии, не создавая шума.

А если вы только начинаете или хотите что-то простое в управлении, надежный плагин всплывающих окон Claspo для WordPress справится с тяжелой работой — без кодирования, без стресса, только результаты.