Створення спливаючого вікна в WordPress без плагінів

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

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

Різні способи створення спливаючого вікна WordPress без плагіна

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

Варіант 1: Як створити спливаюче вікно у WordPress без плагіна

Один з найпростіших способів створити спливаюче вікно WordPress без плагіна (модальне або форма) — просто вставити невеликий JavaScript-код, наданий зовнішніми сервісами, як наприклад Claspo. З цим підходом ви уникаєте встановлення додаткових плагінів, які можуть уповільнити роботу вашого сайту або конфліктувати з вашою темою. Замість цього просто скопіюйте короткий фрагмент коду та додайте його на свій сайт WordPress — і ваш віджет готовий до роботи.

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

• Ви отримуєте доступ до повної бібліотеки шаблонів з професійно розробленими макетами. Просто виберіть той, що підходить до стилю вашого сайту.
• редактор перетягни-відпусти дозволяє легко налаштовувати текст, кольори, зображення і навіть додавати користувацькі поля до вашої форми — дизайн-навичок не потрібно.
• Ви можете налаштувати тригери: показати спливаюче вікно після затримки, при прокручуванні, зробити спливаюче вікно WordPress на натискання або при виході з наміром.
• Вбудовані опції таргетингу дозволяють персоналізувати, хто бачить спливаюче вікно — наприклад, новачки проти тих, хто повертається, відвідувачі з конкретних країн (геотаргетинг) або покупці з товарами в кошику.
• Ви навіть можете проводити А/Б тести, щоб побачити, яка версія вашого спливаючого вікна працює найкраще.
• масштабованість: легко керувати декількома віджетами на різних сайтах, що ідеально підходить для агентств або маркетологів, які управляють кількома проектами.

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

Ще один бонус? Вам не потрібно переживати за оновлення або обслуговування. Зовнішній сервіс забезпечує безперебійну роботу у фоновому режимі, так що ваша форма спливаючого вікна продовжує виконувати свою роботу, поки ви зосереджені на своєму контенті.

Коли має сенс вибирати цей варіант:

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

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

Варіант 2: Спливаюче вікно у WordPress без плагіна за допомогою користувацького коду

Якщо ви знаєтеся на написанні коду, ще один спосіб створити спливаюче вікно в WordPress без плагіна - це розробити його вручну. Це дозволяє вам повністю контролювати, як виглядає ваша спливаюча форма, коли вона з'являється і як функціонує — але вам знадобляться базові знання HTML, CSS і JavaScript.

У цьому методі ви вписуєте свій власний код спливаючого вікна безпосередньо на сайт WordPress. Ви можете розмістити код у редакторі файлів теми (наприклад, в файлі functions.php або в footer.php) або використовувати дочірню тему, якщо не хочете ризикувати і пошкодити щось важливе.

У своїй основі, ви створюєте модальне вікно WordPress без плагіна — невеликий бокс, що з'являється поверх вашого контенту сторінки. Коли все працює правильно, ви побачите як невелике модальне вікно з'являється саме там, де потрібно. З допомогою JavaScript ви можете контролювати, коли спливаюче вікно в WordPress з'являється: з затримкою, при прокрутці, при натисканні або навіть симулювати поведінку при виході.

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

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

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

Переваги використання власного коду:

• Повний контроль над поведінкою і дизайном спливаючого вікна
• 100% розміщення на вашому власному веб-сайті без зовнішніх сервісів.
• Не потрібно копіювати код впровадження або інтегрувати сторонні інструменти.

Недоліки використання власного коду:

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

П'ятихвилинний посібник з додавання модального вікна WordPress без плагіна

Давайте швидко ознайомимо вас з нашим безкоштовним конструктором спливаючих вікон спочатку. Claspo – це безкоштовний конструктор спливаючих вікон для WordPress з довічним доступом до всіх розширених функцій. На перший погляд, ви можете подумати, що він схожий на Canva, але для створення спливаючих вікон. Конструктор дотримується аналогічного принципу: вам пропонуються шаблони, компоненти та редактор з підтримкою перетягування для їх налаштування, щоб відповідати дизайну та атмосфери вашого сайту. 

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

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

Тепер давайте подивимось, як це працює.

Крок 1: Зареєструйтесь та починайте створювати 

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

Після входу в систему натисніть кнопку "Новий віджет" і давайте додамо підписку електронною поштою до WordPress. 

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

Крок 2: Оберіть шаблон

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

Крок 3: Налаштуйте ваш віджет

Тепер настав час зробити ваше спливаюче вікно унікальним. Додайте нові поля шляхом перетягування компонентів з лівої бічної панелі. Наш конструктор спливаючих вікон вирівняє елементи, щоб все залишалося акуратним.

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

Налаштуйте стан успіху, помилки та "вже підписаний", щоб надавати корисний зворотний зв'язок в залежності від взаємодії користувача.

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

Крок 4: Перегляньте ваш віджет

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

Крок 5: Встановіть тригери та налаштування запуску

Стандартні правила відображення в Claspo розроблені для забезпечення плавного користувацького досвіду. Наприклад, спливаюче вікно може з'явитися після 20 секунд на сторінці і один раз за сесію. 

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

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

Крок 6: Налаштуйте інтеграції

Щоб максимально використовувати ваші форми попапів, інтегруйте Claspo з такими додатками як Mailchimp, HubSpot або іншими маркетинговими платформами для безшовної автоматизації маркетингу. Claspo легко може бути частиною вашого маркетингового стеку, дозволяючи проводити безперебійні кампанії з генерації лідів.

Ви також можете підключити Claspo до Google Analytics, щоб відстежувати ефективність ваших попапів.

