Как добавить попап в конструктор сайта

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

Рассмотрим, как добавить код попапа SendPulse в CMS и кастомные сайты без программиста.

Tilda

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

Авторизуйтесь в Tilda и перейдите в редактирование сайта. Откройте библиотеку блоков внизу страницы. Затем перейдите в раздел «Другое» и выберите блок T123 «HTML-код».

Вставьте код скрипта в блок и нажмите «Сохранить и закрыть».

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

Wix

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

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

Нажмите «Вставить код» над рамкой «iframe», добавьте код в окно и нажмите «Обновить». После этого закройте окно настройки HTML.

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

WordPress

Существует четыре способа вставки скрипта онлайн-чата SendPulse на страницы сайта перед закрывающим тегом < /body>. Установить можно через:

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

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

Меню «Виджеты»

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

Из списка доступных виджетов выберите «HTML-код» и нажмите «Добавить виджет».

Добавьте код в окно и нажмите «Сохранить».

После этого виджет появится на всех страницах сайта.

FTP

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

Путь к файлу: wp-content/themes/название вашего шаблона/footer.php.

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

Вставьте код попапа SendPulse перед ним и сохраните изменения.

Файл темы footer.php

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

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

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

Вставьте код попапа SendPulse перед ним и нажмите «Обновить файл».

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

В панели администрирования сайта выберите пункт «Внешний вид — Редактор тем».

В правом верхнем углу выберите основную тему сайта для изменения.

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

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

add_action('wp_enqueue_scripts', 'chats_widget_init');

function chats_widget_init() {
    wp_enqueue_script('loader', 'https://yuorsite.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, откройте настройки соответствующего проекта и скопируйте код на вкладке «Установить код».

Нажмите «Обновить файл».

OpenCart

Существует два способа установки виджета онлайн-чата на все страницы сайта, через:

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

Рассмотрим подробно все варианты.

Админ-панель

Скрипт онлайн-чата SendPulse соответствует требованиям к размещению кода Google, поэтому его можно вставить в ячейку, предназначенную для кода Google Analytics. Вы можете разместить в ней оба кода или только скрипт SendPulse — это никак не повлияет на работоспособность сайта. Но не рекомендуем добавлять в поле другие сторонние коды, чтобы не вызвать конфликт.

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

Выберите кнопку «Edit» справа.

Проскрольте вниз страницы и найдите поле «Google Analytics Code». Скопируйте код попапа SendPulse в и вставьте в поле вместо или после кода Google Analytics. Нажмите «Save», чтобы сохранить изменения.

Модули

В новой версии CMS скрипт также устанавливается в ячейку для кода Google Analytics. Размещение в ней обоих кодов или только скрипта SendPulse никак не повлияет на работоспособность сайта. Не рекомендуем добавлять в поле другие сторонние коды, чтобы избежать конфликта.

В боковом меню в разделе «Модули / Расширения» выберите пункт «Модули / Расширения».

Выберите тип расширения «Аналитика».

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

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

Вставьте в поле «Код Google Analytics» код виджета SendPulse. Выберите статус «Включено» и нажмите на кнопку «Сохранить».

FTP

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

Путь к файлу: /catalog/view/theme/название вашего шаблона/template/common/footer.twig.

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

Joomla

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

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

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

Создание нового модуля

Авторизуйтесь в административной панели сайта, на вкладке «Система» в верхнем меню выберите пункт «Общие настройки», в ранних версиях «Сайт» — «Мой профиль».

На вкладке «Общие настройки» найдите пункт «Редактор по умолчанию» и выберите «Редактор — Без редактора». Нажмите «Сохранить».

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

Нажмите на кнопку «Создать».

Выберите тип модуля «HTML-код».

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

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

Настройте отображение виджета в правом меню, для этого в каждом выберите необходимую опцию:

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

Нажмите «Сохранить».

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

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

Нажмите на название шаблона, напротив которого стоит звездочка в графе «По умолчанию» и значение «По умолчанию для всех страниц» в графе «Страницы».

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

Проскрольте содержимое ячейки вниз и вставьте скопированный код попапа перед закрывающим тегом </body>. Нажмите «Сохранить».

FTP

Скопируйте код виджета в настройках проекта на вкладке «Установить код». Зайдите на хостинг вашего сайта или подключитесь с помощью FTP-клиента и откройте файл index.php.

Путь к файлу: /templates/название вашего шаблона/index.php.

Проскрольте содержимое файла до закрывающего тега , вставьте код попапа перед ним и сохраните изменения.

Ecwid

Витрину интернет-магазина на Ecwid можно подключить на любой сайт, созданный с нуля или на CMS. В таком случае рекомендуем добавлять скрипт попапа SendPulse на ваш сайт перед закрывающим тегом < /body> или через Google Tag Manage.

Установить попап можно только в платных тарифах уровня Venture и выше.

Если вы работаете со стартовым сайтом Ecwid, то можете установить код скрипта в < head> в поле для мета-тегов, так как доступа к редактированию < /body> для добавления JavaScript кода в сервисе нет.

Использовать этот способ рекомендуем только в крайнем случае — мы не можем гарантировать работу скрипта, установленного в < head> . Например, есть вероятность некорректной передачи статистики и других неточностей.

Если вы осознаете все риски и готовы воспользоваться этим способом, войдите в свой аккаунт Ecwid и выберите вкладку «Сайт» на дашборде.

Опуститесь ниже до раздела «Настройки SEO», найдите блок «Мета-теги для верификации сайта» и нажмите на кнопку «Добавить код».

Вставьте код попапа в открывшееся поле и нажмите «Сохранить».

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

Обновлено: 08.04.2023