Как добавить попап в конструктор сайта
С помощью попапов 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».
Обновлено: 27.07.2023
или