Як створити вбудований попап та додати його на сайт

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

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

Створіть вбудований попап

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

Перейдіть до потрібного проєкту та натисніть Додати попап (Add pop-up).

У модальному вікні оберіть Вбудована (Inline).

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

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

Читайте докладніше: Як створити розумний попап.

Налаштуйте контент

У вкладці Стиль ви можете налаштувати зовнішній вигляд.

Ви можете вибрати тип попапу, його розташування, налаштувати ширину та інтервали, вибрати фон та кольори, розмір, а також налаштувати ефекти.

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

У вкладці Елементи ви можете додати обкладинку та елементи, які підходять для вашого попапу.

Налаштуйте показ віджету на сайті

На вкладці Умови відображення (Display conditions) налаштуйте відображення попапу на сайті.

Додайте селектор

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

Читайте докладніше: Як знайти селектор CSS.

Вставте селектор у форматі #unique_id у поле Селектор елемента на сайті (Your website element selector) та натисніть Перевірити селектор (Check selector).

У модальному вікні, що розгорнеться , введіть посилання на ваш сайт у полі Домен (Domain) та натисніть Перевірити (Check).

Сайт повинен співпадати з проєктом, де ви створюєте попап.

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

Визначте місце розташування попапу

Виберіть, яке положення буде займати попап щодо елементу сайту:

Першою всередині (Front inside) Попап буде показуватись в елементі на сайті, перед контентом елементу.
Останньою всередині (Last inside) Попап буде показуватись в елементі на сайті, після контенту елементу.
Замість (Instead of) Попап буде показуватись на місці елементу, допоки не будуть виконані умови його відображення або відвідувач сайту не закриє попап — тоді елемент сайту знову з’явиться на екрані.
Перед (Before) Попап буде показуватись на сторінці сайту перед елементом.
Після (After) Попап буде показуватись на сторінці сайту після елементу.

Виберіть умови показу

Нижче ви можете налаштувати сценарій показу опитування.

Читайте детальніше: Як налаштувати сценарій показу попапа.

Якщо у вас в проєкті є попап типу Лаунчер, ви можете запускати поточний попап з його допомогою. Для цього активуйте перемикач Відкрити цей попап за кліком на лаунчер (Open this pop-up upon launcher click) та виберіть лаунчер з випадного списку.

Натисніть Далі (Next) у правому верхньому куті екрану.

Налаштуйте збереження даних та опублікуйте попап

У наступній вкладці Збереження даних (Data saving) ви можете вибрати, де зберігати дані учасників опитування у CRM та Email сервісах.

Читайте докладніше: Налаштуйте збереження даних.

Щоб опублікувати попап, натисніть Зберегти та опублікувати (Save and publish) у правому верхньому куті екрану.

Переглядайте результат

Після публікації попап буде доданий до вказаного елементу на вашому сайті.

Також у вкладці Попапи ви можете відслідковувати статистику переглядів.

Читайте також: Як переглядати статистику попапів.

    Оцініть, наскільки стаття була корисною "Як створити вбудований попап та додати його на сайт"

    Оцінка: 4 / 5 (4)

    Назад

    Як створити опитування

    Далі

    Як створити сценарій ланцюжка для попапів

    Популярне в нашому блозі

    Почніть користуватися сервісом SendPulse прямо сьогодні