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

/

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

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

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

Как создать всплывающее окно купона в WordPress - на изображении показан тег скидки

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

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

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

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

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

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

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

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

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

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

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

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

Подключите OptinMonster к своему сайту

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

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

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

Создайте новую кампанию OptinMonster, чтобы начать создавать всплывающее окно с купоном

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

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

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

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

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

Прокрутите вниз и выберите шаблон купона для всплывающего окна.

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

Выберите «Использовать шаблон» из двух вариантов, отображаемых при нажатии (второй - «Предварительный просмотр»).

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

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

Назовите всплывающую кампанию с купонами и выберите сайт, на котором она будет запущена.

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

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

Дизайн всплывающего купона по умолчанию с заголовком Получите скидку 25% на продукт X

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

Редактирование текста для всплывающего купона: теперь заголовок гласит: Получите скидку 25% на мои электронные книги.

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

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

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

Закройте текущий элемент, который вы редактируете, во всплывающем купоне.

После этого перейдите в «Настройки включения» »« Стили просмотра параметров ».

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

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

Изменение цвета фона вашего купона

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

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

Как изменить настройки границы всплывающих купонов

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

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

Изменение пунктирной границы всплывающих купонов

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

Сохраните кампанию с всплывающими купонами

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

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

В OptinMonster есть несколько способов сделать это, но лучший способ - доставить код купона сразу через представление OptinMonster Success, а также отправить его по электронной почте.

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

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

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

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

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

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

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

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

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

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

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

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

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

Просмотр и редактирование представления Успех

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

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

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

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

Настройка правила отображения для использования Exit-Intent

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

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

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

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

Создание колеса купонов Spin-to-Win

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

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

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

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

Затем нажмите «Создать новую кампанию».

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

Выберите полноэкранный режим для своей новой кампании

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

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

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

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

кнопка Edit Wheel Sections

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

Таблица, показывающая варианты вращения для выигрыша колеса и процентные шансы

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

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

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

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

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

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как исправить ошибку уже существующей папки назначения в WordPress

Вы видите ошибку "Целевая папка уже существует" в WordPress? Эта ошибка обычно возникает во время установки темы или плагина, что не позволяет завершить

Как добавить анимированные GIF в WordPress

Вы хотите добавлять анимированные GIF-файлы в сообщения блога WordPress? Иногда, когда вы добавляете анимированный GIF в WordPress, он теряет анимацию и отображается

Как встроить видео из Facebook в WordPress

Вы хотите встроить видео из Facebook в WordPress? В связи с недавней популярностью платформ Facebook Live и Facebook для видео, некоторые из наших пользователей спросили,

Как отобразить Twitter и Facebook автора на странице профиля

Вы хотите, чтобы ссылки вашего автора на Twitter и Facebook отображались на странице его профиля WordPress? По умолчанию на странице профиля пользователя WordPress