Онлайн-чат на сайте с Битрикс24: как подключить виджет и не замедлить загрузку страниц

Онлайн-чат на сайт из Битрикс24 подключается через раздел CRM > Продажи > Каналы продаж > Виджет на сайт: создаете виджет, выбираете каналы, копируете код и вставляете его в шаблон сайта перед закрывающим тегом </body>. Чтобы виджет не замедлял загрузку страниц, скрипт загружают с задержкой, по первому действию посетителя, и проверяют результат в PageSpeed Insights.

Типичная история выглядит так. Компания ставит чат, через неделю маркетолог открывает отчет PageSpeed и видит, что мобильная версия просела, а в списке замечаний появились сторонние скрипты. Начинается спор: убрать чат и потерять заявки или оставить и мириться с медленным сайтом. Выбирать между этими вариантами не приходится. Виджет Битрикс24 нормально уживается с быстрым сайтом, если продумать, когда и где он загружается.

Что такое виджет Битрикс24 на сайт и какие каналы в нем есть

Виджет на сайт — это кнопка в углу страницы, которая собирает в одном месте все способы связи с компанией и передает обращения прямо в CRM Битрикс24. По справке Битрикс24 о создании и настройке виджета, в него можно добавить три типа каналов:

• Открытые линии: онлайн-чат и мессенджеры. Можно подключить несколько линий через кнопку «Добавить открытую линию».
• CRM-форма: заявка на товар, запись на услугу, запрос коммерческого предложения.
• Обратный звонок: посетитель оставляет номер, портал соединяет его с менеджером. Этот канал доступен не на всех тарифах.

Открытая линия — это канал Битрикс24, через который сообщения из чата на сайте и мессенджеров попадают к сотрудникам в одном окне, а система сама создает или находит клиента в CRM. Как распределять такие обращения между менеджерами и что отвечать в нерабочее время, мы подробно описали в статье про очередь, часы работы и автоответ открытых линий. Ниже речь пойдет о стороне сайта: куда ставить код и как сохранить скорость.

Чем виджет удобнее отдельного чата от стороннего сервиса: переписка не уходит в чужой кабинет. Менеджер отвечает из Битрикс24, диалог сохраняется в карточке лида или контакта, а руководитель видит, сколько обращений пришло с сайта и сколько из них дошло до сделки.

Как подключить онлайн-чат Битрикс24 на сайт: пошаговая инструкция

Подключение занимает 15-30 минут, если открытая линия уже настроена. Порядок такой:

1. Откройте в портале CRM > Продажи > Каналы продаж > Виджет на сайт. Если на портале уже есть виджет по умолчанию, его можно отредактировать. Для отдельного сайта или особых настроек нажмите «Создать виджет» и задайте название.
2. Добавьте каналы. Для чата выберите открытую линию. Если у компании несколько направлений, например продажи и сервис, лучше завести две линии и показывать их на разных страницах.
3. Задайте рабочее время: часовой пояс, выходные и праздничные дни. Для чата, CRM-формы и обратного звонка время можно задать разное.
4. Укажите страницы показа. В настройках есть два режима: «На всех страницах, за исключением» и «Только на указанных страницах».
5. Настройте общий вид: цвет, положение кнопки, показ сразу или с задержкой, отображение на мобильных устройствах, язык.
6. Настройте автоприветствие: текст, имя и фото сотрудника, задержку перед показом. Приветствия могут отличаться для разных страниц.
7. Сохраните виджет, в списке виджетов нажмите «Код на сайт», затем «Скопировать в буфер».
8. Вставьте код в шаблон сайта перед закрывающим тегом </body>. Так рекомендует справка Битрикс24.

Если сайт сделан в самом Битрикс24 (Сайты и магазины), код вставлять не нужно: виджет выбирают в настройках сайта. На коробочной версии портала перед установкой стоит обновить Главный модуль, об этом прямо сказано в справке.

Куда вставлять код на WordPress, 1С-Битрикс и Tilda

