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

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

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

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.

Обновлено: 21.05.2024