Як додати спливаюче вікно при кліку на кнопку в WordPress (Повний посібник)

Чи шукаєте спосіб перетворити більше відвідувачів вашого сайту на клієнтів або передплатників? Спливаючі вікна є саме тією прихованою зброєю, яка вам потрібна. Насправді, дослідження показують, що вчасно розміщені спливаючі вікна можуть в середньому підвищити показник конверсії до 9,28%. 

Чи ви керуєте інтернет-магазином, SaaS-компанією або малим бізнесом, правильно налаштовані спливаючі вікна можуть творити дива. Наприклад, спливаючі вікна допомагають відновити принаймні 17% відмовлених кошиків (ResultFirst) і можуть навіть збільшити ваші продажі до 25% (VWO). Найкраща частина? Спливаючі вікна неймовірно універсальні. Ви можете розробити їх так, щоб вони з'являлися на основі поведінки користувача або активувати їх простим кліком миші. 

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

Що таке спливаюче вікно на кліку?

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

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

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

Крок 1: Встановіть і активуйте плагін у WordPress

1. Увійдіть у панель управління WordPress. Отримайте доступ до свого сайту на WordPress, увійшовши як адміністратор.
2. Перейдіть до плагінів. На боковій панелі зліва наведіть курсор на "Плагіни" та натисніть «Додати новий».
3. Знайдіть плагін Claspo. У рядку пошуку у верхньому правому кутку введіть «Claspo». Коли плагін з'явиться у результатах, натисніть «Встановити зараз», а потім «Активувати».
4. Підключіть свій акаунт Claspo. Якщо ви ще не маєте акаунта, просто дотримуйтесь вказівок, щоб його створити. Після входу авторизуйте підключення.

Крок 2: Створіть спливаюче вікно у Claspo

Тепер, коли плагін налаштований, час створити ваше спливаюче вікно у панелі управління Claspo.

1. Перейдіть до панелі управління Claspo з меню WordPress.

2. Створіть нове спливаюче вікно. Натисніть «Створити новий віджет» і виберіть шаблон або оберіть створити спливаюче вікно з нуля.

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

3. Дизайнуйте ваше спливаюче вікно, налаштувавши його зміст та візуальні елементи.

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

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

Якщо ви хочете зібрати email-адреси або інші дані, додайте форму до попапу. У Claspo popup maker ви знайдете готові блоки, які можна легко перетягувати на робоче поле. Просто розмістіть їх там, де вам потрібно в віджеті, для швидкої та легкої кастомізації. 

4. Налаштуйте параметри відображення попапу. Щоб запустити попап, натиснувши кнопку у WordPress, ви можете обрати два варіанти: запуск віджету за кліком на лаунчер або за кліком на HTML-елемент.

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

Якщо ви вирішите запускати віджет за кліком на HTML-елемент, вам потрібно вставити CSS-селектор у відповідне поле. Ми розповімо, де його знайти, пізніше.

Крок 3: Додайте кнопку на сторінку або пост WordPress

Коли ваш попап створено, вам потрібно додати кнопку, яка буде запускати його на вашому сайті WordPress.

1. Перейдіть у Розділ "Пости" на вашій панелі керування WordPress. Щоб додати кнопку до вмісту, натисніть значок + у верхньому лівому куті редактора. Ця дія відкриє браузер блоків.
2. Прокрутіть до розділу «Елементи оформлення» та виберіть «Кнопка». Потім введіть повну URL-адресу, куди ви хочете, щоб кнопка переходила у надане текстове поле. 
3. Щоб змінити текст кнопки, просто натисніть на заповнювач тексту «Додати текст...» і почніть вводити потрібний текст.

Використовуючи клавіатуру, ви також можете надрукувати /buttons на новому рядку та натиснути Enter, щоб швидко додати новий блок Кнопок.

Або ви можете додати кнопку за допомогою плагіну. Перейдіть на панель керування WordPress і виберіть Плагіни > Додати новий. У рядку пошуку плагінів введіть "button block", щоб знайти відповідний плагін. Встановіть і активуйте його. Після активації ви отримаєте запит на підтвердження вашої електронної пошти, щоб підключитися до плагіну Button Block.

