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

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

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

Зміст

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

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

Перейдіть до потрібного проєкту та натисніть Додати попап (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) та виберіть лаунчер з випадного списку.