Интернет^(Online) -магазины сделали поиск товаров по самым выгодным ценам удобным для потребителей. Купоны оказывают значительное влияние на решения о покупке и другие формы действий, которые веб-разработчики просят включить в веб-дизайн.

90% потребителей используют купоны, ожидается, что к 2022 году погашение цифровых купонов достигнет 91 миллиарда долларов, и более 25 миллионов американцев^(Americans) ежемесячно используют купоны, чтобы сэкономить деньги.

Зачем предлагать посетителям всплывающее окно с купоном?^{(Why Offer Visitors a Coupon Popup?)}

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

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

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

Используйте OptinMonster^{(Use OptinMonster)}

Начните с создания учетной записи OptinMonster , установки и активации плагина OptinMonster для WordPress^{(plugin for WordPress)} на вашем сайте WP.

Найдите плагин на панели администратора WP, нажмите на него, а затем подключите к OptinMonster .

Создайте всплывающее окно купона с OptinMonster^{(Create a Coupon Popup with OptinMonster)}

• Войдите^(Log) в панель инструментов OptinMonster и нажмите «Создать новую кампанию»^{(Create New Campaign)} .

• В разделе «Тип кампании» выберите « Всплывающее окно^(Popup) » . На следующем экране вы увидите несколько профессионально разработанных шаблонов с различными цветами и макетами.

• Выберите шаблон купона^{(Coupon )} , чтобы создать всплывающее окно, и нажмите на него. Затем выберите « Использовать шаблон^{(Use Template)} », дайте вашей кампании имя и выберите веб-сайт, на котором вы хотите ее использовать.
• Поскольку вы уже подключили свой веб-сайт (выше), вы увидите URL -адрес своего сайта в раскрывающемся меню. 

• Выберите его и нажмите «Начать сборку»^{(Start Building)} .

Всплывающее окно с купоном на дизайн^{(Design Coupon Popup)}

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

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

Закройте элемент, нажав кнопку « Домой»^(Home) или « X » .

Наложение фона^{(Background Overlay)}

Цвет, окружающий всплывающее окно с купоном, называется фоновым наложением^{(Background Overlay)} . Чтобы отредактировать его, перейдите в «Настройки^{(Optin Settings)} Optin » > «Стили просмотра Optin^{(Optin View Styles)} » .

Вы можете изменить стиль фона^{(Background Style)} на сплошной цвет или градиентную заливку. Вы также можете добавить изображение и изменить границу.

Если вас устраивает внешний вид вашего купона, нажмите «Сохранить^(Save) » .

Как клиенты получат ваш купон?^{(How Will Customers Receive Your Coupon?)}

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

OptinMonster рекомендует немедленно доставить его, используя представление « Успех»^(Success) , а также по электронной почте. Чтобы использовать электронную почту, необходимо включить интеграцию с поставщиком услуг электронной почты.

В представлении « Успех^{(Success )} » вы также можете:

• Введите код купона, как показано на скриншоте выше.
• Перенаправьте посетителей на другую страницу, чтобы использовать купон.

Обратите внимание, что представление « Успех»^(Success) является действием кнопки по умолчанию. Если вы хотите использовать другой параметр, измените действие кнопки, выполнив следующие действия:

• Отредактируйте текст кнопки.
• Нажмите «Действие».^(Action.)

• В разделе «Действие при успешном выполнении формы»^{(Form Success Action)} щелкните раскрывающийся список, чтобы просмотреть доступные параметры. Если вы хотите перенаправить на URL -адрес , введите его в поле.

Выберите правила отображения^{(Choose Display Rules)}

Чтобы выбрать, где и когда ваши посетители увидят ваш купон, перейдите на вкладку « Правила отображения ».^{(Display Rules)}

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

Чтобы узнать больше о том, как использовать правила отображения^{(Display Rules)} , прочитайте: Как использовать правила отображения для настройки времени показа кампании^{(How to Use Display Rules to Customize When a Campaign Will Appear)} .

Другие плагины WordPress для создания всплывающих маркетинговых кампаний с купонами^{(Other WordPress Plugins For Building Coupon Popup Marketing Campaigns)}

WP предлагает другие плагины, которые помогут вам создать собственное всплывающее окно с купоном. Ниже^(Below) приведены некоторые из них.

Айсграмм^{(Icegram)(Icegram)}

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