Знайдіть CSS-селектор і вставте його у налаштування віджету.

1. Спочатку відкрийте вашу домашню сторінку у новій вкладці. Клацніть правою кнопкою миші у будь-якому місці на сторінці та виберіть опцію «Інспектувати» (вона може бути також як «Переглянути елемент»).
2. У панелі розробника ви побачите дві панелі: ліва відображає ієрархію HTML-елементів, у той час як права панель поки що може бути проігнорована.
3. Це налаштування дозволяє легко знайти елемент, який вас цікавить, навіть якщо ви не знайомі з HTML. Просто клацніть правою кнопкою миші на обраному елементі, і панель розробника автоматично його виділить.
4. Коли ви знайдете HTML-елемент, останній крок — скопіювати його CSS-селектор. Знайдіть клас із назвою .button на елементі посилання, оскільки це може бути використано як ваш CSS-селектор.

Вставте скопійований CSS-селектор у відповідне вхідне поле у налаштуваннях вашого віджету.

Крок 4: протестуйте та налаштуйте спливаюче вікно

1. Попередньо перегляньте свою сторінку. Збережіть сторінку та перегляньте її, щоб побачити, як працює спливаюче вікно, викликане кнопкою. Переконайтеся, що при натисканні кнопки відкривається спливаюче вікно, як і очікувалося.
2. Налаштуйте параметри спливаючого вікна (за потреби). Якщо спливаюче вікно не поводиться так, як потрібно, або ви хочете змінити його вигляд, поверніться на панель керування Claspo та зробіть необхідні налаштування.

Крок 5: опублікуйте сторінку

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

10 реальних прикладів спливаючих вікон у WordPress і чому вони працюють

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

Легкий, але потужний: збільшуємо свій список електронної пошти

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

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

З точки зору UX і маркетингу це робить кілька правильних речей:

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

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

Запрошення до реєстрації через корисні мікроінтеракції

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

Що помітити

Замість перенаправлення користувачів до стороннього інструмента, як Pinterest, кнопка ‘Зберегти статтю’ запускає спливаюче вікно з простим повідомленням: створіть акаунт, щоб розблокувати цю функцію. Це бездоганне поєднання взаємодії користувача та ненав'язливого конверсійного процесу.

З позиції UX та маркетингу це працює, тому що:

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

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

Збільште середній обсяг замовлення за допомогою розумної порогової пропозиції

Цей приклад сторінки продукту показує тонкий, але переконливий спосіб виклику спливаючого вікна при натисканні на кнопку у WordPress — він спонукає користувачів витратити більше без тиску.

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

Чому це працює з психологічної та UX точки зору:

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

З Claspo ви можете піти далі. Максимально використовувати заходи Data Layer, ваш плагін WordPress для спливаючих вікон на-клік може відображати динамічний контент на основі поведінки користувача. Наприклад, замість загальноприйнятого ‘витратьте $50, щоб отримати подарунок’, ваш віджет може сказати: ‘Витратьте $50 на головоломки, щоб отримати сюрприз!’. Якщо користувач переглядає продукт у категорії Головоломок. 

Цей невеликий штрих робить пропозицію більш персоналізованою та актуальною — покращуючи взаємодію з користувачем та потенціал конверсії. І так — цей рівень персоналізації доступний без кодування, якщо ви вже налаштували свій Data Layer.

Тригери спливаючих вікон для сповіщень повернення товару в наявність

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

На що звернути увагу
Замість перенаправлення користувача або відображення повідомлення-затичка, кнопка відкриває лайтбокс, запрошуючи відвідувача залишити свій email. Це робить дві речі одночасно — створює очікування, що товар повернеться, та залишає користувача в екосистемі бренду.

З точки зору UX та маркетингу це неймовірно розумно:

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

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

Створіть попит перед прибуттям товару

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

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

З точки зору психології та маркетингу ця стратегія досягає декількох цілей:

