Сервіс спливаючого вікна на виході. Вибір сервісу спливаючих вікон. Форма зворотного зв'язку

Спливаюче вікно сьогодні — це вже обов'язковий елемент будь-якого сайту. Важливо, щоб він не дратував і приносив відчутну користь для збирання необхідної інформації. У сьогоднішньому випуску розсилки йтиметься про те, як і для чого використовувати спливаюче Pop-Up-вікно.

Pop-Up-вікно, як правило, застосовується для різкого переміщення уваги відвідувача з основної маси контенту на конкретний елемент спливаюче вікно. Це завжди ефект несподіванки як різкий поворот сюжету, коли «розширюються зіниці». Також можна порівняти з прийомами привернення уваги в ході презентації (паузи у мовленні, рухи руками, використання яскравих предметів та зображень).

В інтернет-маркетингу спливаючі вікна найчастіше використовуються, коли зрозуміло, що користувач зацікавився: він проскролив кілька екранів вниз або сторінка відкрита певну кількість часу, але відвідувач нічого не робить. Як його «розбудити?»

Отже, перейдемо до реалізованих вікон, що спливають на сайтах. Якщо ви зайдете на ресурс проекту «Нетологія» і приблизно 1 хвилину нічого не робитимете, зліва з'явиться яскраве вікно з формою.

В інтернет-магазині lacoste.ru після деякого очікування з'являється вікно-оверлей з пропозицією підписатися на розсилку, яке заступає інший контент. Lacoste ставить за мету зібрати e-mail клієнтів. Одночасно виникає онлайн-консультант, що не дуже зручно та розсіює увагу відвідувача.

На сайті sapato.ru при кожному натисканні з'являється оверлей для вибору міста користувача. Після того, як місто обрано, вікно не спливає. Це допомагає дізнатися більше про відвідувачів і в результаті пропонувати їм спеціальні акції, спрямовані на конкретний регіон.

Інтернет-магазин Bonprix.ua пропонує передплатити розсилку, за що дає знижку на першу покупку. Зверніть увагу на заклик "Введіть адресу електронної пошти", який зникає лише з початком введення тексту в поле.

Lacywear.ru пропонує за передплату 400 руб. щодо мобільного, що теж непогана мотивація.

Reebok.ru використовує цей прийом для залучення користувачів за допомогою знижки. Клік веде до розділу аксесуарів. Як ми пам'ятаємо, це найбільш у кожному інтернет-магазині. Зауважте, що на такому вікні є кнопка «Отримати знижку». Не забувайте про заклик до дії, якщо ви переслідуєте цю мету.

Спливаюче вікно, що виникає під час прокручування сторінки, застосовано на books.ru. Тут це повідомлення про новинку у книжковому асортименті. Можна чітко простежити, на якому моменті прокручування з'являється вікно. Також є спливаючі вікна, які з'являються під час спроби закрити сторінку. Вони пропонують подивитися інші розділи сайту, або зв'язатися з менеджером.

• Спливне вікно повинне різко відрізнятись за кольором від фону. У гонитві за тим, щоб воно виглядало природним і в загальній колірній гамі, можна натрапити на проблеми з юзабіліті. Проте відтінки не повинні відштовхувати.
• Виберіть слова для вашої пропозиції. Далеко не всім цікаво залишити вам пошту та отримувати нудні новини компанії. Якщо ви плануєте надсилати листи на e-mail, це може бути «100 і 1 спосіб економити гроші в супермаркеті», «Як вчотирьох прожити на 1000 рублів?». Зрозуміло, треба писати про те, що пов'язано з вашою діяльністю.
• Пишіть коротко. Вивчення спливаючого вікна не повинно тривати багато часу.
• Спливне вікно, показане з перших секунд перебування відвідувача на сайті, це певний ризик того, що він піде. Або користувач повинен чітко розуміти, чому від нього щось потрібно з перших миттєвостей «знайомства».
• Декілька вікон у різних частинах одного екрану — не найкраща ідея. Як і ті, що змінюють один одного. Це дратує та розподіляє увагу. Визначтеся, заради якої мети ви показуєте своєму відвідувачеві вікно.
• Тестуйте різні варіанти та ви знайдете ідеальний варіант демонстрації.
• Не обіцяйте, чого не зможете виконати. Якщо заради дешевого трюку ви заслонили важливий контент, користувач піде.
• Якщо вашу аудиторію вже сегментовано, вибирайте, кому і яке вікно показувати, щоб підвищити ефективність.
• Дозвольте відвідувачу відмовитися від заповнення форми або натискання на пропозицію. Дайте йому право закрити віконце зрозумілим хрестиком у правому верхньому кутку.
• Якщо користувач вже закрив вікно, не варто показувати його ще раз. Ні так ні.
• Спливаюче вікно може містити пропозицію замовити зворотний дзвінок для консультації чи замовлення.

