Спливаюче вікно для сайту

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

Перевага такого підходу:

  1. Ефект колосальний.
  2. Скарг від нього, мало.

Спливаюче вікно jQuery

Щоб створити спливаюче вікно, багато хто використовує програми сторонніх розробників, наприклад, Opt-in Monster. LeadPages. або список Builder плагін від SumoMe. Ці додатки зручні, але навіщо використовувати програми сторонніх розробників якщо у більшості CMS. jQuery є за замовчуванням.

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

підключити jQuery

Якщо CMS не містить за замовчуванням бібліотеку jQuery, її можна завантажити і підключити до сторінки. Але простіше додати посилання на бібліотеку jQuery.

Далі на сторінку ще потрібно підключити два плагіна jQuery:

Перший плагін, Модальний плагін. його ми будемо використовувати щоб створити спливаюче вікно, яке з'являється після того як користувач відвідає сайт. При додаванні плагіна до проекту, переконайтеся, що завантажені всі файли:

  • jquery.modal.min.js
  • jquery.modal.css
  • close.png
  • spinner.gif

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

Другий плагін який потрібен це jQuery Cookie. ми застосуємо його для користувачів, які на спливаючому вікні натиснули кнопку "закрити". і не бачили спливаюче вікно протягом одного місяця.

Це означає, що:

  1. Всі повинні бачити спливаюче вікно, по крайней мере, один раз.
  2. Кожен раз, після повернення на сайт відвідувачі не бачать спливаюче вікно.

Для цього використовується Cookie і він досить добре працює.

Після підключення jQuery разом з плагінами, Ви повинні створити файл HTML, який виглядає так:

Створити спливаюче вікно

між тегами . вставити наступне:

Це код спливаючого вікна, вікно з'явиться після того як користувач відкриє сторінку. З цим кодом вид спливаючого вікна не яскравий, але це не має значення.

Варто уточнити пару речей:

  1. Спливаюче вікно повинно мати унікальний ID. У цьому прикладі Я використовував "opn-win".
  2. Властивість стилю встановлено display "none". що б спливаюче вікно не відображалося в основному інтерфейсі.

прямо перед . потрібно додати функцію, яка буде виконуватися один раз при відкритті сторінки:

Щоб спливаюче вікно з'являлося при завантаженні сторінки, потрібно додати функцію, яка надана нам плагіном jQuery:

Якщо зроблено все правильно, то після оновлення сторінки в браузері, має з'явитися спливаюче вікно як на знімку нижче:

Спливаюче вікно для сайту
Спливаюче вікно при завантаженні сторінки

Якщо потрібно, можна зробити так щоб вікно з'являлося не відразу. Краще коли є невелика затримка після відкриття сторінки сайту користувачем. Щоб так зробити, потрібно додати функцію setTimeout.

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

Повністю функція буде виглядати так:

управління Cookies

Потім всередині цієї нової функції, ми створимо cookie.

cookie з ім'ям hideTheModal має значення true. Також ми можемо в параметрі expires вказати як довго повинні зберігається cookie.

Якщо замінити значення параметра expires на 1 - спливаюче вікно один раз на добу, 7 - спливаюче вікно один раз в тиждень.

Нагадаю, що браузер Google Chrome не підтримує cookies для локальних файлів. Це означає, що Ви повинні будете перевірити функціональність cookie на іншому браузері.

Тому краще додати наступне умовне:

У контексті, код повинен виглядати так:

висновок

цікаві записи

Схожі статті