• Це використовує ефект дефіциту — якщо це не доступно зараз, це має бути популярним.
• Це робить клієнтів відчувати себе обізнаними — як інсайдери, які першими отримають сповіщення про запуск.
• Це дає бренду чіткий показник інтересу перед тим, як зобов'язуватись щодо обсягу продукції або логістики.
• Це уникає тертя в кошику — користувачі не розчаруються, натиснувши ‘додати в кошик’, і виявивши, що вони не можуть купити.

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

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

Подарунок-підштовхувальник, що здається особистим

Іноді ваші клієнти не хочуть купувати — вони хочуть, щоб хтось інший це зробив. Ось де з’являється функція ‘Намекнути’.

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

Чому це відмінно працює з точки зору UX і маркетингу:

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

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

Використання спливаючого вікна для підсвітки відгуків клієнтів

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

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

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

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

Отримати практичну інформацію за допомогою спливаючого вікна, яке відкривається при натисканні

Хочете дізнатися, що ваші клієнти дійсно думають — без перерви в їх перегляді? Цей приклад від The Body Shop влучає в ціль.

На що звернути увагу
Непомітна кнопка «Відгук» розташована в нижньому кутку сторінки. Вона не кличе про увагу, але завжди помітна. При натисканні відкривається багатокрокова форма спливаючого вікна, де користувачі можуть швидко поділитися своїм досвідом. Від оцінки задоволеності до пропозицій щодо поліпшень — все відбувається в чистому, зосередженому потоці. Чому це працює так добре з точки зору UX, психології і маркетингу:

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

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

Запросіть покупців приєднатися до вашої програми лояльності

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

Що варто відзначити
Кнопка ‘Програма лояльності’ плавно розташовується внизу екрану. Вона помітна, але не дратівлива. При натисканні відкривається спливаюча форма на кнопку в WordPress, яка стисло демонструє переваги — без викрадення сторінки або перенаправлення. Чому це працює з точки зору UX та маркетингу:

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

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

Використовуйте клікабельне спливаюче вікно для вашої програми рекомендацій

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

Що варто відзначити
Тонка вкладка ‘Отримати $25’ прилягає до краю екрану. Вона не конкурує з основним закликом до дії — замість цього це спокусливий бонус. При натисканні відкривається чисте, брендоване спливаюче вікно, яке запрошує користувачів приєднатися до програми рекомендацій, поділитися посиланням і отримати винагороду. Чому це розумно з точки зору UX та маркетингу:

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

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

6 способів, як спливаючі вікна за кліком є ефективними

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

1. Націлювання на теплих лідів

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

2. Вищі показники конверсії з меншими витратами на рекламу

Спливаючі вікна за кліком з'являються тільки після того, як користувач натисне на релевантний заклик до дії, як-от "Завантажити зараз" або "Отримати 10% знижки", тобто вони показуються людям, які вже зацікавлені у вашій пропозиції. Такий цільовий підхід призводить до вищих показників конверсії, оскільки ви взаємодієте з аудиторією, яка готова діяти. Найкраще в цьому те, що оскільки більше вашого трафіку перетворюється на ліди, ви витрачаєте менше на рекламу, знижуючи вартість за лід (CPL) і максимізуючи ваші інвестиції. Це розумний спосіб максимально використати ваш рекламний бюджет.

3. Ефективне використання трафіку

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

4. Зменшення витрат на марну рекламу

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

5. Зниження показника відмов і покидання

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

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

6. Виховання лідів без додаткових витрат

When users engage with click-triggered popups and join your email list, it opens the door for nurturing those leads through automated email marketing — an approach that is much more cost-effective than continuously paid ads. This means you can maintain engagement without the constant need to spend on advertising. Instead, you can focus on crafting email campaigns, which have a lower cost per contact. Over time, this strategy not only keeps your audience engaged but also reduces your cost per lead, maximizing your marketing budget.

Якщо ви не впевнені, як додати підписку на email до WordPress, ми детально описали всі кроки та надали кілька цікавих прикладів, щоб полегшити вам процес створення форм підписки і допомогти підвищити конверсію.

Додаткові поради для спливаючих вікон, що активуються кнопкою

