Предлагаем вам подборку 5 самых интересных, на наш взгляд, интернет-сервисов для создания интерактивных всплывающих окон (pop-up), которые используются в интернет-маркетинге уже более 20 лет и остаются популярными до сих пор. Причиной популярности всплывающих окон является четкая ориентированность на потребности конкретного пользователя — вы даете посетителю вашего сайта только то, что ему действительно нужно, именно в тот момент, когда это необходимо. Однако при подготовке pop-up окон важно комплексно подойти к процессу — от выбора онлайн-сервиса, до определения времени жизни всплывающего окна.
Сервис Optimonk
Optimonk предлагает глубочайшие, профессиональные настройки. Если в нём хорошо разобраться, можно получить потрясающие результаты. Он имеет несколько тарифных планов, которые стартуют от $29/месяц, но предлагает 14-дневный бесплатный тестовый период.
Устанавливается скрипт просто. Нужно зарегистрироваться на optimonk.com. Выбрать там подходящий шаблон всплывающего окна и отредактировать его по своему желанию. Для редактирования всплывающего окна предлагается простой редактор. Также это можно сделать, изменив код CSS либо javascript. Чтобы изменить фразу, ее нужно выделить мышкой и отредактировать.
Предлагаются готовые цветовые решения, но можно установить собственный тон. Также можно выбрать подходящую анимацию. Полезным будет добавить всплывающее благодарственное окно, которое автоматически будет всплывать после заполнения и отправки пользователем формы. После сохранения настроек, нужно установить расписание и выбрать необходимые триггеры, то есть события, которые будут провоцировать появление поп-апа.
В данном сервисе настраивается таргетинг и производится интеграция с популярнейшими CRM-системами и e-mail сервисами (зарубежными). После сохранения всех установок останется только полученный код скопипастить в шаблон сайта в самом конце страницы, перед тегом. Заключительный этап установки — нажатие кнопки OK, что активирует кампанию. Дальше Вы сможете управлять своим Pop-up в персональном кабинете.
Достоинства Optimonk:
Недостатки Optimonk:
Сервис Picreel
Неплохой платный сервис с расширенными возможностями для работы профессионалов интернет-маркетинга. При оплате за 12 мес. — скидка в 25%.
После регистрации на picreel.com, нужно выбрать подходящий шаблон:
Любой шаблон можно редактировать в несложном редакторе или меняя HTML/CSS. Дизайн меняется так же легко, как и добавляются новые поля. Можно вставлять анимацию, таймер обратного временного отсчета и другие интерактивные элементы. Как обычно, настраиваются триггеры, после чего настройки сохраняются и сгенерированный код вставляется в шаблон веб-сайта в конце страницы.
Достоинства Picreel:
Недостатки Picreel:
Достоинства Witget:
Недостатки Witget:
Преимущества Addthis:
Недостатки Addthis:
Сервис Sumome
Стоимость полнофункциональных тарифов стартует от $40/месяц, хотя есть и бесплатный, в котором предусмотрены базовые функции. Сервис хорош тем, что кроме всплывающих окон, вы можете приобрести там множество разнообразных виджетов, которые будут весьма полезны интернет маркетологам. После регистрации на sumome.com нужно указать URL вашего ресурса. Появившийся код нужно скопировать в шаблон на своем сайте сразу после тега. Затем нужно перейти на свой ресурс и щелкнуть по изображению короны, которая должна появиться вверху экрана справа.
Далее жмёте по иконке «Sumo Store» и выберите приглянувшийся виджет, часть виджетов бесплатны и помечены меткой Free. Щелкнув по кнопке с виджетом, нужно подождать, пока он установится и настроить его вид. В полных версиях можно добавлять поля любой формы. В бесплатной версии можно использовать только 1 поле — для ввода e-mail. На бесплатном тарифе вы не сможете использовать готовые шаблоны, там он доступен лишь один, и в нём можно поменять лишь цвет фона.
Далее нужно настроить поведение поп-апа и выбрать страницы, где он будет всплывать. Затем выбрать CRM- и Email Service для синхронизации с вашим подписным листом. Собственную форму в полных версиях можно создавать в HTML-редакторе. После настроек всех параметров, остается нажать SAVE и можно начинать следить за статистикой.
Достоинства Sumome:
Недостатки Sumome:
Подведем итоги.
Мы рекомендуем начать использовать pop-up окна с бесплатных сервисов, посмотреть реакцию пользователей, конверсию и отклик, и только потом приобрести платную подписку. Таким образом вы сможете оценить эффективность всплывающих окон и успеете подобрать нужную стратегию продвижения. Попробуйте несколько площадок, используйте весь арсенал инструментов для создания pop-up окон, таким способом вы сможете извлечь максимум из возможностей, которые предоставляют всплывающие окна.
Надеемся, данная подборка будет вам полезна в деле создания полнофункционального сайта!
Статья, в которой рассмотрим, как на сайт установить всплывающую форму обратной связи с капчей и возможностью прикрепления к ней файлов.
Данная форма - это проект с исходным кодом, который расположен на GitHub по адресу: https://github.com/itchief/feedback-form-in-modal .
Предыдущие исходные коды проекта, который был выполнен на Bootstrap 3, можно скачать с GitHub по этой ссылке .
Характеристики формы обратной связиПредставленная форма выполнена с использованием комопнентов Bootstrap 4 и jQuery. Серверный код фомы написан на PHP.
Другие характеристики формы:
Основные действия по подключению формы обратной связи.
Открыть форму в модальном окне
2. Создать модальное окно и поместить в него HTML код формы обратной связи.
Форма обратной связи × Имя Email-адрес Сообщение (не менее 20 символов) При необходимости прикрепите к сообщению изображения (до ): максимальный размер одного изобржения 512 Кбайт Выбреите файл... Обновить Код, показанный на изображении Нажимая кнопку, я принимаю условия Пользовательского соглашения и даю своё согласие на обработку моих персональных данных, в соответствии с Федеральным законом от 27.07.2006 года №152-ФЗ «О персональных данных». Произошли ошибки! Исправьте их и отправьте форму ещё раз. 0% Отправить сообщение Форма успешно отправлена. Нажмите на ссылку, чтобы отправить ещё одно сообщение.
3. Подключить стили и скрипты используемых компонентов (jQuery, Bootstrap) и самой формы (main.css , main.js):
Как скачать форму обратной связи
Загрузить форму можно с GitHub. Перейти на страницу проекта можно с помощью следующей кнопки.
Всплывающее окно сегодня — это уже обязательный элемент любого сайта. Важно, чтобы он не раздражал и приносил ощутимую пользу для сбора необходимой информации. В сегодняшнем выпуске рассылки речь пойдет о том, как и для чего использовать всплывающее Pop-Up-окно.
Принцип действияPop-Up-окно, как правило, применяется для резкого перемещения внимания посетителя с основной массы контента на конкретный элемент — всплывающее окно. Это всегда эффект неожиданности, как резкий поворот сюжета, когда «расширяются зрачки». Также можно сравнить с приемами привлечения внимания в ходе презентации (паузы в речи, движения руками, использование ярких предметов и изображений).
В интернет-маркетинге всплывающие окна чаще всего используются, когда понятно, что пользователь заинтересовался: он проскроллил несколько экранов вниз или страница открыта определенное количество времени, но посетитель ничего не предпринимает. Как его «разбудить?»
Примеры Pop-Up-оконИтак, перейдем к реализованным всплывающим окнам на сайтах. Если вы зайдете на ресурс проекта «Нетология» и примерно 1 минуту не будете ничего предпринимать, слева появится яркое окно с формой.
В интернет-магазине lacoste.ru после некоторого ожидания появляется всплывающее окно-оверлей с предложением подписаться на рассылку, которое заслоняет другой контент. Lacoste ставит целью собрать e-mail клиентов. Одновременно возникает онлайн-консультант, что не очень удобно и рассеивает внимание посетителя.
На сайте sapato.ru при каждом клике появляется оверлей для выбора города пользователя. После того как город выбран, окно не всплывает. Это помогает больше узнать о посетителях и в результате предлагать им специальные акции, направленные на конкретный регион.
Интернет-магазин Bonprix.ua предлагает подписаться на рассылку, за что дает скидку на первую покупку. Обратите внимание на призыв «Введите адрес электронной почты», который исчезает только с началом ввода текста в поле.
Lacywear.ru предлагает за подписку 400 руб. на счет мобильного, что тоже неплохая мотивация.
Reebok.ru использует этот прием для привлечения пользователей с помощью скидки. Клик ведет в раздел аксессуаров. Как мы помним, это самые в каждом интернет-магазине. Обратите внимание, что на таком окне есть кнопка «Получить скидку». Не забывайте о призыве к действию, если вы преследуете эту цель.
Всплывающее окно, возникающее во время прокрутки страницы, применено на books.ru. Здесь это уведомление о новинке в книжном ассортименте. Можно четко проследить, на каком моменте прокрутки появляется окно. Также есть всплывающие окна, которые появляются при попытке закрыть страницу. Они либо предлагают посмотреть другие разделы сайта, либо связаться с менеджером.
Для получения всплывающего окна понадобится скрипт. Его можно заказать либо использовать многочисленные готовые решения из Сети и обучающие материалы.
Посетители сайтов часто ругают ресурсы за всплывающие окна, мешающие получать информацию, раздражающие и приводящие в результате к прекращению всех отношений с сайтом.
Но, несмотря на множество плохих отзывов, статистика отмечает прирост подписчиков при использовании всплывающих окон на сайте. Грамотный подход к форме, тексту окон и соблюдение такта при выставлении момента и частоты показа окна поможет добиться хороших результатов.
Более функциональными и интересными являются зарубежные сервисы по созданию и публикациям всплывающих окон.Критериями, определяющими уровень и качество сервиса, являются:
Сервисы отличаются набором функций и удобством использования. Из нескольких вариантов легко выбрать оптимальный и пользоваться им при создании формы и установке на сайт всплывающих окон.
Hello BarДанный сервис предлагает как бесплатную версию с базовым функционалом, так и 2 более профессиональных тарифа за 15 и 99 $ в месяц соответственно.
Установка Hello Bar:
Hello Bar имеет свои преимущества перед многими другими сервисами:
К недостаткам сервиса можно отнести малые возможности таргетинга , отсутствие социальной сети "ВКонтакте", невозможность снятия логотипа.
GetSiteControlТакже, как и в предыдущем варианте, есть бесплатная версия. При выборе платного тарифа предоставляется скидка 20% при оплате 12 месяцев сразу.
Установка сервиса:
1. После регистрации в сервисе необходимо скопировать предложенный системой код, нажав на кнопку Let"s install the code и поставить его перед тегом body.
2. Проверить правильность установки поможет кнопка Refresh. Если все было сделано верно, возле слова Installed появится зеленый индикатор.
3. Система предлагает выбрать виджет для установки окна, в какой форме оно будет представлено на странице:
4. Виджет можно отредактировать:
по внешнему виду;
5. Нажать ОК после настройки всех функций и активировать виджет.
К преимуществам системы относятся:
Данный сервис предлагает 3 месяца бесплатного пользования платным тарифом при подаче отчета с подтверждением о рассылке информации о сервисе.
Серьезные профессиональные функции доступны только в платном тарифе. Это, пожалуй, единственный недостаток сервиса.
В остальном, сервис удобен и прост, имеет большой функционал даже на бесплатном тарифе.
MailmunchБесплатный тариф есть.Кроме этого, возможно переключение на платный тариф с выгодой 30% при оплате полной суммы за год.
Установка:
Сервис хорош тем, что имеет достаточно гибкие настройки, адаптивный дизайн, приятные цены. Радует возможность смены текста и экспорта данных. Система позволяет анализировать результаты работы.
К недостаткам относится невозможность снять логотип и доступ к большинству шаблонов только через платный тариф. SumomeПлатная версия данного сервиса дороже подобных версий в других системах, но базовый бесплатный тариф также присутствует. Причем достаточно функционально насыщенный.
Для установки сервиса понадобится стандартная процедура установки предложенного системой кода после нажатия на кнопку: Add new site.
В правом верхнем углу экрана на сайте появится значок короны. Необходимо кликнуть по иконке Sumo Store, выбрать один из представленных виджетов, настроить его по внешнему виду. В бесплатной версии можно менять лишь цвет. В платной — можно воспользоваться готовыми шаблонами и добавить при необходимости доп. поля, кроме e-mail.
После настройки параметров всплывающего окна можно выбрать страницы показа, сервис или систему для синхронизации данных.
После нажатия кнопки Save можно начинать работу и отслеживать статистику с помощью аналитических функций.
К преимуществам системы относится:
К недостаткам можно отнести:
Данная система предлагает платный и бесплатный тарифы для работы.
Установка:
Преимуществами системы являются:
К недостаткам можно отнести отсутствие многих функций в бесплатной версии программы.
WitgetБесплатный период — 7 дней. Стоимость платного тарифа — около 1000 рублей в месяц, с предоставлением скидки при оплате вперед.
Установка:
К "плюсам" сервиса можно отнести:
Бесплатный период в 30 дней, безусловно, является преимуществом данного сервиса. При единовременной оплате за год система предоставляет скидку 25%.
Также к преимуществам сервиса относится:
К недостаткам сервиса относят:
Установка идентична способу установки других подобных ресурсов (описаны выше).
OptimonkСервис Optimonk предлагает изучение и тестирование сервиса в течение 14 дней, после чего подразумевается переход на довольно дорогой тариф с ограничением уникальных пользователей. Этот момент многие пользователи считают единственным недостатком сервиса.
Регистрация, редактирование, смена текста и дизайна, таргетирование, выставление времени и других характеристик всплывающего окна — процедура установки стандартная.
Преимущества сервиса:
Большие возможности при отсутствии тестового периода приводят к отсутствию желающих пользоваться сервисом, ведь работать с неопробированной системой мало кто захочет.
CartProtectorЗамечательный сервис с удобным интерфейсом и множеством функций. Но тестовый период длится всего 14дней, после чего придется выложить немалую сумму для активации программы.
На что нужно обращать внимание?Выбор сервиса для создания и установки всплывающих окон — достаточно субъективный момент. Большинство представленных сервисов обладают полным функционалом, необходимым для работы, разница лишь в стоимости.
Желательно выбирать сервисы с максимально точными настройками таргетинга для безошибочного попадания в целевую аудиторию. Если вдруг правильно настроенный установленный виджет не дает результатов, есть смысл провести его тестирование относительно времени, длительности, частоты показа посетителям сайта. После нескольких таких тестов можно делать выводы.
Не всегда фаворитом сбора данных будет платный тариф. Поэтому стоит "вооружиться тестами" и вперед, к поиску бесплатного и эффективного!
С уважением, Настя ЧеховаЕсть много способов для того, чтобы создать всплывающее окно на своем сайте. Есть сложные способы, а есть простые. Сложные заключаются в том, что для того, чтобы ими воспользоваться нужно знать программирование, а простые - это использование сторонних сервисов.
Сложные способы
В программировании основным средством для создания всплывающего окна является javascript.
Этот вариант подходит только для самых новых браузеров, в остальных данная функция работать скорее всего не будет.
Но в данной статье я рассмотрю именно простые способы, так как их можно реализовать без знаний программирования, поэтому их сможет внедрить на свой сайт каждый желающий.
Простые способы
Представляю вашему вниманию подборку лучших сервисов по созданию всплывающих окон - pop-up. А что значит лучшие? Лучшие - это значит идеальное сочетание цены и качества, а еще возможность протестировать сервисы бесплатно. В российском сегменте таких сервисов не так уж много, зато наши зарубежные коллеги могут похвастаться их большим разнообразием.
Используя эти сервисы, можно научиться перенаправлять интернет-трафик с одного ресурса на другой.
Установка по шагам
Пройдите регистрацию на сайте hellobar.com;
Вам предлагается вставить код в шаблон своего сайта, также можно установить плагин, если у вас сайт работает на Wordpress;
Определитесь с задачей, которую вы хотите решить, используя всплывающее окно: сбор email, показ посадочной страницы, звонок в один клик, перенаправление через баннер в социальные сети;
Нужно вписать номер мобильного телефона и выбрать страну;
Подберите тип всплывающего окна pop-up: расположение баннера наверху, посередине или внизу сайта;
Задайте время, через которое окно будет показано (сразу, через 5, 10 или 60 секунд, после просмотра какого-то количества страниц сайта или, когда пользователь вовсе собрался покинуть сайт);
Вам остается только зайти в раздел «Manage», запустив там всплывающее окно. Также, чтобы изменить настройки, вам необходимо будет тоже перейти во вкладку «Manage». Для того, чтобы посмотреть статистику баннера — перейдите во вкладку «Stats».
Стоимость использования: платный тариф начинается от 15 долларов в месяц, при оплате за год - скидка 15 %. Существует бесплатная версия с ограниченным функционалом:
Установка по шагам
Для начала зарегистрируйтесь на сайте GetSiteControl.com;
Получите код, скопируйте и вставьте в код шаблона на своем сайте перед закрывающим тегом body;
Проверьте правильность установки виджета на сайте, нажав на кнопку Refresh. Если добавленный код установлен корректно, то можно двигаться дальше;
Вы можете подобрать нужный вам виджет: опросник, форму для отправки email, показ нужной вам страницы, просьба подписаться на email-рассылку, кнопки социальных сетей, онлайн-чат;
Выбранный виджет нужно отредактировать (внешний вид и параметры отображения на сайте);
И последним шагом будет активация виджета.
Стоимость использования: от 10 долларов в месяц за подключение одного сайта. Оплатив сразу за год можно получить скидку 20 %. А еще есть бесплатный тариф с базовым функционалом, который поможет вам ознакомиться с сервисом.
Установка по шагам
Зарегистрируйтесь на сайте Witget.com;
Необходимо добавить предложенный код шаблона сайта перед закрывающим тегом body;
Перейдя в галерею шаблонов, можно выбрать подходящий вам шаблон для всплывающего окна;
Придумайте свой уникальный продающий текст и вставьте его;
Подберите свою цветовую схему, параметры всплывающего окна (ширина, частота и условия показа баннера, место и время показа) и нажмите сохранить;
Теперь остается проверить отображение всплывающего окна на своем сайте. Для этого надо нажать кнопку «Показать на сайте». Вас все устраивает? Тогда активируйте его.
Стоимость использования: от 700 рублей в месяц за базовый тариф, можно подключить два сайта. Расширенные возможности есть, начиная с тарифа Advanced. Можно бесплатно попробовать сервис, подключив тестовый период - семь дней.
Используя всплывающие окна, показывайте на них информацию, которая связана с вашим сайтом. Pop-up эффективен, если он соответствует вашему контенту. Создавая попап, тщательно подберите изображение и текст - чем качественнее копирайтинг и графика, тем выше эффективность баннера.
При подключении попап-окна, учитывайте разрешения экранов устройств ваших посетителей, рассчитывайте на золотой стандарт - 1024*768.
Правильно используя всплывающие окна, можно получить впечатляющий результат, например, увеличение подписной email-базы. Также данный формат помогает продавать информационные продукты, такие как электронные книги и видеокурсы.
1) Pop-up должен быть оптимального размера: не слишком большим и не слишком маленьким;
2) Дозируйте показы
Ограничьте показ pop-up одному и тому же человеку при повторном посещении сайта. Если вы видите, что он закрыл окно, то покажите всплывающее окно через пару недель, когда он забудет уже о нем.
3) Не спешите
Появление pop-up сразу после захода на сайт - это плохо. Настройте его появление через какое-то время или после совершения действий на вашем сайте.
4) Должна быть кнопка «Закрыть» в виде привычного крестика
Посетитель вашего сайта имеет право закрыть ваш pop-up, если у него нет желания его видеть или совершать действия, о которых вы его просите в нем. Желание закрыть окно не должно отнимать много времени и должно быть привычным способом.
5) Понятный призыв к действию
Большая ошибка - перегрузка всплывающего окна информацией. Одна задача - один призыв к действию. Например, если вы хотите увеличить число подписчиков на Фейсбук, то делайте pop-up таким, чтобы он понятно объяснял, что вы предлагаете посетителю вашего сайта подписаться на страницу в Фейсбук.