Итак, приступим. Вся интеграция будут разбита на 2 этапа:
1 этап интеграции битрикс24 с сайтом - настройка Виджета и его элементов в битрикс24
2 этап интеграции битрикс24 с сайтом - установка виджета на сайт
Красткое содержание
Настройка виджета для сайта и его элементов в битрикс24
Настройка CRM формы (формы обратной связи) в битрикс24
Настройка обратного звонка
Настройка онлайн чата
Настройка виджета для сайта
Интеграция битрикс24 с сайтом, установка виджета
Как работает интеграция битрикс24 и сайта на примере CRM-Формы
Подготовка к интеграции битрикс24 с сайтом
Подготовку к интеграции битрикс24 с сайтом разделим на несколько частей:1. Настройка crm формы.
2. Настройка обратного звонка
3. Настройка онлайн чата.
4. Настройка виджета для сайта
Настройка CRM формы (формы обратной связи) в битрикс24
Для настройки crm формы давайте перейдем по пути CRM->Еще->CRM формы, как показано на рисунке 2.
В открывшемся меню мы увидим 3 предустановленные формы: "Обратный звонок", "Форма обратной связи", "Контактные данные". Для простой интеграции битрикс24 с сайтом подойдет и предустановленная форма "Форма обратной связи", вы можете использовать ее, но для тех, кому стандартной формы недостаточно мы создадим новую фому "Обращение с сайта" на основании предустановленной формы (обратите внимание, что предустановленные формы менять не стоит).
Нажимаем на кнопку "Меню" возле "Форма обратной связи" и нажмите "Копировать", как показано на рисунке 3.
Рисунок 3 - Копирование формы обратной связи в битрикс24
После копирования у нас появится еще одна форма, которая называется "Копия Форма обратной связи". Жмем кнопку "Редактировать" возле появившейся формы и переходим к ее редактированию. Меняем название на "Обращение с сайта". Удаляем в форме все ненужные поля и оставляем только Имя, Телефон и Комментарий. Устанавливаем цвет фона формы красным - это нужно для того, чтобы при интеграции битрикс24 с сайтом наша форма выглядела гармонично и была представлена в цветовой гамме сайта. Результат представлен на рисунке 4.
Рисунок 4 - Настройка формы обратной связи битрикс24
После проделанных действий не забудьте сохранить результат нажав на кнопку "Сохранить". Если вы все сделали правильно, то у вас появится новый раздел "Формы моей компании" в котором будет находиться наша форма "Обращение с сайта". На этом настройка формы завершена, переходим к следующему этапу интеграции битрикс24 с сайтом.
Настройка обратного звонка
Как бы это не было странно, но обратный звонок тоже находится в CRM формах, для его настройки давайте перейдем по пути CRM->Еще->CRM формы, как мы делали это на предыдущем шаге. В этом разделе вы увидите CRM форму ОБРАТНЫЙ ЗВОНОК С НОМЕРА "НОМЕР БАЗОВОЙ СТАНЦИИ" как показано на рисунке 5. 
Рисунок 5 - ОБРАТНЫЙ ЗВОНОК С НОМЕРА "НОМЕР БАЗОВОЙ СТАНЦИИ"
Скопируем эту форму. Нажимаем на кнопку "Меню" возле "ОБРАТНЫЙ ЗВОНОК С НОМЕРА "НОМЕР БАЗОВОЙ СТАНЦИИ" и нажмите "Копировать", как показано на рисунке 6.
Рисунок 6 - Копирование формы "Обратный звонок с номера "Номер базовой станции""
После копирования никаких специальных настроек для нашего виджета обратного звонка ненужно, достаточно просто переименовать его в "Обратный звонок с сайта" для удобства использования и установить цвет формы "Красный", как показано выше на рисунке 4.
Еще один важный момент, который я упустил: после того, как вы скопировали форму, форма изначально неактивна, чтобы ее активировать, нужно нажать на кнопку включить, как показано на рисунке 7.
Рисунок 7 - Включение CRM формы битрикс24
Формы будут доступны для использования только после их включения. Не забывайте включать формы.
Настройка онлайн чата
Одной из задач качественной интеграция сайта с битрикс24 является возможность пользователя вашего сайта задать любой интересующий его вопрос не отрываясь от просмотра сайта. В решении этой задачи нам поможет онлайн чат. Онлайн чат находится в открытых линиях, по умолчанию один онлайн чат уже будет создан, поэтому детальную его настройку рассматривать не будем, но если у вас по каким-то причинам нет онлайн чата, то вам необходимо создать открытую линию при помощи кнопки : "Создать открытую линию" в Открытые линии->Список, нажать на "Онлайн чат", в открывшемся окне нажать "Подключить" и "Сохранить".Настройка виджета для сайта
В рамках интеграции битрикс24 с сайтом мы не будем рассматривать все настройки виджета для сайта, мы только подключим уже настроенные инструменты. Подробнее о настройках виджета вы сможете узнать из других наших статей или из справки битрикс24.Для настройки инструмента "Виджет на сайт" вам необходимо пройти по пути CRM->Еще->Виджет на сайт, как показано на рисунке 8.
Рисунок 8 - Переход в инструмент "Виджет на сайт"
В этом разделе мы увидим предустановленный виджет на сайт, который и начнем редактировать, нажав на кнопку "Редактировать". Внешний вид формы редактирования виджета приведен на рисунке 9.
Рисунок 9 - Вид формы редактирования "Виджет на сайт"
Для того, чтобы после интеграции битрикс24 с сайтом ваш виджет на сайте выглядел гармонично, настройте ему цвет отображения, а я как и раньше выберу красный цвет. Далее, для того, чтобы подключить к нашему виджету все настроенные инструменты, прокрутите форму редактирования вниз и выберите:
1. В поле "Открытая линия", в выпадающем списке название той открытой линии, для которой вы настроили онлайн чат, или оставьте это поле без изменений. Обязательно проконтролируйте, чтобы активности была включена (Вкл.). Подробности на рисунке 10.
Рисунок 10 - Подключение открытой линии к виджету
2. В поле CRM-форма выберите название нашей CRM-Формы - "Обращение с сайта". Обязательно проконтролируйте, чтобы активности была включена (Вкл.), как показано на рисунке 11.
Рисунок 11 - Подключение CRM-Формы
3. В поле "Обратный звонок" выбрать "Обратный звонок с сайта" и проконтролируйте, чтобы блок был активен, как показано на рисунке 12.
Рисунок 12 - Подключение обратного звонка к виджету
После проделанных выше манипуляций не забудьте нажать кнопку "Сохранить". На этом подготовка к интеграции битрикс24 с сайтом завершена, далее приступим к самой интеграции.
Интеграция битрикс24 с сайтом, установка виджета
После успешного заверешения подготовки интеграции битрикс24 и сайта у нас настроен и готов к использованию "Виджет на сайт",осталось его только вставить на сайт. Для этого откроем виджет для редактирования и скопируем код, который нужно вставить на сайт, для этого откроем виджет и в первом окне нажмем на кнопку "Скопировать в буфер", как показано на рисунке 13.
Рисунок 13 - Копирование кода виджета
После чего вам нужно войти в административную часть сайта, перейти по пути Настройки->Настройки продукта->Шаблоны сайтов, далее в списке шаблонов найти тот, кторый установлен у вас и нажать на кнопку изменить, как показано на рисунке 14.
Рисунок 14 - Переход к редактированию шаблона
Следующим шагом необходимо вставить код виджета, который мы скопировали в битрикс24 на сайт перед тегом </body> - этот тег находится в самом низу шаблона, пример показан на рисунке 15.
Рисунок 15 - Пример вставки скрипта "Виджет на сайт"
После того, как вы вставили скрипт, не забудьте нажать на кнопку "Сохранить". На этом все, простая интеграция битрикс24 и сайта завершена, пример того, как выглядит вставленный виджет вы можете посмотреть на рисунках 16 и 17.
Рисунок 16 - Свернутый виджет
Рисунок 17 - Развернутый виджет
Как работает интеграция битрикс24 и сайта на примере CRM-Формы
Допустим пользователь зашел на сайт, нажал на виджет, выбрал CRM-форму и заполнил ее как показано на рисунке 18.
Рисунок 18 - Заполненная пользователем форма обратной связи
После того, как пользователь заполнит все поля формы и нажмет кнопку отправить, вы получите автоматически созданый лид в вашем битрикс24 (рисунок 19), в котором уже будут все данные, которые ввел пользователь, вам останется только продать ему товар или услугу.
Рисунок 19 - Пример автоматически созданного лида
На этом все, надеюсь наша статья об интеграции битрикс24 с вашим сайтом была полезной, спасибо за прочтение. Всегда готовы помочь вам в интеграции битрикс24 с сайтом:)