Активація віджетів за допомогою кнопки — ефективний спосіб націлення лише на зацікавлену аудиторію. Ви також можете підвищити шанси успіху віджету, додавши додаткові правила відображення. З Claspo ви легко можете налаштувати такі опції, як:

• Націлювання на конкретних відвідувачів: Обирайте віджетів в залежності від розташування відвідувача, чи є вони новими, повернулися або навіть звідки вони перейшли на сайт.
• Націлювання за пристроями: Відображення віджетів на настільних комп'ютерах, мобільних пристроях або і там, і там.
• Контроль частоти: Вирішіть, як часто ваше вікно буде з'являтися — лише одного разу чи на регулярній основі.
• A/B тестування: Експериментуйте з різними дизайнами кнопок, контентом вікон і діями тригерів, щоб зрозуміти, що найбільше подобається вашій аудиторії. Claspo має вбудовану функціональність A/B тестування. Ви можете тестувати два або більше віджетів і отримувати автоматизовані результати.
• Аналітика та відстеження: Використовуйте вбудовану аналітику Claspo для моніторингу продуктивності вікон, відстеження конверсій і внесення коригувань на основі даних. Ви отримуєте дані про продуктивність кожного віджета, які постійно оновлюються і представлені у зручних для читання діаграмах з окремими показниками для мобільних та настільних переглядів.

Як створити спливаюче вікно на WordPress натисканням, використовуючи HTML код

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

Крок 1: Створіть спливаюче вікно у Claspo

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

1. Створіть новий віджет спливаючого вікна. У панелі управління Claspo натисніть «Створити новий віджет». Виберіть тип спливаючого вікна, яке ви хочете (наприклад, генерація потенційних клієнтів, пропозиція зі знижкою, підписка на розсилку). Виберіть готовий шаблон або створіть спеціальне спливаюче вікно з нуля.

2. Дизайн спливаючого вікна. Налаштуйте ваше спливаюче вікно, коригуючи елементи, як пояснено у Кроці 2 Створення спливаючого вікна на натискання у WordPress, використовуючи плагін Claspo.

3. Встановіть тригери для спливаючого вікна. У розділі Тригерів встановіть ваше спливаюче вікно для активації натисканням на кнопку:

• Обрати активацію на основі натискання HTML елемента.

4. Коли ви створите кнопку на вашому сайті WordPress, вам потрібно буде скопіювати її CSS селектор і вставити в відповідне поле в налаштуваннях віджету у Claspo.

5. Збережіть ваш віджет як чернетку.

6. Щоб відобразити попап створений в Claspo на вашому сайті, потрібно встановити скрипт. Це невеликий фрагмент коду, який потрібно додати на сторінки, де ви хочете відобразити попап, перед закриваючим тегом </body>. Це не займе багато часу, а ваш обліковий запис міститиме детальні інструкції про те, як це зробити.

Крок 2: Додайте код кнопки та вбудованого попапа в WordPress

Тепер, коли ваш попап готовий, наступним кроком є додавання кнопки у вашу сторінку або пост WordPress.

Додайте кнопку, як описано в Кроці 3 з Створення попапа на клік у WordPress за допомогою плагіна Claspo.

1. По-перше, відкрийте вашу головну сторінку в новій вкладці. Клацніть правою кнопкою миші будь-де на сторінці та виберіть опцію ‘Inspect’ (можливо, також буде написано ‘Inspect Element’).
2. У засобах розробника побачите два панелі: ліва сторона відображає ієрархію HTML-елементів, а права сторона може бути проігнорована для цієї задачі.
3. Цей макет дозволяє легко знайти необхідний елемент без глибоких знань HTML. Просто клацніть правою кнопкою миші потрібний елемент, і засоби розробника автоматично виділять його.
4. Після того як ви знайдете HTML-елемент, останнім кроком є копіювання CSS селектора. Елемент посилання матиме клас, тому шукайте клас .button, який можна використовувати як CSS селектор. 

Нарешті, скопіюйте CSS селектор і вставте його у відповідне поле вводу в налаштуваннях вашого віджета.

Крок 3: Перевірте попап

Після вбудовування попапа, важливо протестувати його на вашому реальному сайті.

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

Останні слова

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

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

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

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