Как добавить всплывающее окно на сайт 1С-Битрикс

Введение

Попапы от WEBSET — это мощный инструмент для создания всплывающих окон, который идеально интегрируется с Битрикс. Он позволяет привлекать внимание пользователей с помощью акций, форм обратной связи, подписки на рассылку и других эффективных взаимодействий. Благодаря интуитивному интерфейсу и гибким настройкам, добавить попап виджет можно всего за несколько простых шагов без помощи разработчиков.

Попап виджеты от WEBSET превосходно работают в системе управления Битрикс независимо от используемого шаблона и редакции. Вы можете самостоятельно задать условия показа, настроить таймеры, триггеры прокрутки или клик по кнопке.

Способы добавления попапа на сайт Битрикс

Добавить popup в Битрикс можно двумя основными способами: вручную создать HTML/CSS/JS код или использовать готовое no-code решение. Процесс установки через WEBSET займет не более 5 минут и не требует специальных знаний программирования.

Создание всплывающего окна вручную через HTML/CSS/JavaScript

Традиционный способ для тех, кто имеет навыки программирования и готов потратить время на разработку собственного решения.

Шаг 1. Создание HTML-разметки

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

<div id="popup-overlay" class="popup-overlay">
  <div class="popup-container">
    <button class="popup-close">×</button>
    <h2>Специальное предложение!</h2>
    <p>Скидка 20% на первый заказ</p>
    <button class="popup-btn">Получить скидку</button>
  </div>
</div>

Шаг 2. Написание CSS-стилей

Создайте стили для позиционирования, анимации и адаптивности попапа:

.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
}
.popup-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 30px;
  border-radius: 8px;
  max-width: 500px;
}
/* ... и множество других стилей */

Шаг 3. Программирование логики на JavaScript

Напишите код для управления показом, скрытием, триггерами и cookies:

// Показ по таймеру
setTimeout(function() {
  if (!getCookie("popup_shown")) {
    document.getElementById("popup-overlay").style.display = "block";
  }
}, 3000);

// Закрытие попапа
document.querySelector(".popup-close").addEventListener("click", function() {
  document.getElementById("popup-overlay").style.display = "none";
  setCookie("popup_shown", "1", 7);
});

// Exit intent
document.addEventListener("mouseout", function(e) {
  if (e.clientY < 0) {
    // показать попап
  }
});
/* ... и еще много кода для разных сценариев */

Шаг 4. Интеграция в Bitrix

  • Перейдите в Административный раздел → Настройки → Настройки продукта → Сайты → Шаблоны сайтов
  • Выберите используемый шаблон и нажмите «Изменить»
  • В файле header.php добавьте CSS в секцию <head>
  • В файле footer.php добавьте HTML-разметку и JavaScript перед </body>
  • Протестируйте на разных устройствах и браузерах
  • Исправьте баги и доработайте адаптивность

Шаг 5. Тестирование и доработка

Проверьте работу попапа в различных сценариях: мобильные устройства, разные браузеры, конфликты с другими скриптами. Обычно на создание качественного попапа вручную уходит 4-8 часов работы.

  • ✅ Преимущества: полный контроль над кодом; не зависит от внешних сервисов; можно кастомизировать под любые требования.
  • ❌ Недостатки: требует знаний HTML, CSS и JavaScript; много времени на разработку и тестирование; сложно добавлять новые попапы; нет встроенной аналитики; необходимо вручную обеспечивать кроссбраузерность и адаптивность; любые изменения требуют правки кода.

Добавление через no-code платформу WEBSET

Быстрый и удобный способ подключения popup через автоматическую синхронизацию с единой панели управления — без написания кода.

Шаг 1. Регистрация и настройка аккаунта

  • Зарегистрируйтесь на WEBSET и создайте новую организацию
  • Выберите «Добавить сайт» и укажите адрес вашего Битрикс сайта
  • Добавьте домен сайта в настройки проекта