Крок 7: Встановіть скрипт

Тепер, частина, на яку ви чекали: встановлення скрипту. 

Все, що вам потрібно, це скопіювати та вставити код зі свого аккаунту Claspo безпосередньо перед закриваючим тегом </body>.

Є ще один спосіб додати попап у WordPress без плагіна. Якщо ви маєте встановлений код Google Tag Manager (GTM) на вашому сайті WordPress, ви можете додати скрипт Claspo до тега в GTM. Після цього ви зможете запустити програмне забезпечення віджетів Claspo на вашому сайті.

Після встановлення перевірте функціональність скрипту, і ви готові! Команда підтримки Claspo може допомогти вам, якщо ви зіткнетеся з будь-якими проблемами.

10 прикладів попапів з високою конверсією для вашого сайту WordPress

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

Ось десять популярних прикладів попапів для WordPress, щоб почати.

1. Попап з пропозицією знижки при виході

Уявіть собі, що користувач переглядає ваш інтернет-магазин і ось-ось покине сайт без покупки. У цей момент з'являється попап з наміром виходу. Цей тип попапу визначає, коли курсор користувача рухається до кнопки закриття або адресного рядка, і запускає пропозицію — наприклад, "Зачекайте! Отримайте 15% знижки на першу покупку."

Спробуйте цей шаблон

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

2. Скролл-тригований попап з оновленням контенту

Спливаючий вікно, яке активується при прокручуванні, з'являється, коли відвідувач настільки зацікавлений, що прокручує 50-70% сторінки, наприклад, блог-посту. Наприклад, «Сподобався цей пост? Отримайте наш повний гід у PDF. Зареєструйтеся для завантаження.» Цей підхід працює, оскільки з'являється в момент піку інтересу. Якщо читачі знаходять ваш контент корисним, вони, ймовірно, зацікавляться отриманням ще більше матеріалів.

Спробуйте цей шаблон

3. Спливаюче вікно з пропозицією безкоштовної доставки

Ці спливаючі вікна призначені для з'явлення після того, як користувач проводить деякий час на вашому сайті, зазвичай від 20 до 30 секунд. Уявіть собі це: «Отримайте безкоштовну доставку на ваше перше замовлення! Введіть свій email, щоб отримати пропозицію.»

Спробуйте цей шаблон

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

4. Спливаюче вікно, що активується кліком для отримання матеріалу

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

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

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

Чи потрібен вам код для використання лаунчерів? Ні, якщо ви використовуєте Claspo. Ви можете увімкнути лаунчер при виборі вашого шаблону або створити окремий лаунчер і прив'язати його до іншого спливаючого вікна. 

5. Ігрове колесо в спливаючому вікні

Наші дані показують, що ігрові елементи можуть підвищити конверсії до 300%. Ігрове колесо в спливаючому вікні додає цікавого повороту до стандартного підходу збору email. 

Це може виглядати так: «Крути, щоб виграти! Введіть свій email, щоб отримати шанс виграти знижки або подарунки!» Люди люблять ігри, і можливість виграшу робить спливаюче вікно більше схожим на можливість, а не на маркетингову хитрість. Такий грайливий підхід збільшує рівень взаємодії користувачів.

Спробувати цей шаблон

6. Спливаюче вікно для покинутих кошиків

Ці спливаючі вікна розроблені для користувачів, які додають товари до кошика, але схильні залишити сторінку. Повідомлення на зразок «Не йдіть! Завершіть покупку зараз і отримайте знижку 10%» може бути ефективним. Покинуті кошики є великою проблемою в електронній комерції. Згідно з даними Baymard Institute, 69.99% онлайн-кошиків залишаються покинутими, але стратегії повернення покупок, такі як пропозиція знижки, можуть повернути 10-15% втрачених продажів.

Спробувати цей шаблон

7. Вітальне спливаюче вікно з ексклюзивною пропозицією

Вітальні спливаючі вікна з’являються, коли відвідувач вперше приходить на ваш сайт, одразу пропонуючи щось цінне, наприклад: «Приєднуйтесь до нашого VIP-списку для отримання ексклюзивних пропозицій та отримайте 20% знижки на перше замовлення!» Це допомагає зберегти електронні адреси від нових відвідувачів, які, можливо, ще не готові купувати, але достатньо зацікавлені, щоб підписатися.

Спробувати цей шаблон

8. Спливаюче вікно соціального підтвердження

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

Уявіть собі, що ви переглядаєте онлайн-магазин, і з’являється маленьке спливаюче вікно з текстом: «Хтось щойно купив цей товар 5 хвилин тому!» Ви можете подумати: «О, люди активно купують це. Це, напевно, добре!» Цей маленький поштовх може бути достатнім, щоб ви схильні купити це самі.

Спробувати цей шаблон

9. Спливаюче вікно з таймером зворотного відліку

Спливаючі вікна з відліком створюють відчуття терміновості, надаючи відвідувачам обмежений час, що змушує їх діяти негайно. Наприклад: "Завершіть своє замовлення протягом наступних 20 хвилин, використовуючи промокод нижче, і отримайте знижку 5% на всі товари у вашій кошику!" Ця стратегія ефективно використовує психологічний принцип дефіциту, коли обмежений час створює відчуття терміновості.

Спробуйте цей шаблон

Наші дані показують, що обмежені за часом пропозиції можуть збільшити продажі до 332%. Це значною мірою зумовлено страхом втрачених можливостей (FOMO), який спонукає користувачів приймати швидкі рішення, щоб не пропустити угоду.

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

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

10. Спливаюче вікно з опитуванням/вікториною

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

Використати цей шаблон

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

Висновки перед початком

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

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

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

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

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