Код виджета — обычный фрагмент JavaScript, поэтому способ вставки зависит от движка сайта:

Платформа	Где обычно размещают код	На что обратить внимание
WordPress	Файл footer.php дочерней темы или плагин для вставки кода в подвал	Правка основной темы слетит при ее обновлении. Плагины оптимизации могут изменить порядок загрузки скрипта
1С-Битрикс	Шаблон сайта, перед </body>	Если шаблонов несколько (мобильный, лендинги), код нужен в каждом
Tilda	Настройки сайта, раздел для HTML-кода в конце страницы, или блок HTML	Проверяйте, что код стоит один раз, а не в каждом блоке
Сайт в Битрикс24	Код не нужен, виджет выбирается в настройках сайта	По умолчанию там уже стоит предустановленный виджет

Еще один момент касается сайтов с несколькими доменами или языковыми версиями. Если казахская и русская версии живут на разных адресах, проверьте, что код стоит на обеих и что в виджете выбран нужный язык. Для разных направлений бизнеса можно завести отдельные виджеты с разными открытыми линиями.

Частая ошибка на WordPress: код вставили и в тему, и через плагин. На странице появляются две кнопки или одна, но скрипт грузится дважды. Проверить просто: откройте исходный код страницы и поищите адрес загрузчика с доменом bitrix24. Он должен встречаться один раз.

Почему виджет чата замедляет сайт

Виджет замедляет сайт потому, что это сторонний JavaScript: браузер скачивает его с серверов Битрикс24, разбирает и выполняет, а все это время основной поток занят и страница хуже реагирует на действия посетителя. Это свойство любого онлайн-чата на стороннем скрипте, и виджет Битрикс24 здесь не исключение.

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

На метриках это видно так:

• INP (Interaction to Next Paint) — показатель того, как быстро страница реагирует на клик или касание. По описанию метрики INP на web.dev, хорошим считается значение до 200 мс, плохим — больше 500 мс, оценивают по 75-му процентилю реальных визитов. Тяжелые сторонние скрипты, выполняющиеся в момент первого касания, тянут INP вверх.
• Время загрузки главного контента (LCP). Если скрипт чата качается одновременно с крупным изображением первого экрана, картинка приходит позже.
• Сдвиги макета (CLS). Кнопка чата обычно фиксирована в углу и макет не сдвигает, но всплывающее автоприветствие поверх контента на мобильном мешает читать и нажимать.

Подробнее о том, как читать эти показатели на WordPress, мы писали в материале про Core Web Vitals на WordPress. Для виджета важно одно: самая заметная просадка приходится на мобильные устройства среднего уровня, а это основная аудитория сайтов в Казахстане.

Как подключить виджет и не замедлить загрузку страниц

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

Способ 1. Отложенная загрузка по первому действию

Код портала оборачивают в функцию, которая срабатывает один раз: при первой прокрутке, касании, нажатии клавиши или по таймеру, если посетитель ничего не делает. Именно так мы подключаем скрипты Битрикс24 на собственном сайте b2bpro.kz: загрузка стартует по событиям pointerdown, keydown, touchstart и scroll или через 6 секунд после открытия страницы, смотря что наступит раньше.

Схема кода такая (адрес загрузчика берется из кода вашего виджета, здесь он условный):

<script>
(function(w,d){
  var u='https://cdn-ru.bitrix24.kz/bXXXXXXX/crm/site_button/loader_X_XXXXXX.js';
  var done=false;
  function go(){
    if(done){return;} done=true;
    var s=d.createElement('script'); s.async=true;
    s.src=u+'?'+(Date.now()/60000|0);
    d.body.appendChild(s);
  }
  ['pointerdown','keydown','touchstart','scroll'].forEach(function(e){
    w.addEventListener(e,go,{once:true,passive:true});
  });
  w.setTimeout(go,6000);
})(window,document);
</script>

