Як створити спливаюче вікно в HTML для вашого вебсайту
Чи ви проєктуєте цільову сторінку, оптимізуєте шляхи конверсії, чи просто експериментуєте з функціями фронтенду, знання того, як створити спливаюче вікно в HTML, є цінною навичкою. У цьому посібнику ми покажемо вам два практичних підходи до додавання власного спливаючого вікна до вашого вебсайту — одне з використанням HTML, CSS і JavaScript, а інше з конструктором без коду, який дозволяє зробити це за хвилини.
Якщо вам подобається кодити вручну та мати повний контроль над дизайном, ви оціните наш покроковий посібник для ручного методу. А якщо ви хочете уникнути технічної складності, ми познайомимо вас з Claspo — потужним інструментом без коду для створення адаптивних, високоефективних спливаючих вікон в кілька кліків.
Як бонус, ми також поділимося експертними порадами з використання спливаючих вікон на вебі, найкращими практиками дизайну та як зробити ваше спливаюче вікно природною частиною вашого сайту, а не перериванням.
Як створити спливаюче вікно в HTML та без коду
У цьому розділі ми розглянемо два основні методи: створення спливаючого повідомлення в HTML, CSS та JavaScript а також використання шаблону для спрощення процесу. Перший варіант досі використовується через безкінечні можливості налаштування. Тим часом, другий стосується рішень без коду, які набувають популярності та стають рятівними для нетехнічних користувачів і тих, хто не може дозволити собі наймати розробника, коли їм потрібно спливаюче вікно.
Спливаюче вікно в HTML CSS: метод, що вимагає коду
Розвинені навички кодингу дозволяють створити власне спливаюче вікно в HTML з нуля і адаптувати його вигляд та поведінку на сайті під ваші потреби. Отже, як зробити спливаюче вікно в HTML, якщо у вас є такі навички? Пройдемо поетапно.
Крок 1: Підготуйте своє зображення
Перш ніж почати кодити, переконайтеся, що у вас є готове зображення для вашого спливаючого вікна в HTML (не можете зробити самі? Вітаємо, вам потрібен дизайнер). Зображення має бути розміщено на сервері, щоб до нього можна було отримати доступ через URL. Ви можете завантажити своє зображення на сервер свого сайту або використати зовнішній сервіс хостингу зображень.
Крок 2: Структура віджета зі спливаючою кнопкою в HTML
Код HTML спливаючого вікна формує структуру вашого віджета. Ось пояснення коду спливаючого вікна:
1. Оголошення DOCTYPE: визначає тип документа та версію HTML.
<!DOCTYPE html>
<html lang="uk">
2. Розділ head: містить метаінформацію про документ, таку як кодування символів і посилання на стилі та скрипти.
<head>
<meta charset="UTF-8">
<title>Як створити спливаюче вікно</title>
<link rel="stylesheet" href="style.css">
<script defer src="app.js"></script>
</head>
3. Розділ body: містить основний вміст документа, включаючи спливаючу кнопку в HTML для виклику спливаючого вікна та саме спливаюче вікно.
<body>
<div class="container">
<button type="submit" class="btn" onclick="openPopup()">Подати</button>
<div class="popup" id="popup">
<img src="https://yourserver.com/path-to-image.png" alt="">
<h2>Дякую!</h2>
<p>Ваші дані успішно надіслані. Дякую!</p>
<button type="button" onclick="closePopup()">ОК</button>
</div>
</div>
</body>
</html>
- Блок контейнера: центрує спливаюче вікно в HTML і кнопку.
- Кнопка: викликає спливаюче вікно при натисканні.
- Блок спливаючого вікна: містить вміст спливаючого вікна, включаючи зображення, заголовок, повідомлення та кнопку закриття.
- Image: відображає зображення, яке ви підготували. Атрибут src повинен вказувати на URL-адресу, де розміщено ваше зображення.
Крок 3: CSS стиль попапу
Дизайн CSS попапу використовується для стилізації віджета і надання йому привабливого вигляду. Ось що робить кожна частина CSS-коду:
1. Імпорт шрифту: імпортує користувацький шрифт з Google Fonts.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
2. Загальні стилі: встановлює стилі за замовчуванням для всіх елементів.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
3. Стилі контейнера: центрує вміст на сторінці.
.container {
width: 100%;
height: 100vh;
background: linear-gradient(to right, #485563, #29323c);
display: flex;
align-items: center;
justify-content: center;
}
4. Стилі кнопки: стилізує кнопку попапа і додає анімацію натискання.
.btn {
padding: 10px 60px;
background: #fff;
border: 0;
outline: none;
cursor: pointer;
font-size: 22px;
font-weight: 500;
border-radius: 10px;
transition: transform 0.2s;
}
.btn:active {
transform: scale(0.95);
}
5. Стилі попапу: стилізує попап та контролює його видимість і анімацію входу (таку як затухання або слайд).
.popup {
width: 400px;
background: #fff;
border-radius: 6px;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%) scale(0.1);
text-align: center;
padding: 0 30px 60px;
color: #333;
visibility: hidden;
transition: all 0.4s ease-in-out;
}
.open-popup {
visibility: visible;
top: 50%;
transform: translate(-50%, -50%) scale(1);
}
.popup img {
width: 100px;
margin-top: -50px;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.popup h2 {
font-size: 38px;
font-weight: 500;
margin: 30px 0 10px;
}
.popup button {
width: 100%;
margin-top: 50px;
padding: 10px 0;
background-color: #e02189;
color: #fff;
border: 0;
outline: none;
font-size: 18px;
border-radius: 4px;
box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}
Поради, як виділити ваш попап у HTML CSS
Коли ви створюєте HTML попап, справа не лише у функціональності — важливий візуальний ефект. Добре спроектований віджет може миттєво привернути увагу і підвищити зацікавленість, якщо він створений з ясністю і метою. Ось як покращити ваш попап, використовуючи загальні стратегії дизайну.
1. Використовуйте накладання з налаштованою прозорістю.
Накладання — це напівпрозорий шар, що знаходиться позаду попапа. Воно затемнює решту екрану, дозволяючи користувачам зосередитися на вашому повідомленні. Щоб цього досягти, створіть окремий div як контейнер накладання для попапа і встановіть його background-color з rgba та відповідним значенням прозорості (наприклад, 0.6) у вашому CSS.
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6); /* накладання з прозорістю */
z-index: 999;
display: none; /* переключається JS */
}
2. Тримайте HTML попап-скриньку по центру і стилізованою для впливу.
Коли ви створюєте HTML попапи за допомогою CSS, переконайтеся, що ваш контейнер стилізований з урахуванням відступів, максимальної ширини, тонкої тіні та округленого борту. Спроектуйте свій контейнер попапу з білим або яскравим фоном, тонкою тінню і щедрими відступами. Незалежно від того, ви розміщуєте його у верхній частині екрану, по центру чи біля меню, візуальний контраст є ключовим. Використовуйте сильний заклик до дії і привертальний шрифт (наприклад, Poppins чи Montserrat), щоб підвищити видимість.
3. Додайте плавні анімації за допомогою CSS-транзицій.
Анімації, такі як ефект зникання чи ковзання вниз, можуть покращити враження. Застосуйте клас із властивостями переходу і transform до вашого HTML і CSS попапу. Це надає йому більш інтерактивного та сучасного вигляду, навіть без важких ефектів JavaScript.
4. Адаптивний за замовчуванням.
Не забувайте забезпечити, щоб ваш попап працював на всіх розмірах екранів. Використовуйте запити @media та ширини, основані на відсотках, для вашого контейнера. Це робить ваш HTML попап мобільно-дружнім без додаткових інструментів.
Комбінуючи структуру, HTML та CSS, і легкі анімації, ви можете створити HTML попап, який є не лише функціональним, але й насправді захоплюючим — розроблений для того, щоб виділятися і перетворювати.
Крок 4: Функціональність JavaScript
JavaScript використовується для того, щоб оживити екран попапу в HTML, контролюючи його поведінку. Ось що роблять базові функції:
1. Отримати елемент попапу: вибирає елемент попапу за його ID.
let popup = document.getElementById('popup')
2. Функція відкриття попапу: додає клас, щоб показати попап та ініціювати анімацію.
function openPopup() {
popup.classList.add('open-popup')
}
3. Функція закриття попапу: видаляє цей клас, щоб приховати попап та відновити початковий стан.
function closePopup() {
popup.classList.remove('open-popup')
}
За допомогою JavaScript ви можете контролювати, коли та де з'являється ваш попап — наприклад, на певних сторінках, таких як ціноутворення, блог чи сторінка оформлення замовлення. Це гарантує, що ваше повідомлення є доречним та вчасним, а не нав'язливим.
if (window.location.pathname === "/pricing") {
popup.style.display = "block";
}
Метод без коду: шаблони попапів
Основні переваги безкодових рішень для створення попапу у HTML - це економія часу і гнучкість. Коли у вас є готовий шаблон, ви не витрачаєте час на підготовку зображення попапу, а редактор з функцією перетягування дає вам можливість налаштувати шаблон відповідно до ваших потреб. Ми можемо додати до цього списку економію грошей, оскільки вам не потрібні розробник і дизайнер. Отже, як у цьому випадку додати попап у HTML? Загалом, процес зводиться до наступних кроків, роблячи його набагато простішим за кодування попапу в HTML з CSS з нуля:
- Виберіть готовий шаблон, який відповідає вашій меті (наприклад, опт-ін попап, інформер, запобігання залишення кошика тощо) з опцій, доступних у бібліотеці.
- Налаштуйте його відповідно до вашого бренду, дизайну сайту та специфічних вимог.
- Перегляньте, як ваш готовий попап виглядає на мобільних та десктопних версіях сайту.
- Налаштуйте правила відображення попапу (коли, де, як часто і кому він показується тощо).
- Вставте попап на ваш сайт і опублікуйте його.
Цей варіант здається набагато простішим за попередній, чи не так? Так і є, якщо обираєте Claspo. Адже ви вже прийшли до нас, тому дивіться нижче, як створити попап у HTML з CSS (звичайно, за допомогою нашого інтуїтивного редактора!) і приступайте до справи одразу ж після прочитання статті.
Як створити попап з Claspo: 8 кроків
Перше, що варто знати, це те, що Claspo, один з найкращих інструментів для попапів, надає ті ж самі всебічні можливості налаштування, що і метод, який вимагає кодування. Однак, на відміну від останнього, Claspo підходить для тих, хто не має навичок програмування та дизайну. Це робить створення спливаючого вікна в HTML простою і швидкою задачею. Давайте подивимося, як створити спливаюче вікно за допомогою нашого конструктора без зайвих зусиль.
Крок 1. Зареєструйтесь та почніть
Створіть безкоштовний акаунт у Claspo та натисніть кнопку "Новий віджет". Вам буде запропоновано створити віджет з нуля або використати галерею шаблонів. Щоб максимально зберегти час, ми виберемо другий варіант.
Крок 2. Виберіть шаблон
Наша бібліотека шаблонів містить більше 1000 готових шаблонів, які охоплюють кілька варіантів використання. Ви можете легко знайти свій ідеальний варіант, використовуючи фільтри на лівій стороні екрану. Вони дозволяють вибрати варіант використання, макет (HTML форма спливаючого вікна, плаваюча панель, плаваючий блок, блокувальник контенту, тощо), галузь і тему. Як тільки ви знайшли приклад, який вам потрібен, перейдіть до редактора.
Крок 3. Налаштуйте ваш шаблон
Оскільки ця стаття присвячена тому, як зробити спливаюче вікно в HTML на вашому сайті, ми вибрали спливаюче вікно як макет і один з найпопулярніших варіантів його використання — збір даних користувача. Як ви бачите на прикладі нижче, наш шаблон можна змінити до невпізнання.
В цьому випадку ми замінили зображення, спочатку створивши його за допомогою AI, замінили текст форми спливаючого вікна в HTML, видалили одне поле введення, додали прапорець для отримання згоди на обробку даних, щоб зробити спливаюче вікно відповідним до GDPR, і в кінцевому підсумку змінили колірну схему, включаючи колір кнопки СТА. Єдине обмеження — це ваше уявлення, тому ви можете налаштувати шаблон ще більше.
Крок 4. Попередній перегляд вашого спливаючого вікна
Після внесення всіх необхідних змін, ви можете переглянути, як виглядає ваше спливаюче вікно на десктопній та мобільній версіях вашого сайту. Для цього натисніть на іконку відповідного пристрою у верхньому правому куті екрану. Якщо вас щось не влаштовує, ви завжди можете продовжити редагування.
Крок 5. Задайте правила відображення
Якщо ви цікавитесь, як створити спливаюче вікно в HTML на сайті, не дратуючи користувачів, Claspo для вас. Наша платформа пропонує розширені можливості таргетингу та оптимальні правила відображення для безперебійного користувацького досвіду, які встановлені за замовчуванням. Наприклад, спливаюче повідомлення в HTML автоматично з'являється один раз за сесію після того, як користувач провів 20 секунд на сторінці. Крім того, воно автоматично перестає відображатися тим, хто вже залишив свій електронний лист, допомагаючи вам ефективно охоплювати аудиторію вашого сайту. Логічно, правда?
А найголовніше — ми автоматично захищаємо ваші спливаючі вікна від одночасної появи і накладання. Це означає, що ви можете безпечно масштабувати свою стратегію генерації лідів за допомогою спливаючих вікон без страху відлякати відвідувачів.
Втім, ви завжди можете налаштувати правила відображення відповідно до ваших потреб. Ви можете легко перемикати різні опції, щоб націлитися на певну поведінку користувачів, наприклад, увімкнути тригери виходу. На відміну від методу, що вимагає коду, вам просто потрібно натиснути кілька кнопок у нашому розділі «Тригеринг», не заглиблюючись у складний CSS для спливаючих вікон. Це означає, що спливаюче вікно Claspo пропонує більше контролю та гнучкості при створенні спливаючого вікна за допомогою наших інтуїтивно зрозумілих інструментів для збору електронних адрес та іншої цінної інформації.
Крок 6. Інтеграція Claspo з обраною вами платформою
Окрім питання про те, як створити спливаюче вікно на вашому сайті, вам потрібно зрозуміти, як синхронізувати спливаюче повідомлення в HTML з іншими маркетинговими інструментами. Але у Claspo це завдання теж зводиться до кількох кліків.
- Інтегруйте Claspo з підходящою CRM, ESP або CDP зі списку, що випадає. У цьому випадку вся інформація про користувачів, зібрана за допомогою наших спливаючих вікон, буде миттєво передана на вибрану платформу для подальшої сегментації та запуску ваших автоматичних кампаній.
- Інтеграція Claspo з Google Analytics. Це дасть вам більш цінну інформацію про те, як користувачі взаємодіють із вашими спливаючими вікнами, і допоможе вам оптимізувати їх для кращої продуктивності.
Крок 7. Встановіть своє спливаюче вікно
Коли ваше спливаюче вікно готове, ви отримаєте готовий скрипт-код, який потрібно вбудувати на ваш сайт. Ви, напевно, думаєте: "Зачекайте! Я думав, ми говоримо про те, як створити спливаюче вікно на вебсайті без навичок кодування спливаючих вікон!" Це правда! У Claspo вам потрібно лише скопіювати та вставити готовий код, згідно з однією з наших покрокових інструкцій. Ви легко знайдете їх під вашим кодом скрипта в нашому редакторі.
Втім, якщо ви не можете впоратися з цим самостійно, сміливо звертайтеся до нашої служби підтримки, і ми встановимо HTML спливаюче повідомлення на вашому вебсайті абсолютно безкоштовно!
Крок 8. Аналізуйте та оптимізуйте
Ваше спливаюче вікно створено і активно працює, щоб збільшити ваші конверсії! Але наскільки воно успішне? Ви завжди можете відстежувати ключові показники ефективності кожного спливаючого вікна, такі як кількість унікальних переглядів, кількість цільових дій та конверсії безпосередньо в Claspo. Чи є у вас ідеї покращення роботи вашого спливаючого вікна? Використовуйте наше A/B тестування, щоб експериментувати з будь-якими елементами і перевіряти, що найбільше підходить вашій аудиторії.
Claspo намагається спростити ваше завдання і швидше отримати бажані результати. З огляду на це, наша маркетингова команда створила шаблон A/B тестування. Він містить критичні етапи цього процесу і дозволяє втілювати будь-які гіпотези в життя. Отримайте його безкоштовно і використовуйте для всіх наступних A/B тестів (не лише тих, що стосуються спливаючих вікон).
Як оформити попап, щоб він був зручним для користувача
Увага: оптимальний вигляд вашого попапа можна визначити тільки через A/B тестування. Однак декілька базових правил допоможуть створити дизайн попапа, який буде привабливим для користувачів і ефективним для вас.
- Брендинг є вирішальним, тому переконайтеся, що всі елементи дизайну попапа відповідають кольоровій гамі та стилю вашого бренду. Це допоможе підкреслити ідентичність бренду і зробити попап природною частиною вашого сайту.
- Пам'ятайте про принцип взаємності і запропонуйте щось в обмін за їх контактну інформацію.
- Підсиліть ваше повідомлення за допомогою зображення, щоб збільшити клікабельність до 25%. Використовуйте зображення високої роздільної здатності, щоб вони виглядали добре на всіх пристроях. Розмиті або пікселізовані зображення можуть знизити професійність вашого попапа.
- Не додавайте занадто багато полів для введення. Статистика показує, що попапи з двома полями для введення мають найвищий коефіцієнт конверсії. Цього достатньо, щоб уточнити контактні дані потенційного клієнта та його ім'я, не набриджаючи формою попапу.
- Переконайтеся, що кожне поле чітко позначене, щоб користувачі точно знали, яку інформацію потрібно вказати. Використовуйте текст-підказку, щоб надати приклади або додаткові інструкції.
- Дизайн для видимості та читабельності. Використовуйте високий контраст між текстом та фоном, щоб ваше повідомлення було легким для читання. Виберіть шрифти, які легко читати, і уникайте занадто декоративних шрифтів, які важко розібрати.
- Оптимізуйте для мобільних пристроїв. Переконайтеся, що ваша форма попапу є адаптивною і добре виглядає на всіх розмірах екранів, включаючи смартфони і планшети. Переконайтеся, що кнопки і посилання достатньо великі, щоб їх легко можна було натиснути пальцем.
- Будьте обережні з віджетами на весь екран. Norman Nielsen Group радить використовувати віджети, які блокують контент, тільки коли потрібно перевірити вік користувачів, отримати їх юридичну згоду тощо. В інших випадках вони можуть зробити вашу рекламу надокучливою та дратувати користувачів.
- Переконайтеся, що існує чітко видима кнопка закриття, щоб користувачі могли легко закрити попап, якщо їх не цікавить. Дозвольте користувачам закривати попап, натиснувши за його межами або натиснувши клавішу виходу.
Поради з налаштування вікна попапу
Навіть найпривабливіший візуально попап може бути нав'язливим, відлякуючи відвідувачів з вашого сайту. Тому, для відповіді на запитання про те, як створити попап, який буде конвертувати і не набридати, важливо обговорити не лише дизайн, але й правила відображення.
Не переобтяжуйте користувачів попапами. 45,6% відвідувачів скаржатьсяпро занадто велику кількість спливаючих вікон на сайті. З Claspo ви можете уникнути цього кількома способами:
- Використовуйте попередньо налаштований тихий інтервал, щоб запобігти одночасному виникненню спливаючих вікон, і показуйте їх раз на три хвилини (інтервал можна налаштувати)
- Обирайте сторінки з відповідним контекстом для конкретного спливаючого вікна, а не просто демонструйте одне й те саме вікно по всьому сайту.
- Персоналізуйте ваші спливаючі вікна, наприклад, лише для відвідувачів, що прийшли вперше, користувачів з певної геолокації або тих, хто прийшов на сайт з конкретного джерела трафіку чи кампанії
- 28,6% користувачів ненавидять миттєву появу спливаючих вікон. Створіть спливаюче вікно, яке з'являється, коли користувач провів на сайті щонайменше кілька секунд. Таким чином, ви даєте їм час ознайомитися з компанією перед тим, як показати їм вашу пропозицію. Це покращує їх досвід перегляду та підвищує ваші шанси на конверсію. Наші попередньо визначені правила показу затримують спливаючі вікна на 20 секунд, але ви можете завжди скоригувати цей час.
- Використовуйте тригер прокрутки для вашої спливаючої форми. Це дозволяє показати спливаюче вікно, коли користувач прокрутив сторінку на певний відсоток, принісши більше конверсій ніж тригер за часом. Головна причина в тому, що ваше спливаюче вікно з'являється в правильному контексті.
Наприклад, якщо користувач прочитав вашу статтю в блозі до певного пункту, запросіть його підписатися на вашу розсилку, щоб отримувати більше корисної інформації. Спливаюче вікно може також з'являтися, коли користувач дійшов до секції з цінами, щоб запропонувати знижку на перше замовлення або безкоштовну пробну версію.
- Своєчасно зупиняйте ваше спливаюче вікно. 20% користувачів дратуються, коли вони бачать ті самі спливаючі форми кожен раз при відвідуванні сайту. Подбайте про їхній досвід! Не показуйте спливаюче вікно тим, хто вже закрив його один або кілька разів, і тим, хто вже залишив свої контактні дані. Це легко здійснити з Claspo.
Висновок
Отже, ось і все! Ви дізналися, як створити HTML спливаючі вікна і надзвичайно простий шлях, який не вимагає кодування. Ми сподіваємося, що ви побачили, наскільки Claspo може насправді спростити ваше життя та ваші проекти веб-дизайну. З Claspo вам не потрібен жодний попередній досвід у програмуванні, щоб отримати свій перший віджет для сайту. Наша платформа дозволяє створювати спливаючі вікна, які виглядають чудово на будь-якому пристрої, від настільних комп'ютерів до смартфонів, забезпечуючи бездоганний досвід для ваших відвідувачів.
Чи ваша мета полягає в побудові списку електронних адрес із привабливими прикладами email спливаючих вікон, збиранні відгуків або оголошенні спеціальної пропозиції, ви можете буквально створити вражаючі спливаючі вікна за лічені хвилини. Як тільки ви відкриєте для себе успішні випадки використання спливаючих вікон, ви, звісно, теж хочете створити спливаюче вікно для свого вебсайту. Ось чому ми запрошуємо вас скористатися нашим безкоштовним планом на все життя. Ви можете почати створювати та бачити реальні результати для вашого бізнесу, не витрачаючи ні копійки. Це ідеальний спосіб використати HTML (без фактичного кодування!) для підвищення продуктивності вашого сайту. Чому б не спробувати сьогодні та зрозуміти, як легко створювати ефективні віджети для вашого сайту?
