Categories: Начинающим

Как создать всплывающее окно купона в WordPress (пошаговая инструкция)

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

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

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

^

Почему вы должны предложить посетителям купон?

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

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

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

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

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

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

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

Мы используем OptinMonster на наших собственных веб-сайтах, и он был создан основателем WPTec Сайедом Балхи. С момента запуска в 2013 году он сейчас используется на более чем 1 миллионе веб-сайтов.

Во-первых, вам необходимо посетить веб-сайт OptinMonster, чтобы создать учетную запись.

После этого вам необходимо установить и активировать плагин OptinMonster на вашем сайте WordPress. Для получения более подробной информации, смотрите наше пошаговое руководство по установке плагина WordPress.

Плагин действует как соединитель между вашей учетной записью OptinMonster и вашим сайтом WordPress.

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

^

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

Создание всплывающей кампании вашего купона

Просто войдите в свою панель управления OptinMonster и нажмите кнопку «Создать новую кампанию».

^

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

^

На следующем экране вам будет предложено выбрать шаблон.

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

Вы можете использовать окно поиска, чтобы найти шаблон купона, или вы можете прокрутить страницу вниз.

^

Далее нажмите на шаблон и выберите «Использовать шаблон».

^

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

Если вы уже подключили OptinMonster к своему сайту WordPress, тогда имя и URL этого сайта будут отображаться под заголовком. На каких веб-сайтах вы хотите загрузить эту кампанию?

^

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

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

^

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

^

Вы можете изменить любой текст таким же образом. Возможно, вы захотите поэкспериментировать с разными шрифтами и цветами.

Вне текста и элементов всплывающего окна вы также можете изменить цвет фона и другие параметры.

Сначала закройте элемент, на котором вы находитесь, нажав кнопку X или кнопку «Домой».

^

После этого зайдите в Настройки Optin »Стили Optin View.

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

Мы использовали палитру цветов, чтобы изменить фон на ярко-желтый.

^

Здесь вы также можете добавить изображение к своему купону, если хотите его использовать.

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

^

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

Вот наша новая версия с более узкой границей.

^

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

^

Решите, как доставить код купона

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

Есть несколько способов сделать это в OptinMonster, но лучший способ – сразу же доставить код купона через представление «Успех» в OptinMonster и отправить его по электронной почте.

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

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

^

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

Интеграция OptinMonster с вашим списком адресов электронной почты

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

OptinMonster интегрируется практически со всеми крупными поставщиками услуг почтового маркетинга.

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

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

Если вы застряли, взгляните на полные инструкции от OptinMonster.

Бонусный совет: отредактируйте шаблон представления успеха

Вы можете просмотреть и изменить шаблон «Успешный просмотр», вернувшись на вкладку «Дизайн» своей кампании и щелкнув параметр «Успех».

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

^

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

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

^

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

^

Опубликуйте всплывающий купон

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

Прокрутите вниз до платформы и выберите WordPress. Затем вы увидите инструкции о том, как разместить свою кампанию в прямом эфире на своем сайте.

^

Создание Spin-to-Win Coupon Wheel

Колесо купона «Спин-выигрыш» – отличный способ сделать ваши купоны более интересными для посетителей вашего сайта. Это как мини-игра, в которую посетители могут играть, чтобы выиграть скидку или другой бонус.

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

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

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

Затем нажмите, чтобы создать новую кампанию.

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

^

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

^

Затем вам нужно будет дать название своей кампании и выбрать, на каком веб-сайте ее использовать.

Затем, продолжайте и редактируйте любой аспект вашего колеса купона. Чтобы отредактировать параметры на самом колесе купона, вам нужно нажать на него, а затем нажать кнопку «Изменить разделы колеса» с левой стороны.

^

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

^

Обратите внимание, что вероятность выигрыша определяется автоматически. Если вы поменяете тумблер на одну или несколько побед Can? параметры, вы увидите процентную вероятность выигрыша изменить.

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

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

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

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

 

writer

Recent Posts

Плагин Delete Me для WordPress помогает владельцам веб-сайтов предоставить право на забвение GDPR

Поскольку до крайнего срока соблюдения GDPR ЕС осталось всего 178 дней , многие владельцы сайтов…

2 года ago

Команда Gutenberg наращивает юзабилити-тестирование в WordCamp US

Команда Gutenberg создаст станцию ​​тестирования удобства использования в WordCamp US, где посетители смогут принять участие…

2 года ago

Плагин распространителя теперь в бета-версии: новое решение для синдикации контента WordPress от 10up

Сегодня компания 10up опубликовала предварительную версию своего плагина Distributor , нового решения для синдикации контента…

2 года ago

Gutenberg 1.8 добавляет большую расширяемость для разработчиков плагинов

На этой неделе был выпущен Gutenberg 1.8 с несколькими заметными улучшениями, которые предоставят разработчикам плагинов…

2 года ago

Gutenberg 15.5 представляет экспериментальную поддержку разметки сетки

На этой неделе был выпущен Gutenberg 15.5 с новыми функциями и улучшениями возможностей полнофункционального редактирования…

2 года ago

DesktopServer 3.8.4 включает подарок сообществу

DesktopServer выпустил версию 3.8.4 своего программного обеспечения для локальной разработки. Эта версия включает в себя…

2 года ago