Переменная done не дает скрипту загрузиться дважды, даже если сработают сразу несколько событий. Параметр passive у обработчиков не мешает прокрутке. Таймер подстраховывает: даже если посетитель просто читает, кнопка чата появится через несколько секунд. Адрес загрузчика и параметр с временем лучше оставить таким, как в коде портала, чтобы виджет получал актуальную версию.

Способ 2. Фасад вместо настоящей кнопки

Фасад — это легкая статичная кнопка, которая выглядит как кнопка чата, а настоящий виджет загружается только после клика по ней. Этот прием описан в рекомендации Lighthouse о фасадах для сторонних ресурсов, и среди примеров там названы как раз виджеты онлайн-чатов. Lighthouse даже отдельно подсвечивает такие скрипты в отчете в пункте «Lazy load third-party resources with facades».

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

Способ 3. Настройки самого виджета

Часть нагрузки снимается без программиста, прямо в настройках портала:

• Показывайте виджет только там, где он нужен. Режим «Только на указанных страницах» убирает чат со статей блога, политики конфиденциальности и служебных страниц.
• Поставьте автоприветствие с задержкой, а не сразу. Всплывающее окно в первую секунду мешает читать и раздражает.
• Решите, нужен ли виджет на мобильных. Если на телефоне у вас уже есть кнопка звонка и мессенджера, второй плавающей кнопке там тесно.
• Не держите в виджете каналы, на которые никто не отвечает. Клиент выберет такой канал, напишет и не дождется ответа.

Как проверить, что чат не тормозит сайт

Проверка занимает полчаса и состоит из трех замеров до и после установки:

1. PageSpeed Insights. Прогоните главную и одну из ключевых посадочных страниц в мобильном режиме до установки виджета и после. Запишите оценку, LCP и общее время блокировки. Делайте по три прогона и сравнивайте средние значения: результаты лабораторных тестов заметно скачут.
2. Вкладка Network в DevTools. Откройте страницу с фильтром по слову bitrix24 и посмотрите, когда стартуют запросы виджета и сколько их. При отложенной загрузке до первого действия их быть не должно.
3. Реальные данные. Через 28 дней сравните полевые данные в отчете Core Web Vitals в Google Search Console. Лабораторный тест делается на эталонном устройстве, а в Search Console видно, как сайт работает у посетителей на их телефонах.

Отдельно проверьте сам чат: напишите в него с телефона через мобильный интернет, убедитесь, что сообщение пришло в открытую линию, а в CRM появился лид или нашелся существующий контакт. Если после ускорения чат перестал доставлять сообщения, такое ускорение придется откатить.

Типичные ошибки при установке виджета, которые мы видим на проектах

На проектах B2BPRO.KZ проблема со скоростью чаще всего возникает из-за того, как виджет установлен. Регулярно встречается следующее:

• Двойная вставка. Код стоит в теме и в плагине, или в шаблоне и в Google Tag Manager. Скрипт грузится дважды, иногда появляются две кнопки.
• Старый виджет рядом с новым. Компания сменила чат, а код прежнего сервиса остался. Посетитель видит две кнопки, сайт грузит два чата.
• Код в head. Справка Битрикс24 рекомендует место перед </body>, а размещение в начале страницы без нужды отдает скрипту приоритет перед контентом.
• Плагин оптимизации «сломал» чат. Функции объединения и отложенного выполнения JavaScript в плагинах кеширования иногда меняют порядок загрузки, и кнопка не появляется вовсе. После включения таких функций чат нужно проверять вручную, а скрипт виджета при необходимости добавить в исключения.
• Нет ответственного. Открытая линия настроена, но в очереди нет сотрудников на выходные. Клиент пишет, ответа нет, а в отчете это выглядит как «чат не работает».
• Чат показывается в нерабочее время без предупреждения. Если линия не работает ночью, лучше включить показ по рабочему времени или настроить автоответ с понятным сроком.

Еще одна ошибка из области аналитики: обращения из чата не размечены источником, и руководитель не понимает, приносит ли чат продажи. В Битрикс24 у лида из открытой линии виден канал, через который пришел клиент, и это стоит использовать в отчетах по продажам.

