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

Ищете способ создать всплывающее окно с лайтбоксом для своего сайта?

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

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

Хорошая новость: есть гораздо более простой способ.

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

Давайте погрузимся.

Что такое всплывающее окно с лайтбоксом?

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

Изначально концепция лайтбоксов пришла из наружной рекламы:

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

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

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

Но почему они работают?

Давайте кратко рассмотрим основные причины, по которым всплывающие окна с лайтбоксами работают так хорошо.

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

Большинство людей считают, что давать своим клиентам множество вариантов — это здорово.

Но это не совсем так.

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

Так что, естественно, коэффициенты конверсии довольно высоки.

№ 2. Всплывающие окна с лайтбоксами невозможно игнорировать

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

Это особенно верно, если они анимированы:

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

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

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

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

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

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

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

№ 4. Всплывающие окна с лайтбоксами могут фиксировать уход посетителей

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

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

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

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

OptinMonster — это набор инструментов для конвертации №1 в мире, и мы сами использовали его. OptinMonster позволяет очень просто создавать мощные всплывающие окна, которые конвертируют. И вам вообще никогда не придется использовать какое-либо кодирование.

Мы даже написали полный обзор OptinMonster.

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

Шаг № 1: Создайте кампанию

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

Выберите тип кампании Lightbox Popup :

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

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

Кроме того, в зависимости от вашего плана, вы также можете использовать OptinMonster на нескольких сайтах. Итак, выберите веб-сайт, на котором вы также хотите отображать свою кампанию.

Нажмите «Начать строительство» , когда закончите.

Шаг № 2: отредактируйте всплывающее окно

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

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

Затем настройте текст и внешний вид кнопки, чтобы создать четкий призыв к действию:

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

Шаг № 3: Установите правила отображения

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

Мы рекомендуем изменить условие триггера на намерение выхода:

Щелкните Следующий шаг , чтобы выбрать действие . Здесь мы рекомендуем вам установить для параметра Показать вид кампании значение Optin View, установить для показа с MonsterEffect любую анимацию входа, которая вам нравится, и воспроизвести звуковой эффект для любого звукового эффекта для вашего всплывающего окна.

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

Шаг № 4: Настройте интеграцию с электронной почтой

Следующий шаг — настроить интеграцию с электронной почтой. Нажмите « Добавить новую интеграцию » на вкладке « Интеграции » и выберите поставщика услуг электронной почты:

Мы рекомендуем использовать Drip для маркетинга по электронной почте, если у вас еще нет поставщика услуг электронной почты.

Шаг № 5: Опубликуйте всплывающее окно с лайтбоксом

Когда вы создаете новую кампанию, она по умолчанию приостановлена .

Перейдите на вкладку « Публикация » в верхнем меню, чтобы увидеть параметры публикации . Затем установите статус « Опубликовано » и выберите платформу сайта:

Если вы используете сайт WordPress, плагин OptinMonster автоматически выполняет остальную часть настройки. То же самое для Shopify и BigCommerce. Для любого другого сайта нажмите Любой сайт и вставьте код для встраивания в заголовок вашего сайта:

И вы сделали!

Подведение итогов

На этом все, ребята!

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

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

Не убежден? Ознакомьтесь с этими ресурсами:

• 7 умных стратегий для повышения вовлеченности клиентов
• Эффективны ли push-уведомления? 7 статистических данных + 3 экспертных совета
• Как настроить push-уведомления о брошенной корзине (простое руководство)

Мы рекомендуем использовать PushEngage для создания кампаний push-уведомлений. PushEngage — программа для push-уведомлений №1 в мире. Итак, если вы еще этого не сделали, начните работу с PushEngage уже сегодня!