Интеграция вашего сайта с CRM Битрикс24

Рассмотрим простую интеграцияю CRM Битрикс24 и вашего сайта при помощи инструмента битрикс24 "Виджет для сайта". Этот инструмент позволяет разместить на сайте CRM форму (форму обратной связи), обратный звонок, онлайн чат.

Вся интеграция будут разбита на 2 этапа:

1 этап интеграции битрикс24 с сайтом - настройка Виджета и его элементов в битрикс24

2 этап интеграции битрикс24 с сайтом - установка виджета на сайт

Подготовка к интеграции битрикс24 с сайтом

Подготовку к интеграции битрикс24 с сайтом разделим на несколько частей:

Настройка crm формы.
Настройка обратного звонка
Настройка онлайн чата.
Настройка виджета для сайта

1-ый ЭТАП

Настройка CRM формы (формы обратной связи) в битрикс24

Для настройки crm формы давайте перейдем по пути CRM->Еще->CRM формы, как показано на рисунке 1.

Рисунок 1 - Переход в меню "CRM формы"

В открывшемся меню мы увидим 3 предустановленные формы: "Обратный звонок", "Форма обратной связи", "Контактные данные". Для простой интеграции битрикс24 с сайтом подойдет и предустановленная форма "Форма обратной связи", вы можете использовать ее, но для тех, кому стандартной формы недостаточно мы создадим новую фому "Обращение с сайта" на основании предустановленной формы (обратите внимание, что предустановленные формы менять не стоит).

Нажимаем на кнопку "Меню" возле "Форма обратной связи" и нажмите "Копировать", как показано на рисунке 2.

Рисунок 2 - Копирование формы обратной связи в битрикс24

После копирования у нас появится еще одна форма, которая называется "Копия Форма обратной связи". Жмем кнопку "Редактировать" возле появившейся формы и переходим к ее редактированию. Меняем название на "Обращение с сайта". Удаляем в форме все ненужные поля и оставляем только Имя, Телефон и Комментарий. Устанавливаем цвет фона формы красным - это нужно для того, чтобы при интеграции битрикс24 с сайтом наша форма выглядела гармонично и была представлена в цветовой гамме сайта. Результат представлен на рисунке 3.

Рисунок 3 - Настройка формы обратной связи битрикс24

После проделанных действий не забудьте сохранить результат нажав на кнопку "Сохранить". Если вы все сделали правильно, то у вас появится новый раздел "Формы моей компании" в котором будет находиться наша форма "Обращение с сайта". На этом настройка формы завершена, переходим к следующему этапу интеграции битрикс24 с сайтом.

Настройка обратного звонка

Как бы это не было странно, но обратный звонок тоже находится в CRM формах, для его настройки давайте перейдем по пути CRM->Еще->CRM формы, как мы делали это на предыдущем шаге. В этом разделе вы увидите CRM форму ОБРАТНЫЙ ЗВОНОК С НОМЕРА "НОМЕР БАЗОВОЙ СТАНЦИИ" как показано на рисунке 4.

Рисунок 4 - ОБРАТНЫЙ ЗВОНОК С НОМЕРА "НОМЕР БАЗОВОЙ СТАНЦИИ"

Скопируем эту форму. Нажимаем на кнопку "Меню" возле "ОБРАТНЫЙ ЗВОНОК С НОМЕРА "НОМЕР БАЗОВОЙ СТАНЦИИ" и нажмите "Копировать", как показано на рисунке 5.

Рисунок 5 - Копирование формы "Обратный звонок с номера "Номер базовой станции""

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

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

Рисунок 6 - Включение CRM формы битрикс24

Формы будут доступны для использования только после их включения. Не забывайте включать формы.

Настройка онлайн чата

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

Настройка виджета для сайта

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

Для настройки инструмента "Виджет на сайт" вам необходимо пройти по пути CRM->Еще->Виджет на сайт, как показано на рисунке 7.

Рисунок 7 - Переход в инструмент "Виджет на сайт"

В этом разделе мы увидим предустановленный виджет на сайт, который и начнем редактировать, нажав на кнопку "Редактировать". Внешний вид формы редактирования виджета приведен на рисунке 8.

Рисунок 8 - Вид формы редактирования "Виджет на сайт"

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

1. В поле "Открытая линия", в выпадающем списке название той открытой линии, для которой вы настроили онлайн чат, или оставьте это поле без изменений. Обязательно проконтролируйте, чтобы активности была включена (Вкл.). Подробности на рисунке 9.

Рисунок 9 - Подключение открытой линии к виджету

2. В поле CRM-форма выберите название нашей CRM-Формы - "Обращение с сайта". Обязательно проконтролируйте, чтобы активности была включена (Вкл.), как показано на рисунке 10.

Рисунок 10 - Подключение CRM-Формы

3. В поле "Обратный звонок" выбрать "Обратный звонок с сайта" и проконтролируйте, чтобы блок был активен, как показано на рисунке 11.

Рисунок 11 - Подключение обратного звонка к виджету

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

2-ой ЭТАП

Интеграция битрикс24 с сайтом, установка виджета

После успешного заверешения подготовки интеграции битрикс24 и сайта у нас настроен и готов к использованию "Виджет на сайт",осталось его только вставить на сайт. Для этого откроем виджет для редактирования и скопируем код, который нужно вставить на сайт, для этого откроем виджет и в первом окне нажмем на кнопку "Скопировать в буфер", как показано на рисунке 12.

Рисунок 12 - Копирование кода виджета

После чего вам нужно войти в административную часть сайта, перейти в раздел Шаблоны (расположение данного раздела зависит от используемой CMS), далее в списке шаблонов найти тот, кторый установлен у вас и перейти к редактированию - необходимо вставить код виджета, который мы скопировали в битрикс24 на сайт перед тегом </body> - этот тег находится в самом низу шаблона, пример показан на рисунке 13.

Рисунок 13 - Пример вставки скрипта "Виджет на сайт"

После того, как вы вставили скрипт, не забудьте нажать на кнопку "Сохранить". На этом все, простая интеграция битрикс24 и сайта завершена, пример того, как выглядит вставленный виджет вы можете посмотреть на рисунках 14 и 15.

Рисунок 14 - Свернутый виджет

Рисунок 15 - Развернутый виджет

Как работает интеграция битрикс24 и сайта на примере CRM-Формы

Допустим пользователь зашел на сайт, нажал на виджет, выбрал CRM-форму и заполнил ее как показано на рисунке 16.

Рисунок 16 - Заполненная пользователем форма обратной связи

После того, как пользователь заполнит все поля формы и нажмет кнопку отправить, вы получите автоматически созданый лид в вашем битрикс24 (рисунок 17), в котором уже будут все данные, которые ввел пользователь, вам останется только продать ему товар или услугу.