Как интегрировать Битрикс24 с сайтом: виджет, форма, почта, корзина

Внедряя CRM Битрикс24, мы часто сталкиваемся с вопросами клиентов, нужна ли интеграция с сайтом и что она дает.
Так зачем нужно интегрировать CRM с сайтом?
Информация о клиентах в единой базе. Потенциальные клиенты, делая заказ на сайте, указывают контактные данные, вопросы, комментарии — все эти сведения поступают в единую базу CRM.
Анализ эффективности продаж. Интеграция CRM с сайтом позволяет выявить проблемные места в воронке продаж, причины отказа от покупки.
Автоматизация задач. CRM позволяет настроить и отладить систему напоминаний при любом возможном сценарии взаимоотношений менеджера и клиента. Клиенты, пришедшие с сайта, не будут забыты.
В этой статье рассмотрим только некоторые самые простые варианты интеграции.
1. Виджет обратной связи
Самый простой и быстрый способ получать заявки с сайта в Битрикс24 — это разместить на нем бесплатный виджет Битрикс24.
Это «кнопка», при нажатии на которую посетитель увидит список доступных каналов: чат, форма обратной связи, обратный звонок, социальные сети и мессенджеры.

так выглядит виджет на нашем сайте:

Подключенные каналы к виджету
Клиент пишет в чат, оставляет заявку и все эти обращения попадают в CRM Битрикс24.

Чтобы добавить виджет на сайт в портале Битрикс24, нужно перейти в раздел CRM и выбрать пункт Виджет на сайт. Этот пункт меню загружает страницу списка виджетов.

В настройках у вас есть 2 варианта: создать новый виджет с нуля или использовать уже предустановленный:

Чтобы виджет появился на сайте, достаточно нажать на кнопку “код на сайте”, скопировать код и добавить его в шаблон вашего сайта перед закрывающим тегом
Формы Битрикс24
![]()
Практически любая современная компания имеет свой собственный сайт. Сайт — это идеальное решение для привлечения новых, потенциальных клиентов. При помощи Bitrix24 у вас есть возможность создать ознакомительный сайт со всей необходимой информацией о вашей компании и даже целый онлайн-магазин без особых усилий и затрат.


Созданный таким образом сайт содержит формы для обратной связи. Они могут быть размещены как на сайтах, созданных через инструмент «Битрикс24.Сайты», так и добавлены на уже существующий сайт для его связки с CRM Битрикс24. Посетители сайта заполняют созданную с помощью Битрикс24 форму, и вся контактная информация сразу же переносится в CRM. После этого смело можно приступать к общению с новым клиентом!
Далее мы детально изучим весь процесс создания формы обратной связи Битрикс24 и разберемся с настройками параметров.
Размещение формы обратной связи Битрикс24
Создание небольшой страницы в виде анкеты, пожалуй, один из самых распространённых способов приобретения обратной связи от потенциальных клиентов. Вы сможете настраивать форму таким образом, чтобы, например, у клиента была возможность оставить заявку на приобретение какого-либо товара или же для заявки на обратную связь с ним.
Чтобы начать процесс создания такой формы, нужно выбрать подходящий вам шаблон. Рассмотрим все возможности эксплуатации формы захвата Битрикс24 на примере небольшого сайта о туристических услугах. Для начала создадим собственный сайт или воспользуемся одним из шаблонов, заготовленными Bitrix24. Далее создаём новый блок с помощью кнопки «Добавить блок» и выбираем раздел «CRM форма».


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

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


В этом разделе вы сможете:
После заверения настройки внешнего вида, отображения и дизайна формы переходим к разбору следующего пункта.
CRM-форма, виджет на сайт
«Виджет на сайт» объединяет все цифровые каналы коммуникаций с клиентами напрямую из вашего Bitrix24. При добавлении виджета вы сможете:
Также на сайте появиться так называемая «Кнопка» для того, чтобы при нажатии на неё посетитель выбирал удобный способ связи с вашей организацией.
Перейти к настройке CRM-формы можно тремя способами:
С помощью кнопки «Настройки» → «Настройки сайта» → «Виджет на сайт» → «Настроить».


При редактировании формы при помощи нажатия на пункт «Настроить CRM-формы».

При помощи перехода в раздел «CRM» в основном меню → «Ещё» → «Виджет на сайт».