• Войдите в свою панель управления WP.
• Нажмите « Добавить новую кампанию»^{(Add New Campaign)} из опции « Icegram » на левой боковой панели.
• Выберите один^{(Select one)} из готовых шаблонов и нажмите « Предварительный просмотр^(Preview) » .

• Если вам нравится, как он выглядит в режиме предварительного просмотра, нажмите « Использовать это^{(Use This)} » , чтобы начать настройку шаблона.
• Когда кампания откроется, нажмите « Сообщения^(Messages) » и добавьте или отредактируйте содержимое сообщения.

• Настройте^(Configure) , как и когда будет появляться всплывающее окно с купоном, нажав « Правила отображения»^{(Display Rules)} .

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

Где:^{(Where: )} выберите, где вы хотите, чтобы всплывающее окно с купоном отображалось.

• По всему сайту
• Домашняя страница
• Выбранные страницы
• Конкретные URL-адреса на вашем сайте

Когда^(When) : вы хотите, чтобы всплывающее окно отображалось постоянно или только по расписанию?

Устройство^(Device) : выберите, на каких устройствах будет отображаться всплывающее окно.

Кого^(Who) вы хотите видеть во всплывающем окне?

• Все пользователи
• Только авторизованные пользователи
• Не пользователи, которые вошли в систему

Ретаргетинг^{(Retargeting)} : хотите ли вы, чтобы всплывающее окно с купоном отображалось только один раз за каждый сеанс?

После того, как посетитель нажмет на кнопку с призывом к действию^(CTA) , вы хотите снова показать ему свое всплывающее окно или нет?

• Предварительно просмотрите форму и настройки и нажмите «Опубликовать»^(Publish) , когда все будет хорошо выглядеть.

Создатель купона^{(Coupon Creator)(Coupon Creator)}

Создайте собственное всплывающее окно с купоном с помощью плагина Coupon Creator WP .

Coupon Creator использует настраиваемый тип сообщений и требует лишь настройки нескольких параметров. Бесплатная версия позволяет пользователям отображать и распечатывать купоны для клиентов.

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

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

• Чтобы создать купон, скачайте и установите плагин. Отредактируйте стандартный купон^{(Standard Coupon)} или добавьте новый.
• Сгенерируйте шорткод купона из средства вставки шорткодов редактора WP.

• Вставьте свое предложение в поле «Сделка». ^{(Deal. )}Введите^(Enter) условия купонной сделки в разделе Условия.^(Terms.)
• Чтобы использовать купон, вставьте шорткод на любую страницу или публикацию, где вы хотите, чтобы он отображался. Если вы назначите дату истечения срока действия, купон больше не будет отображаться после установленной вами даты истечения срока действия.

Полный список плагинов всплывающих окон с купонами WP можно найти на WordPress.org^{(visit WordPress.org)} . Расширьте свой список адресов электронной почты, увеличьте количество подписчиков в социальных сетях и увеличьте продажи, создав собственное всплывающее окно с купоном на своем сайте WP.

How To Create Your Own Coupon Popup in WordPress

Оnline shopping has made it convеnient for consumers to sеarch for the best prices. Coupons havе a significant impact on purchasing decisions and other fоrms of action that web dеvelоpers are asked to incorporate into web design.

90% of consumers use coupons, digital coupon redemption is expected to reach $91 billion by 2022, and over 25 million Americans use coupons monthly to save money.

Why Offer Visitors a Coupon Popup?

Savvy site owners know that offering customers a discount via a coupon is a powerful way to entice them to make a purchase.  

Everyone loves a great deal. Offering coupons helps brands increase website activity, increase site conversions, and recover and convert abandoned carts.

As WordPress (WP) is the most popular content management system, this article will provide a step-by-step guide on how to create a WP coupon popup.

Use OptinMonster

Start by creating an OptinMonster account, installing, and then activating the OptinMonster plugin for WordPress on your WP site.

Find the plugin in your WP admin dashboard, click on it, and then connect it with OptinMonster.

Create a Coupon Popup with OptinMonster

• Log into the OptinMonster dashboard and click Create New Campaign.

• From the Campaign Type, select Popup. The next screen will show you several professionally designed templates in various colors and layouts.

• Choose the Coupon template to create a pop up and click on it.  Then select Use Template, give your campaign a name and choose the website where you want to use it.
• Since you already connected your website (above), you will see your site URL listed in the drop-down menu. 

• Select it and click on Start Building.

Design Coupon Popup

Use the drag and drop builder to change the design, text, and colors of your coupon.

To change an element in the design, click on it. Make your edits on the left-hand side, and they will show on the preview popup on the right.

