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

За допомогою попапів SendPulse ви можете персоналізувати комунікацію, щоб підвищити залученість, покращити конверсію та зменшити кількість відписок. Інтегруйте попап зі своїм сайтом, а також створюйте сценарії показу.

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

Зміст

Tilda

Віджет онлайн-чату або попапу можна додати тільки в платних акаунтах Tilda. Читайте докладніше — «Вставка HTML-коду».

Авторизуйтесь у Tilda та перейдіть до редагування сайту. Відкрийте бібліотеку блоків унизу сторінки. Потім перейдіть до розділу «Інше» та виберіть блок T123 «HTML-код».

Вставте код скрипту в блок і натисніть «Зберегти та закрити».

У режимах редагування та перегляду скрипт виводиться текстом. Щоб він запрацював, натисніть «Опублікувати» у верхньому правому кутку сторінки.

Wix

Код можна додати навіть у безплатному тарифі. Читайте докладніше — «Редактор Wix: Додавання коду на сайт».

Авторизуйтесь у Wix та перейдіть в панель редагування сайту. У розділі «Вставка коду» виберіть «Вставка віджету».

Натисніть «Вставити код» над рамкою «iframe», додайте код у вікно та натисніть «Оновити» (Update). Після цього закрийте вікно налаштування HTML.

Розмістіть елемент HTML за шириною сайту, вирівняйте висоту блоку та натисніть кнопку «Опублікувати».

WordPress

Є чотири способи вставки скрипту онлайн-чату SendPulse на сторінки сайту перед тегом, що закриває < /body> ;. Встановити можна через:

  • меню «Віджети» (Widgets);
  • FTP;
  • файл-шаблон теми footer.php;
  • файл functions.php теми (шаблону) WordPress.

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

Авторизуйтеся в панелі адміністрування сайту, наведіть курсор миші на пункт «Зовнішній вигляд» у лівому меню та виберіть вкладку «Віджети».

У списку доступних віджетів виберіть «HTML-код» та натисніть «Додати віджет» (Add Widget).

Додайте код у вікно та натисніть «Зберегти».

Після цього віджет з'явиться на всіх сторінках сайту.

FTP

Перейдіть на хостинг вашого сайту або підключіться за допомогою FTP-клієнта та відкрийте файл footer.php.

Шлях до файлу: wp-content /themes/ назва вашого шаблону /footer.php.

Скористайтеся вмістом файлу вниз і знайдіть закривальний тег < /body>.

Вставте код попапу SendPulse перед ним та збережіть зміни.

Перейдіть до панелі адміністрування вашого сайту. У лівому меню у розділі «Зовнішній вигляд» (Appearance) виберіть вкладку «Редактор тем» (theme Editor).

Праворуч, у списку файлів теми виберіть «Підвал (footer.php)».

Прогорніть вміст файлу вниз і знайдіть закривальний тег < /body>.

Вставте код попапу SendPulse перед ним і натисніть «Оновити файл» (Update file).

Файл functions.php теми WordPress

На панелі адміністрування сайту виберіть «Зовнішній вигляд — Редактор тем».

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

У списку файлів теми — «Функції теми (functions.php)».

Прокрутіть вміст файлу і додайте в кінець такий код:

add_action('wp_enqueue_scripts', 'chats_widget_init');

function chats_widget_init() {
    wp_enqueue_script('loader', 'https://widget.13chats.com/assets/loader.js', false, null, true);
}
add_filter('script_loader_tag', 'add_attribs_to_scripts', 10, 3);

function add_attribs_to_scripts($tag, $handle, $src) {
    $chat_params = array('loader');
    if (in_array($handle, $chat_params)) {
        return '<script src="'.$src.
        '" data-chats-widget-id="7a2d5c74-1ffc-46ce-a3c1-214542896466" async type="text/javascript"></script>'.
        "\n";
    }
    return $tag;
}

Де data-chats-widget-id – код попапу у вашому проєкті. Щоб отримати його, авторизуйтесь на сайті SendPulse, відкрийте налаштування відповідного проєкту та скопіюйте код на вкладці «Встановити код» (Install code).

Натисніть «Оновити файл» (Update file).

OpenCart

Є два способи встановлення віджету онлайн-чату на всі сторінки сайту через:

  • адмін панель;
  • модулі;
  • FTP.

Розглянемо докладно всі варіанти.

