Создание всплывающего окна в WordPress без плагинов

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

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

Различные способы создания всплывающего окна в WordPress без плагина

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

Вариант 1: Как создать всплывающее окно в WordPress без плагина

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

Что делает этот вариант таким удобным для новичков, так это количество действий, которые можно выполнить, не прописывая ни единой строки кода:

• Вы получаете доступ к полной библиотеке шаблонов с профессионально разработанными макетами. Просто выберите тот, который соответствует стилю вашего сайта.
• Редактор перетаскивания позволяет легко настраивать тексты, цвета, изображения и даже добавлять пользовательские поля в вашу форму — навыки дизайна не требуются.
• Вы можете настроить триггеры: показывать ваше всплывающее окно с задержкой, при прокрутке, сделать всплывающее окно в WordPress по клику или при выходе с сайта.
• Встроенные настройки целевой аудитории позволяют персонализировать просмотр всплывающего окна — например, для новых и возвращающихся посетителей, посетителей из определенных стран (геотаргетинг) или покупателей с товарами в корзине.
• Вы даже можете проводить A/B тесты, чтобы определить, какая версия вашего всплывающего окна работает лучше всего.
• Масштабируемость: простое управление множеством виджетов на разных сайтах, идеально подходит для агентств или маркетологов, управляющих несколькими проектами.

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

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

Когда имеет смысл выбрать этот вариант:

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

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

Вариант 2: Всплывающее окно в WordPress без плагина с использованием пользовательского кода

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

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

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

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

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

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

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

• Полный контроль над поведением и дизайном всплывающего окна
• 100% хранится на вашем собственном сайте без внешних сервисов.
• Нет необходимости копировать код для встраивания или интегрировать сторонние инструменты.

Минусы использования пользовательского кода:

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

5-минутное руководство по добавлению модального окна в WordPress без плагина

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

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

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

А теперь давайте посмотрим, как это работает.

Шаг 1: Зарегистрируйтесь и начните создавать 

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

После входа в систему нажмите на кнопку "Новый виджет" и давайте добавим подписку по электронной почте в WordPress. 

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

Шаг 2: Выберите шаблон

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

Шаг 3: Настройте ваш виджет

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

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

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

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

Шаг 4: Предварительный просмотр вашего виджета

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

Шаг 5: Установите триггеры и настройки запуска

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

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

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

Шаг 6: Настройте ваши интеграции

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

Вы также можете подключить Claspo к Google Analytics, чтобы отслеживать эффективность ваших всплывающих окон.

Шаг 7: Установите скрипт

Теперь, часть, которую вы так ждали: установка скрипта. 

Все, что вам нужно сделать, это скопировать и вставить код из вашего аккаунта Claspo непосредственно перед закрывающим тегом </body>.

Есть также другой способ добавить всплывающее окно в WordPress без плагина. Если у вас установлен код Google Tag Manager (GTM) на вашем сайте WordPress, вы можете добавить скрипт Claspo в тег в GTM. После этого вы можете запустить на своем сайте программное обеспечение виджета веб-страницы Claspo.

После установки, проверьте функциональность скрипта, и вы готовы! Команда поддержки Claspo может помочь вам, если у вас возникнут какие-либо проблемы.

10 Примеров высоко конвертирующих всплывающих окон для вашего сайта на WordPress

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

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

1. Всплывающее окно с предложением скидки при выходе

Представьте себе, что пользователь просматривает ваш интернет-магазин и собирается уйти без покупки. Именно тогда пригодится всплывающее окно при выходе с сайта. Этот тип всплывающего окна определяет, когда мышь пользователя двигается в сторону кнопки закрытия или адресной строки и запускает предложение — например, «Подождите! Получите скидку 15% на первую покупку.»

Попробуйте этот шаблон

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

2. Всплывающее окно улучшения контента, активируемое прокруткой

Превращающееся по прокрутке всплывающее окно появляется, когда пользователь прокручивает 50-70% страницы, например, блога. Например: «Нравится эта статья? Получите наш полный гид в формате PDF. Подпишитесь, чтобы скачать.» Такой подход эффективен, поскольку он появляется в момент пикового интереса. Если читатели находят ваш контент полезным, они, скорее всего, увидят ценность в получении большего.

Попробуйте этот шаблон

3. Всплывающее окно с предложением бесплатной доставки

Эти всплывающие окна настроены на появление через некоторое время после того, как пользователь провел на вашем сайте, обычно через 20-30 секунд. Представьте себе: "Получите бесплатную доставку на первый заказ! Введите ваш email, чтобы получить предложение."

Попробуйте этот шаблон

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

4. Всплывающее окно, активируемое кликом, для захвата лидов

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

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

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

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

5. Игровое всплывающее окно с колесом

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

Оно может выглядеть так: «Крути, чтобы выиграть! Введите ваш email, чтобы получить шанс выиграть скидки или подарки!» Люди любят игры, и возможность выигрыша делает всплывающее окно менее похожим на маркетинговый ход и больше на возможность. Такой игровой подход увеличивает уровень взаимодействия пользователей.

Попробуйте этот шаблон

6. Всплывающее окно при уходе из корзины

Эти всплывающие окна предназначены для пользователей, которые добавляют товары в корзину, но собираются покинуть страницу. Такое сообщение, как «Не уходите! Завершите покупку сейчас и получите 10% скидку», может быть здесь эффективным. Проблема ухода из корзины — серьезный вызов в электронной коммерции. Исследование Baymard Institute показывает, что 69,99% корзин в интернете остаются брошенными, но стратегии восстановления, такие как предложение скидки, могут вернуть 10-15% потерянных продаж.

Попробуйте этот шаблон

7. Приветственное всплывающее окно с эксклюзивным предложением

Приветственные поп-апы появляются, когда посетитель впервые заходит на ваш сайт, предлагая что-то ценное сразу, например, «Присоединяйтесь к нашему списку VIP-предложений и получите 20% скидку на первый заказ!» Это помогает захватить электронные адреса первых посетителей, которые могут еще не быть готовы что-то купить, но проявляют интерес, чтобы подписаться.

Попробуйте этот шаблон

8. Всплывающее окно социального доказательства

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

Представьте, что вы просматриваете онлайн-магазин, и появляется небольшое всплывающее окно с надписью: «Кто-то только что купил этот товар 5 минут назад!» Вы можете подумать: «О, люди активно покупают это. Должно быть, это хорошо!» Этот небольшой толчок может вдохновить вас сделать покупку.

Попробуйте этот шаблон

9. Таймер обратного отсчета всплывающее окно

Попапы с обратным отсчетом создают ощущение срочности, устанавливая для посетителей ограниченное время, что побуждает их немедленно действовать. Например: "Завершите заказ в течение следующих 20 минут, используя промокод ниже, и получите скидку 5% на все товары в вашей корзине!" Эта стратегия эффективно использует психологический принцип дефицита, когда ограниченное время создает чувство срочности.

Попробуйте этот шаблон

Наши данные показывают, что ограниченные по времени предложения могут увеличить продажи на 332%. Это в значительной степени связано с боязнью упустить что-то важное (FOMO), которая заставляет пользователей принимать быстрые решения, чтобы не упустить сделку.

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

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

10. Всплывающее окно с опросом/викториной

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

Используйте этот шаблон

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

Заключительные слова перед началом

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

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

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

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

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