Как создавать и добавлять всплывающие окна в WordPress

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

В этом руководстве мы пошагово покажем, как создавать пользовательские виджеты в нашем конструкторе всплывающих окон для WordPress и расскажем, как именно добавить всплывающее окно на сайты WordPress. Мы также поделимся советами, которые помогут вам увеличить конверсии (подписки на новости, регистрации, продажи и т. д.) на 110%, что подтверждается результатами наших клиентов. Итак, приступим!

Преимущества использования плагина всплывающих сообщений в WordPress

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

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

Централизованное управление. Используя плагин всплывающих окон, все функции вашего сайта, включая всплывающие окна, управляются из панели управления WordPress. 

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

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

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

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

Как создать и добавить всплывающую форму в WordPress (6 простых шагов с Claspo)

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

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

Хотите доказательства? Давайте создадим всплывающую форму для WordPress всего за несколько шагов. 

Шаг 1: Выберите шаблон — экономьте время и бюджет

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

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

Шаг 2: Настройте любую деталь виджета

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

Выберите цвета и стиль

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

Однако в редакторе Claspo вы легко можете настроить цвет и стиль:

• кнопок призыва к действию,
• заголовков,
• текста основного содержания,
• иконки закрытия,
• фона и так далее.

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

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

Добавление изображений во всплывающее окно для WordPress

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

• PNG 
• JPEG 
• SVG 
• GIF
• WebP
• AVIF

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

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

Наслаждайтесь видеоплеером во всплывающем окне WordPress

Хотите узнать, как создать всплывающую страницу в WordPress, воспроизводящую видео? С Claspo, вы можете сделать это всего за пару кликов. Просто добавьте ссылку на видео с YouTube, и она появится во всплывающем окне.

Для воспроизведения видео можно выбрать воспроизведение по инициативе пользователя (клик пользователя) или автозапуск.

Важное замечание: Автозапуск по умолчанию будет отключать звук видео из-за ограничений браузера на автоматическое воспроизведение звука. Пользователи могут включить звук в любое время.

Включите мультиязычность: говорите на языке ваших клиентов

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

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

Используйте эффективные элементы

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

Относительный таймер обратного отсчёта

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

Встроенный промокод

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

Виджет-слайдер

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

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

Опрос перед выходом 

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

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

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

Запуск для Начала Всплывающего окна 

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

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

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

Шаг 3: Настройка правил отображения и таргетинга

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

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

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

Уникальные характеристики Claspo для ненавязчивого отображения

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

Интервал тишины.

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

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

Варианты таргетинга

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

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

Геотаргетинг. Настройте виджеты для определенных аудиторий: от целых стран до регионов и городов. 

Таргетинг по UTM. Если вы используете UTM-метки в различных кампаниях и рекламных сообщениях, добавьте их при настройке виджета. Затем он будет появляться только для тех посетителей, которые пришли на сайт из определенного источника трафика.

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

Шаг 4: Интегрируйте плагин Claspo с вашим маркетинговым программным обеспечением

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

Интеграция Claspo с любой маркетинговой системой, которую вы используете через Zapier, так же проста.

Шаг 5: Легкая интеграция Claspo с WordPress

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

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

1. Во время настройки, когда вы готовы публиковать виджет, выберите Установить через WordPress в окне Перед публикацией виджета.

Пропустили этот шаг? Нет проблем. Просто перейдите в Скрипт → Установить скрипт в вашем аккаунте Claspo, прокрутите до WordPress и нажмите Установить.

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

3. Теперь нужно загрузить файл плагина Claspo.

4. В своей панели управления WordPress перейдите в Плагины → Загрузить плагин, затем загрузите скачанный файл.

Вы можете перетащить его в выделенную область или выбрать вручную и нажать Открыть.

5. После завершения установки в меню слева появится Claspo.

6. Нажмите Claspo, вставьте ID скрипта, который вы скопировали ранее, в поле Введите ID скрипта и нажмите Подключить.

7. Готово! Скрипт Claspo теперь активен на всех страницах вашего сайта.

Хотите убедиться? Вернитесь к окну Установка скрипта с помощью WordPress в вашем аккаунте Claspo и нажмите Проверить, чтобы подтвердить, что все работает правильно.

Скрипт будет автоматически добавлен на все страницы вашего сайта. Это так просто!

Шаг 6: Тестирование и публикация формы

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

Как легко преодолеть трудности с всплывающими окнами в WP

Создание и интеграция различных всплывающих окон часто является вызовом для владельцев сайтов на базе WordPress и маркетологов, занимающихся email-рассылками. Эти вызовы включают поддержание визуальной привлекательности, привлечение пользователей, не создавая при этом навязчивости, использование модальных окон WordPress для подписки без отвлечения от основной конверсии, работу с многоязычной аудиторией и многое другое. Мы предлагаем лучшие решения для всех этих задач. Кроме того, все наши пользователи получают доступ к расширенным функциям, таким как встроенное A/B тестирование. С его помощью можно экспериментировать с такими параметрами, как: расположение (на всем сайте или на конкретной странице), CTA, копирайтинг, дизайн элементов, триггеры (задержка по времени, намерение к выходу, триггер по клику и так далее).

Создание потрясающих всплывающих окон, которые соответствуют бренду вашего сайта, занимает всего шесть шагов и несколько минут. Попробуйте Claspo сегодня и убедитесь, что создание и управление всплывающими окнами в WordPress никогда не было проще и эффективнее. Особенно учитывая, что наша версия с пожизненной бесплатностью не ограничивает вашу креативность, а наоборот стимулирует стремительный успех. Все шаблоны и расширенные возможности, такие как A/B тестирование или элементы геймификации, которые доступны только в премиальных версиях других сервисов, открыты пользователям нашего бесплатного плана. Так что, выбирайте шаблон всплывающего окна и легко создавайте свое всплывающее окно!