Адмін панель

Скрипт онлайн-чату SendPulse відповідає вимогам до розміщення коду Google, тому його можна вставити в комірку, призначену для коду Google Analytics. Ви можете розмістити в ній обидва коди або лише скрипт SendPulse — це ніяк не вплине на працездатність сайту. Але не рекомендуємо додавати в поле інші сторонні коди, щоб не викликати конфлікту.

Щоб знайти потрібну комірку, авторизуйтеся в адміністративній панелі сайту і в головному меню на вкладці «System» виберіть розділ «Settings».

Виберіть кнопку «Edit» праворуч.

Перейдіть вниз сторінки та знайдіть поле «Google Analytics Code». Скопіюйте код попапу SendPulse і вставте в поле замість або після коду Google Analytics. Натисніть «Save», щоб зберегти зміни.

Модулі

У новій версії CMS скрипт також встановлюється в комірку для Google Analytics. Розміщення в ній обох кодів або скрипту SendPulse ніяк не вплине на працездатність сайту. Не рекомендуємо додавати в поле інші сторонні коди, щоб уникнути конфлікту.

У бічному меню у розділі «Модулі / Розширення» виберіть «Розширення» (Extentions).

Виберіть тип розширення «Аналітика».

Активуйте розширення, натиснувши на зелену кнопку з «+» усередині.

Натисніть кнопку «Редагувати» навпроти вашого сайту.

Вставте код віджету SendPulse у полі «Код Google Analytics». Виберіть статус «Увімкнено» та натисніть кнопку «Зберегти».

FTP

Перейдіть на хостинг вашого сайту або підключіться за допомогою FTP-клієнта та відкрийте файл footer.twig.

Шлях до файлу: /catalog/view/theme/назва вашого шаблону/template/common/footer.twig.

Прокручуйте вміст файлу до тегу < /body>, вставте код попапу SendPulse перед ним і збережіть зміни. Онлайн-чат з'явиться на всіх сторінках сайту.

Joomla

Є три способи встановити віджет онлайн-чату на ваш сайт, через:

  • створення нового модуля;
  • менеджер шаблонів;
  • FTP.

Два перші варіанти підходять для Joomla 2.5+, через FTP можна додати код незалежно від версії CMS.

Створення нового модуля

Авторизуйтесь в адміністративній панелі сайту, на вкладці «Система» у верхньому меню виберіть пункт «Загальні налаштування» (Global Configuration), у ранніх версіях «Сайт» – «Мій профіль».

На вкладці «Загальні налаштування» знайдіть «Редактор за промовчанням» та виберіть «Редактор — Без редактора» (Editor - None). Натисніть «Зберегти» (Save).

Далі у верхньому меню на вкладці «Розширення» виберіть пункт «Модулі».

Натисніть кнопку «Створити» (New).

Виберіть тип модуля HTML-коду.

Введіть назву у полі «Заголовок».

Вставте код попапу в поле для відображення на сайті довільного коду HTML.

Налаштуйте відображення віджету в правому меню, для цього в кожному виберіть потрібну опцію:

  • «Заголовок» — «Приховати»;
  • «Позиція» — позицію модуля на сторінці у футері;
  • «Стан» — «Опубліковано»;
  • «Доступ» — відкрийте доступ до віджету для всіх відвідувачів сайту виставивши «Public».

Натисніть «Зберегти».

Менеджер шаблонів

Авторизуйтесь в адміністративній панелі сайту, у верхньому меню на вкладці «Розширення» виберіть пункт «Шаблони».

Натисніть назву шаблону, навпроти якого стоїть зірочка у графі «За замовчуванням» та значення «За замовчуванням для всіх сторінок» у графі «Сторінки».

Виберіть файл index.php.

Прокручуйте вміст комірки вниз і вставте скопійований код попапу перед закривальним тегом </body>. Натисніть «Зберегти».

FTP

Скопіюйте код віджету в налаштуваннях проєкту на вкладці «Встановити код». Зайдіть на хостинг вашого сайту або підключіться за допомогою FTP-клієнта та відкрийте файл index.php.

Шлях до файлу: /templates/назва шаблону/index.php.

Прокручуйте вміст файлу до закривального тегу < /body>, вставте код попапу перед ним і збережіть зміни.

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».

Оновлено: 27.07.2023

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

    Оцінка: 5 / 5

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