Для отримання спливаючого вікна знадобиться скрипт. Його можна замовити або використовувати численні готові рішення з Мережі та навчальні матеріали.

Є багато способів для того, щоб створити спливаюче вікно на своєму сайті. Є складні засоби, а є прості. Складні полягають у тому, що для того, щоб ними скористатися, потрібно знати програмування, а прості - це використання сторонніх сервісів.

Складні способи

• За допомогою javascript

У програмуванні основним засобом для створення спливаючого вікна є JavaScript.

• За допомогою CSS

Цей варіант підходить тільки для найновіших браузерів, в решті ця функція працювати швидше за все не буде.

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

Прості способи

Представляю вашій увазі вибірку кращих сервісів зі створення спливаючих вікон - pop-up. А що означає найкращі? Найкращі - це означає ідеальне поєднання ціни та якості, а також можливість протестувати сервіси безкоштовно. У російському сегменті таких сервісів не так уже й багато, зате наші закордонні колеги можуть похвалитися їх великою різноманітністю.

Використовуючи ці послуги, можна навчитися перенаправляти інтернет-трафік з одного ресурсу на інший.

• Hello Bar

Установка за кроками

Пройдіть реєстрацію на веб-сайті hellobar.com;

Вам пропонується вставити код шаблон свого сайту, також можна встановити плагін, якщо у вас сайт працює на Wordpress;

Визначтеся із завданням, яке ви хочете вирішити, використовуючи спливаюче вікно: збір email, показ посадкової сторінки, дзвінок в один клік, перенаправлення через банер у соціальні мережі;

Потрібно вписати номер мобільного телефону та вибрати країну;

Підберіть тип спливаючого вікна pop-up: розташування банера вгорі, посередині або внизу сайту;

Задайте час, через який буде показано вікно (відразу, через 5, 10 або 60 секунд, після перегляду якоїсь кількості сторінок сайту або, коли користувач зовсім зібрався покинути сайт);

Вам залишається тільки зайти в розділ «Manage», запустивши спливаюче вікно. Також, щоб змінити налаштування, вам також необхідно перейти у вкладку «Manage». Щоб переглянути статистику банера, перейдіть у вкладку «Stats».

Вартість використання: платний тариф починається від 15 доларів на місяць, при оплаті за рік – знижка 15%. Існує безкоштовна версія з обмеженим функціоналом:

• GetSiteControl

Установка за кроками

Для початку зареєструйтесь на сайті GetSiteControl.com;

Отримайте код, скопіюйте та вставте в код шаблону на своєму сайті перед закриваючим тегом body;

Перевірте правильність встановлення віджету на сайті, натиснувши кнопку Refresh. Якщо доданий код встановлено коректно, можна рухатися далі;

Ви можете підібрати потрібний віджет: опитувальник, форму для відправки email, показ потрібної вам сторінки, прохання підписатися на email-розсилку, кнопки соціальних мереж, онлайн-чат;

Вибраний віджет потрібно відредагувати (зовнішній вигляд та параметри відображення на сайті);

І останнім кроком буде активація віджету.

Вартість використання: від 10 доларів на місяць за підключення одного сайту. Сплативши відразу за рік можна отримати знижку 20%. А ще є безкоштовний тариф із базовим функціоналом, який допоможе вам ознайомитись із сервісом.

• Witget

Установка за кроками

Зареєструйтесь на сайті Witget.com;

Необхідно додати запропонований код шаблону сайту перед тегом body, що закриває;