Close an element by clicking the Home button or the X.

Background Overlay

The color surrounding your coupon popup is called the Background Overlay. To edit it, go to Optin Settings > Optin View Styles.

You can change the Background Style to a solid color or gradient fill. You can also add an image and change the border.

Once you are happy with how your coupon looks, click Save.

How Will Customers Receive Your Coupon?

After you have finished designing your coupon popup, you must decide how to get the coupon to your customers.

OptinMonster recommends delivering it immediately using their Success view as well as by email. To use email, you must enable your email service provider integration.

In the Success view, you can also:

• Include the coupon code as in the screenshot above.
• Redirect visitors to a different page to redeem the coupon.

Note that the Success view is the default button action. If you want to use a different option, change the button action by following the steps below:

• Edit the button text.
• Click on Action.

• Under Form Success Action, click the dropdown to see available options. If you want to redirect to a URL, type it into the field.

Choose Display Rules

To select where and when your visitors will see your coupon, go to the Display Rules tab.

You can use different types of content, campaigns and exclusive offers on each page. 

To learn more about how to use Display Rules, read: How to Use Display Rules to Customize When a Campaign Will Appear.

Other WordPress Plugins For Building Coupon Popup Marketing Campaigns

WP offers may other plugins to help you create your own coupon popup. Below are a few of them.

Icegram

Download and install the WP plugin Icegram to create visually appealing custom opt-ins and calls to action using the steps below:

• Log into your WP dashboard.
• Click on Add New Campaign from the Icegram option in the left-hand sidebar.
• Select one of the pre-made templates and click on Preview.

• If you like what it looks like in preview mode, click Use This to start customizing the template.
• When the campaign opens, click on Messages and add or edit your message content.

• Configure how and when your coupon popup will appear by clicking on Display Rules.

The popup display options are:

Where: Choose where you want the coupon popup to show.

• Sitewide
• Homepage
• Selected pages
• Specific URLs on your site

When: Do you want the pop up to show all the time or only as scheduled?

Device: Choose which devices will show the popup.

Who do you want to see the popup?

• All users
• Only logged in users
• Not users who are logged in

Retargeting: Do you want your coupon popup to show only once for each session?

After a visitor clicks on a CTA, do you want to show them your popup again or not?

• Preview your form and settings and click Publish when it looks good.

Coupon Creator

Create your own coupon popup with the Coupon Creator WP plugin.

Coupon Creator uses a custom post type and only requires configuring a few settings.  The free version enables users to display and print coupons for customers.

One of the free templates shows an image on the inside border of the coupon. The default free template has a space on the coupon for the deal, terms, and expiration date of the offer.

If you are looking for more features, there is also a pro version.

• To create a coupon, download and install the plugin. Edit the Standard Coupon or add a new one.
• Generate a coupon shortcode from the WP editor shortcode inserter.

• Insert your offer under Deal. Enter your terms for the coupon deal under Terms.
• To use the coupon, insert the shortcode on any page or post where you want it to show. If you assign an expiration date, the coupon will no longer be visible beyond the expiration date you set.

For a full list of WP coupon popup plugins visit WordPress.org. Grow your email list, increase your social media followers, and increase sales by creating your own coupon popup on your WP site.

Related posts

• Как переместить WordPress site от одного хоста на другой

• Как установить и настроить WordPress на Microsoft Azure

• Как бегать восколы быстро WordPress на Microsoft Azure

• Как настроить Privacy в WordPress и почему это важно

• Как установить WordPress на Google Cloud Platform

• Wix против WordPress: что лучше для создания вашего сайта?

• Как установить тестовый сайт WordPress на свой компьютер

• Как сделать резервную копию вашего сайта WordPress

• Must Have WordPress Yoast SEO Settings 2021

• Как проводить эффективные сплит-тесты в WordPress

• Squarespace против WordPress: какая платформа сайта лучше?

• Как проверить, заблокирован ли веб-сайт из AdSense

• WordPress показывает HTTP Error при загрузке изображений

• Как ускорить сайт WordPress за 11 шагов

• Учебное пособие по WordPress Gutenberg: как использовать новый редактор

• Как обновить PHP в WordPress

• Как перейти от классического редактора WordPress к Gutenberg

• Как защитить паролем страницы на вашем сайте WordPress

• Protect и закрепите WordPress website от хакеров

• Рецензия на книгу: Создайте свой собственный веб-сайт: шуточное руководство по HTML, CSS и Wordpress