На основной странице вы можете воспользоваться предустановленными виджетами или создавать собственные. У каждой формы есть краткая информация:

Для того, чтобы создать или внести изменения в уже созданную форму обратной связи Битрикс24 нужно перейти в раздел «CRM» → «Ещё» → «CRM-формы».

На этой странице есть 2 предустановленных формы:
В этих формах также указывается основная информация:

Размещение формы на сайте возможно при помощи специального кода, который можно найти, нажав на кнопку «Код на сайт» или же с помощью «Публичной ссылки», которую можно найти в списке основной информации о форме. Скопируйте и отправляйте прямо клиенту!



Как разместить форму на сайте
Разместить форму на сайт можно следующими способами:
Разместить форму прямо внутри страницы.
Настроить автоматическое появление формы при нажатии на кнопку или ссылку.
Установить показ формы в появляющемся окне.
При создании новой формы и редактировании уже установленной формы вы сможете:
Изменить шрифт, название и описание полей.


Добавить список продуктов, секции, разделители и разрыв строки.

Настроить на каком основании формы в вашей CRM будут созданы.


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


Вносить изменения во внешний вид формы.

Использовать свои стили CSS.
Редактировать сообщения после действие при отправке формы.

Подключить рекламу через Facebook или в ВКонтакте.
Ввести правила для полей.

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

В любой сфере бизнеса необходим контакт с клиентом и удобный способ получения обратной связи.
С Битрикс24 вы легко можете наладить общение с потенциальным покупателем, увеличить конверсию и повысить продуктивность отдела продаж.
Разместите на своём сайте специальный виджет, и клиент получит возможность написать вам в чат, заказать обратный звонок или заполнить форму.
Как это работает?
Виджет – это «кнопка», при нажатии на которую посетитель увидит список доступных инструментов.

Работа с виджетами ведётся на странице CRM ➞ Виджет на сайт.

В списке вы можете увидеть краткую информацию о каждом виджете – какие каналы связи в него входят, когда и кем он был создан и как он располагается на странице.
Для использования виджета нажмите кнопку Код на сайт, скопируйте текст и поместите этот в шаблоне вашего сайта перед закрывающим тегом body.
Например, для продукта «1С-Битрикс» сделать это можно в Настройки > Настройки продукта > Сайты > Шаблоны сайтов. Для других CMS читайте документацию этой CMS.

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

Для создания нового виджета нажмите кнопку Создать виджет

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

Настройка виджета
Для каждого канала связи можно настроить время отображения.
К примеру, сделайте онлайн-чат активным только в рабочее время отдела продаж (только на тарифе Компания с включенным учетом рабочего времени), а заказ звонка – в любые дни кроме праздников.
Также вы можете ограничить страницы сайта, на которых будет доступен тот или иной инструмент. По умолчанию все каналы активны на всех страницах.
Открытая линия
Этот канал направляет сообщения клиентов из разных источников (мессенджеры, социальные сети, Битрикс24.Network) в единый чат менеджеру.
Менеджер отвечает на вопрос и клиент получает сообщение ВКонтакте, Instagram и т.д. – там, где он писал изначально.
Выберите одну из существующих открытых линий или создайте новую.

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

Выберите нужную форму из списка или создайте новую.

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

Формы обратного звонка схожи с CRM-формами и настраиваются аналогично.
Единственное отличие – вам нужно будет выбрать номер для звонка и ввести сообщение, которое получит менеджер при заказе звонка.

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

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

Выберите цвет фона и иконок согласно стилю вашего сайта, положение на экране и время показа – сразу или с задержкой.
Иногда бывает полезно отключить показ виджета на мобильных устройствах – за это отвечает соответствующая галочка.
Как удалить виджет
Удалить виджет можно только из списка «Виджеты моей компании», предустановленный виджет удалить нельзя. Для удаления нажмите на крестик справа:

Соберите все коммуникации в одном месте и общайтесь с клиентами еще больше:)
Как создать CRM-форму в новом конструкторе

Что такое CRM-форма?
Как создать CRM-форму?

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

После выбора сценария откроется окно с настройками формы. В нём находятся пять основных блоков: Поля, Соглашения, Сущности в CRM, Размещение формы и Другие настройки.