Перейшовши в галерею шаблонів, можна вибрати шаблон для спливаючого вікна;

Придумайте свій унікальний текст, що продає, і вставте його;

Підберіть свою колірну схему, параметри спливаючого вікна (ширина, частота та умови показу банера, місце та час показу) та натисніть зберегти;

Тепер залишається перевірити відображення спливаючого вікна на своєму сайті. Для цього треба натиснути кнопку "Показати на сайті". Вас все влаштовує? Тоді активуйте його.

Вартість використання: від 700 рублів на місяць за базовий тариф, можна підключити два сайти. Розширені можливості є починаючи з тарифу Advanced. Можна безкоштовно спробувати сервіс, підключивши тестовий період сім днів.

• Popups
• WordPress PopUp
• Scroll Triggered Boxes
• WordPress Notification Bar
• WP Popup Plugin - Lightbox Popup
• PopupAlly
• YITH Newsletter Popup

Використовуючи спливаючі вікна, показуйте на них інформацію, пов'язану з вашим сайтом. Pop-up ефективний, якщо він відповідає вашому контенту. Створюючи попап, ретельно підберіть зображення та текст – чим якісніший копірайтинг та графіка, тим вища ефективність банера.

При підключенні попап-вікна, враховуйте роздільну здатність екранів пристроїв ваших відвідувачів, розраховуйте на золотий стандарт - 1024*768.

Правильно використовуючи спливаючі вікна, можна отримати вражаючий результат, наприклад збільшення підписної email-бази. Також цей формат допомагає продавати інформаційні продукти, такі як електронні книги та відеокурси.

1) Pop-up має бути оптимального розміру: не надто великим і не надто маленьким;

2) Дозуйте покази

Обмежте показ pop-up одній і тій же людині при повторному відвідуванні сайту. Якщо ви бачите, що він закрив вікно, то покажіть спливаюче вікно через пару тижнів, коли він забуде вже про нього.

3) Не поспішайте

Поява pop-up відразу після заходу на сайт – це погано. Налаштуйте його появу через якийсь час або після здійснення дій на вашому сайті.

4) Має бути кнопка «Закрити» у вигляді звичного хрестика

Відвідувач вашого сайту має право закрити ваш pop-up, якщо він не має бажання його бачити або вчиняти дії, про які ви його просите в ньому. Бажання закрити вікно не повинно забирати багато часу і повинне бути звичним способом.

5) Зрозумілий заклик до дії

Велика помилка – перевантаження спливаючого вікна інформацією. Одне завдання – один заклик до дії. Наприклад, якщо ви хочете збільшити кількість передплатників на Фейсбук, то робіть pop-up таким, щоб він зрозуміло пояснював, що ви пропонуєте відвідувачу вашого сайту підписатися на сторінку Facebook.

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

Але, незважаючи на безліч поганих відгуків, статистика зазначає приріст передплатників при використанні спливаючих вікон на сайті. Грамотний підхід до форми, тексту вікон та дотримання такту при виставленні моменту та частоти показу вікна допоможе досягти хороших результатів.

Критеріями, що визначають рівень та якість сервісу, є:

• наявність безкоштовної версії чи тривалий тестовий період;
• різноманіття тригерів;
• можливість внесення змін до тексту та дизайну.

Сервіси відрізняються набором функцій та зручністю використання. З кількох варіантів легко вибрати оптимальний і користуватися ним під час створення форми та встановлення на сайт спливаючих вікон.

Даний сервіс пропонує як безкоштовну версію з базовим функціоналом, так і 2 професійніші тарифи за 15 і 99 $ на місяць відповідно.

Установка Hello Bar:

Hello Bar має свої переваги перед багатьма іншими сервісами:

• адаптивний дизайн та простота налаштування при багатофункціональності;
• система дозволяє провести інтеграцію із зарубіжними сервісами e-mail;
• можливе отримання тарифу Pro безкоштовно на 1 місяць при підключенні до сервісу друга, при цьому поширюється можливість обох учасників програми.

До недоліків сервісу можна віднести малі можливості націлення, відсутність соціальної мережі "ВКонтакте", неможливість зняття логотипу.