Шаг 2. Создание и настройка попапа

  • Выберите подходящий шаблон (скидка, подсказка, форма сбора контактов)
  • Настройте контент, дизайн, кнопки и функциональность в визуальном редакторе
  • Задайте условия показа: по времени, при попытке закрытия страницы, при достижении определенной прокрутки или клике по элементу
виджет попапа для Битрикс виджет попапа с формой для Битрикс

Шаг 3. Установка скрипта в Битрикс

Получите скрипт подключения в разделе «Подключение» личного кабинета WEBSET.

Способ 1: Через файлы шаблона

  • Перейдите в Административный раздел → Контент → Файлы и папки → bitrix → templates → название_вашего_шаблона
  • Откройте файл header.php на редактирование
  • Найдите вызов <?$APPLICATION->ShowHead()?> и вставьте скрипт перед ним в секции <head>

Способ 2: Через настройки сайта (если доступно)

  • В административной панели найдите настройки сайта
  • Найдите раздел для добавления дополнительного HTML-кода в HEAD
  • Вставьте полученный скрипт и сохраните настройки

Шаг 4. Готово!

Попап автоматически появится на вашем сайте. Весь процесс занимает 3-5 минут. В любой момент вы можете зайти в личный кабинет WEBSET и изменить дизайн, текст или условия показа без правки кода на сайте.

  • ✅ Преимущества: не требует навыков программирования; настройка за 3-5 минут; визуальный редактор с готовыми шаблонами; централизованное управление всеми попапами; встроенная аналитика и A/B тестирование; автоматическая адаптивность под все устройства; быстрое внесение изменений без правки кода; поддержка сегментации пользователей; готовые триггеры показа.
  • ❌ Недостатки: требуется доступ к настройкам сайта или шаблону для установки скрипта один раз; для расширенных функций необходим платный тариф.

Теперь вы можете эффективно использовать попапы от WEBSET на своем сайте Битрикс. Создайте виджет в личном кабинете → настройте условия показа → опубликуйте → виджет автоматически появится на вашем сайте 🚀

Резюме

Добавление popup на сайт 1С-Битрикс возможно двумя путями: создание вручную через HTML/CSS/JavaScript (занимает 4-8 часов, требует навыков программирования) или использование WEBSET (настройка за 3-5 минут без кода). WEBSET предлагает готовые шаблоны, визуальный редактор, встроенную аналитику и возможность быстро менять попапы без правки кода сайта.

Попапы помогают собирать больше заявок, информировать о акциях и удерживать внимание пользователей. Виджет WEBSET полностью совместим с любыми редакциями 1С-Битрикс и не конфликтует с установленными модулями или компонентами системы.

Часто задаваемые вопросы (FAQ)

  • Что такое popup и зачем он нужен?
    Popup — это всплывающее окно, которое помогает донести важную информацию до пользователя, предложить скидку, собрать контактные данные или уведомить о специальных предложениях. В 1С-Битрикс он эффективно используется для повышения конверсии.
  • Сколько времени занимает создание попапа вручную?
    Разработка качественного всплывающего окна с нуля (HTML, CSS, JavaScript) обычно занимает 4-8 часов работы, включая адаптивность и тестирование. С WEBSET — 3-5 минут.
  • Нужны ли навыки программирования для использования WEBSET?
    Нет, платформа WEBSET не требует знаний программирования. Визуальный редактор позволяет создавать и настраивать попапы мышкой, без написания кода.
  • Совместим ли ВЕБСЕТ с различными шаблонами Битрикс?
    Да, попап виджеты работают с любыми шаблонами и редакциями Битрикс, включая кастомные решения. Система автоматически адаптируется под структуру сайта.
  • Подходит ли для мультисайтовости Битрикс?
    Если на вашем Битрикс используется несколько сайтов, необходимо добавить код виджета в шаблон каждого сайта отдельно или использовать единый скрипт через no-code платформу.
  • Нужно ли устанавливать дополнительные модули?
    Нет, для работы попапов WEBSET не требуется установка дополнительных модулей в Битрикс. Достаточно один раз вставить код установки в шаблон сайта.
← Перейти ко всем статьям