Интеграция Битрикс24 с сайтом с помощью виджета и CRM-формы

Михаил Ф.
Подписаться

Мастер-класс: как поставить Виджет и CRM-форму из Битрикс24 на свой сайт.

Вам может быть интересно:

Внедрение Битрикс24 Интеграция Битрикс24

Разработчики сервиса предпринимают серьезные усилия в направлении интеграции Битрикс24 с различными системами. В этой статье мы рассмотрим возможность интеграции корпоративного портала с сайтом компании, покажем, как можно своими руками настроить генерацию лидов с помощью связки Б24+Сайт. Итак вперед. У нас есть облачный Битрикс24 и тестовый сайт:


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

Технология установки виджета состоит из трех этапов:

  • первый этап - настройка формы, которая вызывается виджетом;

  • настройка самого виджета;

  • установка виджета на сайте.

Первый этап.

Откройте в Битрикс24 раздел CRM-формы:


Откроется окно, в котором вы увидите три предустановленные формы “Обратный звонок”, “Форма обратной связи", “Контактные данные”:


Здесь вы можете использовать предустановленную форму или создать новую форму. Что следует знать для дальнейшей работы. Изменять предустановленные формы нельзя! Если вам требуется форма, отличная от штатной, то нужно обязательно создать новую форму. Но можно поступить хитрее. Открыть штатную форму и на её основе создать новую. Что мы с вами и сделаем.

Нажмите кнопку Просмотреть возле формы Обратный звонок с номера "Номер базовой станции".

В открывшемся окне сразу нажмите кнопку внизу экрана Создать на основании:


Теперь можно перейти к редактированию формы. Измените название, заголовок и текст в самой форме, как приведено ниже.  Добавим еще поле Имя из сущности Лид. Для этого откройте раздел Лид и щелкните по полю Имя:



По умолчанию цвет будет голубым. Если он не подходит под цветовую схему вашего сайта, то в поле Цвет можете выбрать более подходящий вариант.

Не забудьте в поле Ответственный указать, кто будет отвечать за новый лид и за обратный звонок клиенту:


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


Сохраните свою новую форму и увидите её в списке. Не забудьте её включить:


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

Второй этап.

Создадим виджет и прикрепим к нему нашу новую форму обратного звонка. Для этого зайдите в CRM и  в меню выберите Виджет на сайт.

У вас откроется окно с предустановленным одним виджетом. В этом виджете объединены сразу несколько каналов для поступления лидов:

  • Открытые линии (для связи с клиентами в соцсетях);

  • Форма обратной связи (для получения запросов от клиентов);

  • Обратный звонок.

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

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

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


Сохраним виджет. Теперь у нас есть настроенный виджет и к нему прикреплена нужная форма. Переходим к третьему этапу - размещению виджета на сайте.

Третий этап. 

Чтобы разместить виджет на сайте достаточно в коде гипертекстовой странице вставить скрипт, который сгенерировался в ходе нашей работы. Но мы рассмотрим, как разместить виджет на сайте, чтобы он был сразу на всех страницах. В качестве примера используем тестовый сайт на CMS 1С-Битрикс. Нажмите кнопку Код на сайт:



В открывшемся окне нажмите Скопировать в Буфер.

Далее переходим на наш тестовый сайт и входим в режим администрирования. Здесь последовательно выбираем разделы Настройки - Настройки продукта - Сайты - Шаблоны сайтов. У используемого шаблона выбираем Изменить:

В коде шаблона переходим в самый низ и вставляем наш скрипт перед закрывающимся тегом </body>:


Сохраняем сделанные изменения. В результате у нас на всех страницах сайта есть новый виджет, который привлекает внимание клиентов и позволяет им заказать бесплатный звонок на сайте: 


При нажатии на виджет открывается созданная нами форма.

После её заполнения в Битрикс24 появляется новый лид и менеджер может сразу перезвонить заинтересованному клиенту:


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

Вам может быть интересно:

Внедрение Битрикс24 Интеграция Битрикс24

Оцените статью
22.12.2016
Понравилась статья?
Поделитесь ссылкой с друзьями и коллегами!

Статьи по теме

13.05.2022
Обновление модуля ограничения доступа к полям CRM: ограничение доступа в канбанеИНТЕРВОЛГА выпускает готовые решения для Битрикс24, которые расширяют возможности портала за разумные деньги. Сегодня поговорим об обновлении Модуля ограниче...
04.02.2022
Кейс: Внутренний портал крупной фармацевтической компании «Цифровой HR» Люди в компаниях не только очень важны, но и очень дороги. В прямом смысле. Дело даже не в заработных платах. Компания со штатом 1-3 тысячи человек т...
10.01.2022
Добавление своей кнопки в визуальный редактор Битрикс24Битрикс24 — универсальный портал с большим количеством инструментов для решения задач компании. Есть функции Битрикса, которые работают во всей системе и они ...
28.12.2021
Оцифровка HR-процессов – тренд 2022 года 2022 год еще не наступил, но уже вовсю говорят об HR-трендах наступающего года. ИНТЕРВОЛГА успевает отслеживать новости, не отстает от цифрового прогресса. ...
26.05.2021
Смарт-процессы в Битрикс24 — почему это прорывБитрикс24 как хороший «комбайн» состоит из множества блоков — задачи, CRM, календарь, чаты, бизнес-процессы, диск, сквозная аналитика и т.д. Что-то из этого раб...
25.03.2021
Внедрение Битрикс24 в строительной компании ВЕЛЕССТРОЙ У внедрения Битрикс24 в крупные компании имеет свои особенности. Условно их можно разделить на две большие группы: Внедрение Битрикс24 для работы отде...
Консультация по организации продаж
Давайте поговорим о ваших задачах
Оставьте заявку и мы свяжемся с вами как можно скорее.
Хочешь получать лучшие статьи от INTERVOLGA раз в месяц?
Подпишись на рассылку — спамить не будем