Так само, як і в попередньому варіанті, є безкоштовна версія. При виборі платного тарифу надається знижка 20% при оплаті 12 місяців одразу.

Встановлення сервісу:

1. Після реєстрації у сервісі необхідно скопіювати запропонований системою код, натиснувши кнопку Let's install the code і поставити його перед тегом body.

2. Перевірити правильність установки допоможе кнопка Refresh. Якщо все зроблено правильно, біля слова Installed з'явиться зелений індикатор.

3. Система пропонує вибрати віджет для встановлення вікна, в якій формі воно буде представлене на сторінці:

• у формі опитування;
• надсилання повідомлень на електронні адреси;
• підписки на розсилку;
• кнопки для розшарування;
• онлайн-чат.

4. Віджет можна відредагувати:

на вигляд;

• текст – програма пропонує кілька готових шаблонів;
• за часом показів та націлення.

5. Натисніть OK після налаштування всіх функцій та активувати віджет.

До переваг системи належать:

• низька вартість;
• різноманіття віджетів та шаблонів;
• відсутність обмеження щодо вхідного потоку відвідувачів;
• адаптивність віджетів;
• можна додати для передплати соц. мережу "ВКонтакті".

Даний сервіс пропонує 3 місяці безкоштовного користування платним тарифом під час подання звіту з підтвердженням про розсилання інформації про сервіс.

Серйозні професійні функції доступні лише у платному тарифі. Це, мабуть, єдиний недолік сервісу.

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

Безкоштовний тариф є. Крім цього, можливе переключення на платний тариф із вигодою 30% при сплаті повної суми за рік.

Встановлення:

Сервіс хороший тим, що має досить гнучкі налаштування, адаптивний дизайн, приємні ціни. Радує можливість зміни тексту та експорту даних. Система дає змогу аналізувати результати роботи.

Платна версія даного сервісу дорожча за подібні версії в інших системах, але базовий безкоштовний тариф також є. Причому досить функціонально насичений.

Для встановлення сервісу знадобиться стандартна процедура встановлення запропонованого системою коду після натискання на кнопку: Add new site.

У верхньому правому куті екрана на сайті з'явиться значок корони. Необхідно клікнути по іконці Sumo Store, вибрати один з представлених віджетів, налаштувати його на вигляд. У безкоштовній версії можна міняти лише колір. У платній - можна скористатися готовими шаблонами і додати при необхідності дод. поля, окрім e-mail.

Після налаштування спливаючого вікна можна вибрати сторінки показу, сервіс або систему для синхронізації даних.

Після натискання кнопки Save можна розпочинати роботу та відстежувати статистику за допомогою аналітичних функцій.

До переваг системи належить:

• наявність цікавих віджетів;
• можливість заміни тексту та дизайну вікна;
• функція завантаження зібраних електронних адрес.

До недоліків можна віднести:

• наявність одного шаблону у безкоштовній версії;
• якщо є необхідність придбати віджети, купувати доведеться весь набір повністю;
• націлення налаштовується не дуже гнучко;
• Більшість функцій можна "придбати" тільки після купівлі платної версії.

Ця система пропонує платний та безкоштовний тарифи для роботи.

Встановлення:

Перевагами системи є:

• простий інтерфейс;
• безкоштовний тариф;
• точні налаштування націлювання;
• аналітичні функції;
• можливість заміни тексту та дизайну.

До недоліків можна віднести відсутність багатьох функцій безкоштовної версії програми.

Безкоштовний період – 7 днів. Вартість платного тарифу - близько 1000 рублів на місяць, з наданням знижки під час оплати вперед.

Встановлення:

До "плюсів" сервісу можна віднести:

• Вартість.
• Російська мова інтерфейсу.
• Наявність основних російськомовних мереж.
• Вибір шаблонів.
• Адаптивність дизайну.
• Статистичні данні.
• Інтеграція з багатьма сервісами розсилок.

Безкоштовний період 30 днів, безумовно, є перевагою даного сервісу. За одноразової оплати за рік система надає знижку 25%.

Також до переваг сервісу належить:

До недоліків сервісу відносять:

• високу вартість платного тарифу;
• відсутність безкоштовної версії

Установка ідентична методу встановлення інших подібних ресурсів (описані вище).