Настройте форму и нажмите Сохранить внизу страницы.

Вернуться к редактированию формы можно в любой момент. Для этого нажмите Редактировать на странице с формой.

Как изменить дизайн формы?
Изменить дизайн можно на странице с формой. Для этого нажмите Дизайн и кликните на форму.

В левой части экрана выберите, что именно вы хотите изменить. Например, шрифт или границы формы.
Формы Битрикс24 – виджет на сайт¶
Виджет на сайт – это полный набор каналов коммуникации с клиентами с сайта: Онлайн-чат, CRM-форма (Форма обратной связи и Контактные данные) и Обратный звонок. Интеграция с Roistat позволяет автоматически создавать лид или сделку в CRM на основе контактных данных из формы.
На сайте можно подключить несколько форм Битрикс24.
С 1 января 2021 года интеграция с Битрикс24 доступна только для пользователей коммерческих тарифов Битрикс24. Узнать больше
Интеграция с Roistat поддерживает только CRM-форму и Обратный звонок. В Битрикс24 должно быть добавлено дополнительное поле roistat.
Дополнительное поле обязательно должно иметь название roistat, иначе интеграция работать не будет.
С помощью интеграции с формами Битрикс24 можно создавать заявки в CRM по номерам визита даже без включенной интеграции в Каталоге интеграций Roistat. Для этого нужно установить счетчик Roistat на ваш сайт.
CRM-форма «Форма обратной связи»
CRM-форма «Контактные данные»
Обратный звонок
Настройка¶
Для настройки виджета требуются права администратора в Битрикс24.
Перед настройкой выберите классический конструктор CRM-форм:
Перейдите в раздел CRM → Настройки:
Перейдите в раздел Другое и нажмите Прочие настройки:
На вкладке Общие найдите блок Настройки CRM-форм и в списке Конструктор CRM-форм по умолчанию выберите Классический:
Настройка форм¶
В личном кабинете Битрикс24 откройте список предустановленных CRM-форм: CRM → Еще → CRM-формы:
Напротив предустановленной формы нажмите Редактировать. Выберите классический конструктор, если ранее вы не установили его по умолчанию.
Внизу окна редактирования CRM-формы раскройте блок параметров Дополнительно.
В блоке Создание документов выберите опцию Лид или Сделка в зависимости от того, что вы хотите создавать в CRM по заявке из виджета.
В блоке Значения полей по умолчанию установите флажок заполнять поля в CRM автоматически при отправке формы. В появившемся списке выберите roistat и нажмите добавить поле. Введите значение поля %roistatID%:
Настройте остальные параметры формы и нажмите Сохранить. После этого убедитесь, что форма включена. Если форма отключена, будет доступна кнопка Включить, которую необходимо нажать:
Разместите код настроенной формы в шаблоне вашего сайта. Этот код подразумевает отправку заявок из форм Битрикс напрямую в CRM, от которой созданы формы:
Интеграция с формами Битрикс24 может создавать заявки в CRM по номерам визита даже без включенной интеграции в каталоге интеграции. Для этого выполните шаги 2 – 7 для настройки других типов форм при необходимости.
Настройка виджета¶
Откройте настройки виджета на сайте: CRM → Еще → Виджет на сайт:
Затем нажмите Редактировать:
Для нужных каналов коммуникации замените формы на те, которые создали:
Убедитесь, что каналы включены, и нажмите Сохранить.
Разместите код виджета в шаблоне вашего сайта:
На странице CRM → Еще → Виджет на сайт нажмите кнопку Код на сайт. Откроется одноименное окно.
Скопируйте код виджета без тегов :
Вставьте скопированный код внутри следующего скрипта:
Должен получиться код вида:
Скопируйте полученный код и вставьте его на страницу шаблона вашего сайта перед счетчиком Roistat.
Пример кода, если нужно использовать на сайте и CRM-форму, и виджет Битрикс24
Передача номера визита в CRM-формах Битрикс24¶
Номер визита в CRM-формах Битрикс24 можно передавать на другом домене (когда форма сделана как отдельный лендинг со своей страницей). Для этого нужно:
Затем разместите на сайте этот код:
Проверка работы¶
Создайте заявку через виджет на сайте. В личном кабинете Битрикс24 должны появиться новый лид или новая сделка с заполненным полем roistat:
