Як додати попап у конструктор сайту
За допомогою попапів SendPulse ви можете персоналізувати комунікацію, щоб підвищити залученість, покращити конверсію та зменшити кількість відписок. Інтегруйте попап зі своїм сайтом, а також створюйте сценарії показу.
Розглянемо, як додати код попапу SendPulse до CMS та кастомних сайтів без програміста.
У CMS потрібно вставити лише код попапу. Сценарій його показу, час, частота, сторінка тощо налаштовуються в умовах показу конструктора попапів SendPulse.
WordPress
Перейдіть у Плагіни (Plugins) > Додати новий (Add plugin).
За допомогою погуку знайдіть плагін Insert Headers and Footers та натисніть Встановити (Instal now). Натисніть Активувати (Activate).
Перейдіть до Плагіни (Plugins). У секції плагіну WP headers and Footers перейдіть у Settings > Insert Headers and Footers.
У полі Scripts in Footer вставте свій код попапу.
Joomla
Перейдіть в панель адміністратора та перейдіть у розділ Система (System) > Шаблони (Templates) > Шаблони сайту (Site Templates).
Знайдіть ваш сайт та натисніть на його назву та у лівій панелі виберіть файл index.php.
Прокрутіть вміст вниз і вставте скопійований код попапу перед закривальним тегом </body>.
Натисніть Зберегти (Save).
Shopify
Авторизуйтесь в панелі адміністратора Shopify та перейдіть до Online Store > Themes. Навпроти вашої теми натисніть три крапки та виберіть Edit code.
Відкрийте файл layout > theme.liquid. Перед закривальним тегом </body> вставте ваш код попапу.
Щоб зберегти зміни, натисніть Save праворуч вверху.
OpenCart
Перейдіть у панель адміністратора і в бічному меню натисніть Дизайн (Design) > Редактор теми (Theme editor).
У секції Chose your store виберіть магазин з випадного списку та у Chose your template виберіть файл Common > footer.twig.
Прокрутіть вміст вниз і вставте скопійований код попапу перед закривальним тегом </body>.
Натисніть Зберегти (Save).
Щоб попап відображався на сайті, після додавання коду необхідно почистити кеш теми. Для цього перейдіть у Dashboard та натисніть на іконку шестерні (Developer Settings)
У модальному вікні навпроти Theme cache у секції Action натисніть на кнопку оновлення.
Wix
Перейдіть у панель адміністратора Wix та натисніть Редагувати сайт (Edit Site).
Натисніть на + Додати елементи (Add elements) та виберіть Вставка коду (Embed code) > Вставка HTML (Embed HTML).
Виберіть тип вставки Код (Code), введіть код попапу та натисніть Оновити (Update).
Squarespace
Авторизуйтесь в панелі адміністратора та перейдіть до Settings > Custom code > Code injection
У секції Footer вставте код попапу.
Weebly
Авторизуйтесь в панелі адміністратора та перейдіть до Settings. В розділі SEO знайдіть поле Footer Code та вставте туди код попапу.
Натисніть Save.
OctoberCMS
Перейдіть у панель адміністратора OctoberCMS > Editor > CMS > Layouts.
Виберіть layout, який використовується на ваших сторінках, наприклад, default.htm.
У структурі layout вставте код попапу перед закривальним тегом </body>, після {% page %}.
Натисніть Save у верхній панелі.
Ecwid
Вітрину інтернет-магазину на Ecwid можна підключити на будь-який сайт, створений з нуля або CMS. У такому випадку рекомендуємо додавати скрипт попа SendPulse на ваш сайт перед закривальним тегом </body> або через Google Tag Manage.
Встановити попап можна лише у платних тарифах рівня Venture та вище.
Якщо ви працюєте зі стартовим сайтом Ecwid, то можете встановити код скрипту в <head>у полі для метатегів, оскільки доступу до редагування <body> для додавання JavaScript коду у сервісі немає.
Використовувати цей спосіб рекомендуємо тільки в крайньому разі — ми не можемо гарантувати роботу скрипту, встановленого у <head>.Наприклад, є ризик некоректного передання статистики та інших неточностей.
Якщо ви усвідомлюєте всі ризики й готові скористатися цим способом, увійдіть до свого облікового запису Ecwid і виберіть вкладку Сайт на дашборді.
Опустіться нижче до розділу Налаштування SEO, знайдіть блок Мета-теги для верифікації сайту та натисніть кнопку Додати код (Add Code).
Вставте код попапу в поле, що відкрилося, і натисніть Зберегти (Save).
SpreadSimple
Код попапу SendPulse можна додати лише у платному Pro-тарифі SpreadSimple.
Увійдіть до свого облікового запису SpreadSimple та виберіть опцію Manage options для сайту, на який буде виконуватись встановлення коду.
У вертикальному лівому меню виберіть вкладку Settings.
Натисніть Inject custom code.
Вставте код попапу в полі </body> — end і натисніть Save.
Натисніть Publish, щоб опублікувати зміни.
Webflow
Скрипт попапу SendPulse можна додати лише у платних тарифах Webflow.
Увійдіть у свій обліковий запис Webflow і відкрийте налаштування відповідного проєкту: натисніть на три точки й виберіть Settings.
Перейдіть на вкладку Custom Code у верхньому меню.
Вставте код попапу в поле Footer Code і натисніть Save Changes.
Щоб попапи SendPulse почали відображатися на сайті, опублікуйте свій проєкт. Для цього натисніть на Publish у верхньому меню, за допомогою чекбоксу позначте відповідний проєкт і підтвердіть публікацію за кнопкою Publish to Selected Domain.
Nuvemshop
У магазині Nuvemshop перейдіть до розділу Loja online > Layout. Знайдіть потрібний шаблон, натисніть на три крапки та виберіть Editar código.
У спливаючому вікні натисніть Abrir FTP і завантажте файл шаблону.
Відкрийте шаблон у редакторі через FTP. Прокрутіть файл донизу та вставте скопійований код спливаючого вікна перед закривальним тегом </body>. Потім завантажте файл шаблону назад.
FTP доступний лише у платних тарифних планах.
Drupal
В адмін-панелі Drupal перейдіть до розділу Structure > Block layout. Навпроти Footer Bottom натисніть Place block.
У спливаючому вікні натисніть Add content block.
У полі Block description введіть назву блоку. У полі Body натисніть Source. Біля Text format виберіть Full HTML і вставте скопійований код спливаючого вікна. Збережіть зміни.
Horoshop
У своєму акаунті Horoshop перейдіть до Налаштування > Загальні налаштування > Скрипти. У полі Перед </body> вставте скопійований код спливаючого вікна. Збережіть зміни.
BigCommerce
У своєму акаунті BigCommerce перейдіть до Storefront > Script manager і натисніть Create a script.
Введіть назву скрипту, потім виберіть його розташування та тип. У полі Script contents вставте скопійований код спливаючого вікна та збережіть зміни.
Magento
В адмін-панелі Magento перейдіть до Content > Configuration.
Навпроти свого сайту натисніть Edit. Розгорніть розділ Footer і в полі Miscellaneous HTML вставте скопійований код спливаючого вікна. Збережіть зміни.
Після цього очистіть кеш Magento. Перейдіть до System > Cache Management і натисніть Flush Magento cache.
GoDaddy
У GoDaddy можна додати лише вбудовані спливаючі вікна.
Перейдіть до GoDaddy і натисніть Add Section. Прокрутіть униз до розділу Files & Web, виберіть HTML і натисніть Add.
Натисніть на доданий розділ. У полі Title введіть назву. У полі Custom code вставте скопійований код спливаючого вікна. Збережіть зміни.
Hostinger
Перейдіть до Hostinger і виберіть More > Integrations.
Розгорніть розділ Custom code і вставте скопійований код спливаючого вікна. Збережіть зміни та оновіть свій сайт.
Додавання коду попапу через Google Tag Manager
Щоб показувати опитування на вашому сайті, ви можете встановити код попапу безпосередньо або скористатися Google Tag Manager. Для цього скопіюйте код попапу, перейдіть Google Tag Manager та створіть тег типу Custom HTML і вставте цей код.
Виберіть тригер All Pages, щоб попап показувався на всіх сторінках сайту.
Читайте докладніше: Як додати код встановлення попапів за допомогою Google Tag Manager.
Оновлено: 12.09.2025
або