Сервіс Optimonk пропонує вивчення та тестування сервісу протягом 14 днів, після чого передбачається перехід на досить дорогий тариф з обмеженням унікальних користувачів. Цей момент багато користувачів вважають єдиним недоліком сервісу.

Реєстрація, редагування, зміна тексту та дизайну, таргетування, виставлення часу та інших характеристик спливаючого вікна – процедура встановлення стандартна.

Переваги сервісу:

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

Чудовий сервіс із зручним інтерфейсом та безліччю функцій. Але тестовий період триває лише 14 днів, після чого доведеться викласти чималу суму для активації програми.

Вибір сервісу для створення та встановлення спливаючих вікон – досить суб'єктивний момент. Більшість представлених сервісів мають повний функціонал, необхідний роботи, різниця лише вартості.

Бажано вибирати сервіси з максимально точними налаштуваннями націлювання для безпомилкового влучення в цільову аудиторію. Якщо раптом правильно налаштований віджет не дає результатів, є сенс провести його тестування щодо часу, тривалості, частоти показу відвідувачам сайту. Після кількох таких тестів можна робити висновки.

Не завжди лідером збору даних буде платний тариф. Тому варто "озброїтися тестами" і вперед, до пошуку безкоштовного та ефективного!

У мене свого часу, коли я тільки починав вести свій блог, а так само інтернет-магазин, пам'ятаю була проблема - як зробити красиві вікна, що спливають на сайт, за допомогою яких інформувати відвідувачів про ті чи інші акції або, якщо це стосується блогу, забезпечити збір email адрес передплатників на різноманітні навчальні матеріали. Не даремно багато інфо-бізнесменів, та й взагалі, будь-який досвідчений блогер, скаже, що база передплатників – це золотий актив! Це ті люди, які готові слухати вас, купувати у вас і робити це знову, і знову. Звичайно, якщо ваші матеріали на те заслуговують.

То про що це я?! А про те, як цей золотий актив зібрати! І одним з найкращих способів є грамотні та якісні спливаючі форми передплати на вашому ресурсі. Способів застосування спливаючих вікон насправді просто купа! Кілька десятків точно можна придумати - це і інформування відвідувачів про найцікавіші матеріали на сайті, і анонси нових статей, акцій, конкурсів; туди ж можна, за потреби, запровадити рекламну пропозицію. Ну і звичайно основний, як я вже зазначив - це збирання контактів (email, номерів телефонів) вашої цільової аудиторії для подальшої взаємодії з нею.

Про одне, на мій погляд, із найкращих і дуже зручних плагінів спливаючих вікон я сьогодні вам і розповім. Сам користуюсь вже дуже давно, проте ідея написати про це статтю прийшла лише зараз. Отже, сьогодні під прицілом продукт компанії MakeDreamProfits – .

Насправді писати про те, які сьогодні плагін має можливості не найвдячніша справа, оскільки до нього постійно виходять якісь оновлення, доповнення, у зв'язку з чим я ризикую висвітлити його вельми однобоко, через 2-3 місяці після виходу цієї статті. . Тим не менш, на ключових особливостях зупинимося:

• 11 готових красивих дизайнів спливаючих вікон, які можна редагувати
• зручний особистий кабінет, в якому ви виконуєте всі налаштування, а потім вставляєте на сайт готовий код
• інтеграція з будь-якими сервісами поштових розсилок або режим надсилання отриманих даних на ваш email
• спліт-тестування набору popup"ів (до речі, popup - це спливаюче вікно, хто не знає)
• 3 види спливаючих вікон:
  • з формою введення даних
  • та ні
  • перехід за посиланням
• статистика відкритості та конверсій (введення даних або перехід за посиланням)
• можливість озлання групи popup"о, розбитих за часом першого відвідування сайту або підписки на розсилку
• налаштування режиму та правил показу спливаючих вікон
• можливість вбудувати у вікно

Це я перерахував лише основне, насправді функціонал JumpOut ще ширший!

Гнучке налаштування правил появи плагіна:

• при відході відвідувача з сайту
• при натисканні на елемент
• через певний час
• при прокручуванні сторінка
• та ряд інших