Чат на мобильном: что настроить отдельно

На телефоне виджет нужно настраивать отдельно от десктопа, потому что экран маленький, а интернет часто медленнее. В настройках общего вида Битрикс24 есть параметр отображения на мобильных устройствах, и его стоит выставить осознанно, а не оставить по умолчанию.

Посмотрите на мобильную версию глазами клиента. Если внизу экрана уже закреплена панель с телефоном и кнопкой мессенджера, плавающая кнопка чата может перекрыть ее или кнопку «В корзину». В таком случае либо уберите виджет на мобильных, либо сдвиньте его так, чтобы он не закрывал элементы, по которым клиент нажимает чаще всего.

Автоприветствие на телефоне занимает заметную часть экрана. Если оно выскакивает сразу после загрузки, посетитель закрывает его, не прочитав, а иногда промахивается и уходит со страницы. Задержка в несколько десятков секунд работает спокойнее: приветствие видят те, кто действительно читает страницу. Если вы используете отложенную загрузку скрипта, учитывайте, что приветствие не появится раньше, чем загрузится сам виджет: задержка приветствия добавляется к задержке загрузки.

Проверку на мобильном делайте с реального смартфона через мобильный интернет, а не только в эмуляторе браузера: так видно и скорость, и то, как кнопка ведет себя при прокрутке.

Сколько обращений дает онлайн-чат и стоит ли он того

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

Для казахстанского бизнеса онлайн-чат особенно полезен там, где клиент выбирает и сомневается: стройматериалы, оборудование, образовательные услуги, медицина, B2B-услуги. Посетителю проще задать один вопрос в чате, чем звонить или заполнять форму. А когда чат подключен через Битрикс24, переписка сразу попадает в CRM, и ее можно продолжить в мессенджере, если клиент ушел с сайта.

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

Если нужна помощь с настройкой открытых линий, распределением обращений и интеграцией сайта с CRM, посмотрите наши услуги по внедрению и настройке Битрикс24. Мы работаем с Битрикс24 с 2012 года и подключаем виджеты так, чтобы заявки доходили до менеджеров, а сайт не терял в скорости.

Частые вопросы

Можно ли поставить онлайн-чат Битрикс24 на сайт на WordPress?

Да, виджет Битрикс24 работает на любом сайте, где можно вставить JavaScript, включая WordPress. Код берут в портале через кнопку «Код на сайт» и вставляют перед закрывающим тегом body: в файл подвала дочерней темы или через плагин для вставки кода. Главное, чтобы код стоял на странице один раз.

Как сделать, чтобы виджет Битрикс24 не тормозил сайт?

Загружайте скрипт виджета отложенно: по первой прокрутке, касанию или через несколько секунд после открытия страницы. Дополнительно ограничьте показ нужными страницами в настройках виджета и поставьте автоприветствие с задержкой. Результат проверяйте в PageSpeed Insights в мобильном режиме до и после изменений.

Где в Битрикс24 найти код виджета для сайта?

Код находится в разделе CRM, Продажи, Каналы продаж, Виджет на сайт. В списке виджетов нажмите «Код на сайт», затем «Скопировать в буфер». Если сайт создан в самом Битрикс24, код не нужен: виджет выбирают в настройках сайта, и по умолчанию там уже стоит предустановленный вариант.

Можно ли показывать чат только на некоторых страницах?

Да, в настройках виджета есть режимы «Только на указанных страницах» и «На всех страницах, за исключением». Это удобно, чтобы убрать чат со статей блога и служебных страниц или показывать разные открытые линии на страницах разных услуг. Так же по страницам настраивается и автоприветствие.

Почему после установки плагина кеширования пропал чат на сайте?

Скорее всего, плагин объединил или отложил скрипты так, что загрузчик виджета перестал выполняться. Отключите по очереди функции оптимизации JavaScript и проверьте, когда кнопка вернется. Затем добавьте скрипт виджета Битрикс24 в исключения плагина и снова убедитесь, что сообщения из чата доходят до открытой линии.