Крім того можна налаштувати на різних сторінках сайту різні плагіни -

Особисто я використовую цей плагін спливаючих вікон з формами підписки на всіх своїх сайтах. Це дуже зручний інструмент взаємодії з аудиторією ресурсу. Як показують мої тести, ефективність конверсій спливаючих вікон майже така сама, як на стандартних формах підписки на односторінкових лендингах. Що ще класніше, функціонал плагіна дозволяє відстежувати цю ефективність до дрібниць - самі подивіться пару скріншотів нижче -

Як бачите на скріншоті конверсій Яндекс-Метрики за останній місяць, 3,76 % користувачів або 207 в абсолютному вираженні стали моїми передплатниками саме завдяки спливаючому віконцю, що вчасно з'явилося, з пропозицією отримати мої матеріали!

Під час перерахування можливостей сервісу я вже наголосив на можливості інтеграції з будь-якими поштовими розсилками -

Оцінити та випробувати всі можливості плагіна спливаючих форм підписки та спливаючих вікон на вашому сайті можна абсолютно безкоштовно протягом 15 днів, після чого одного разу сплатити потрібну версію плагіна – залежно від кількості сайтів, на яких передбачається його використання – один, три чи безліміт, а також ряду додаткових фіч, наприклад, можливості використання власного css-коду.

P.S. : Чи є досвід роботи з плагінами спливаючих вікон та форм підписки? Напишіть про це кілька рядків у коментарях до статті внизу! І не забудьте поставити Like, якщо я допоміг вам з вибором плагіна!

Інвестування в проекти, що висвітлюються на цьому блозі, пов'язані з певними ризиками, аж до повної втрати вкладених коштів. Автор не несе відповідальності за дії компаній/проектів, описаних на блозі. Матеріали блогу носять виключно інформаційний характер і не закликають до жодних дій.

Стаття, в якій розглянемо, як на сайт встановити спливаючу форму зворотного зв'язку з капчею та можливістю прикріплення до неї файлів.

Дана форма - це проект із вихідним кодом, який розташований на GitHub за адресою: https://github.com/itchief/feedback-form-in-modal.

Попередні вихідні коди проекту, який було виконано на Bootstrap 3, можна завантажити з GitHub за цим посиланням.

Представлена ​​форма виконана з використанням комопентів Bootstrap 4 та jQuery. Серверний код фоми написано на PHP.

Інші характеристики форми:

• відкритий вихідний код, проект доступний GitHub;
• надсилання даних форми на сервер та отримання відповіді здійснюється без перезавантаження сторінки, тобто. за допомогою технології AJAX;
• наявність графічної капчі (для захисту від спаму);
• можливість прикріплення до неї файлів (за замовчуванням до 5);
• перевірка даних форми (валідація) організована як у клієнті, і на сервері;
• відправлення даних форми після успішної валідації на пошту менеджера (адміністратора) та листи про доставку клієнту;
• при надсиланні листа файли можна як прикріпити, так і відправити за допомогою посилань;
• логування відправки (дані зберігаються у файлі message.txt).

Основні дії щодо підключення форми зворотного зв'язку.

Відкрити форму у модальному вікні

2. Створити модальне вікно та помістити в нього HTML код форми зворотного зв'язку.

Форма зворотнього зв'язку × Ім'я Адреса електронної пошти Повідомлення (не менше 20 символів) При необхідності прикріпіть до повідомлення зображення (до ): максимальний розмір одного зображення 512 Кбайт Виділіть файл... Оновити Код, показаний на зображенні Натискаючи кнопку, я приймаю умови Угоди користувача та даю свою згоду на обробку моїх персональних даних, відповідно до Федерального закону від 27.07.2006 року №152-ФЗ «Про персональні дані». Сталися помилки! Виправте їх і надішліть форму ще раз. 0% Надіслати повідомлення Форму успішно відправлено. Натисніть посилання, щоб надіслати ще одне повідомлення.

3. Підключити стилі та скрипти використовуваних компонентів (jQuery, Bootstrap) та самої форми (main.css, main.js):

Завантажити форму можна із GitHub. Ви можете перейти на сторінку проекту за допомогою наступної кнопки.