Мастер-класс: как поставить Виджет и CRM-форму из Битрикс24 на свой сайт.
Вам может быть интересно:
Внедрение Битрикс24 Интеграция Битрикс24
Разработчики сервиса предпринимают серьезные усилия в направлении интеграции Битрикс24 с различными системами. В этой статье мы рассмотрим возможность интеграции корпоративного портала с сайтом компании, покажем, как можно своими руками настроить генерацию лидов с помощью связки Б24+Сайт. Итак вперед. У нас есть облачный Битрикс24 и тестовый сайт:
На многих сайтах вы встречали популярный виджет “Обратный звонок”. Это телефонного трубка, которая, либо вибрирует, либо мигает, чтобы привлечь внимание. Аналогичный элемент вы можете установить на своём сайте с помощью Битрикс24, не прибегая к услугам программистов.
Технология установки виджета состоит из трех этапов:
-
первый этап - настройка формы, которая вызывается виджетом;
-
настройка самого виджета;
-
установка виджета на сайте.
Первый этап.
Откройте в Битрикс24 раздел CRM-формы:
Откроется окно, в котором вы увидите три предустановленные формы “Обратный звонок”, “Форма обратной связи", “Контактные данные”:
Здесь вы можете использовать предустановленную форму или создать новую форму. Что следует знать для дальнейшей работы. Изменять предустановленные формы нельзя! Если вам требуется форма, отличная от штатной, то нужно обязательно создать новую форму. Но можно поступить хитрее. Открыть штатную форму и на её основе создать новую. Что мы с вами и сделаем.
Нажмите кнопку Просмотреть возле формы Обратный звонок с номера "Номер базовой станции".
В открывшемся окне сразу нажмите кнопку внизу экрана Создать на основании:
Теперь можно перейти к редактированию формы. Измените название, заголовок и текст в самой форме, как приведено ниже. Добавим еще поле Имя из сущности Лид. Для этого откройте раздел Лид и щелкните по полю Имя:
По умолчанию цвет будет голубым. Если он не подходит под цветовую схему вашего сайта, то в поле Цвет можете выбрать более подходящий вариант.
Не забудьте в поле Ответственный указать, кто будет отвечать за новый лид и за обратный звонок клиенту:
Откройте раздел Дополнительно. В нем скрыто много полезных настроек для нашей формы, с помощью которых можно задать правила заполнения полей лида и задавать метрики для оценки рекламных кампаний маркетологами:
Сохраните свою новую форму и увидите её в списке. Не забудьте её включить:
Теперь эту форму можно разместить на любой странице сайта. Для этого нужно нажать кнопку Код на сайт и скопировать представленный код на нужную страницу. Но нам требуется не просто форма, а телефонная трубка на сайте, которая будет привлекать внимание, т.е. виджет. Поэтому переходим ко второму этапу.
Второй этап.
Создадим виджет и прикрепим к нему нашу новую форму обратного звонка. Для этого зайдите в CRM и в меню выберите Виджет на сайт.
У вас откроется окно с предустановленным одним виджетом. В этом виджете объединены сразу несколько каналов для поступления лидов:
-
Открытые линии (для связи с клиентами в соцсетях);
-
Форма обратной связи (для получения запросов от клиентов);
-
Обратный звонок.
Но нам требуется создать виджет только для заказа обратного телефонного звонка. Поступим следующим образом. Выберите Создать виджет.
Введите название виджета, например, Заказать звонок. Отключите ненужные в данный момент каналы - открытая линия и CRM-форма и выберите созданную форму Заказать обратный звонок:
В правой части окна находятся очень удобные настройки, которые позволяют задать положение виджета, его цвет и время появления на странице сайта. Сделаем настройки, которые позволят оптимальным образом разместить наш виджет на сайте:
Сохраним виджет. Теперь у нас есть настроенный виджет и к нему прикреплена нужная форма. Переходим к третьему этапу - размещению виджета на сайте.
Третий этап.
Чтобы разместить виджет на сайте достаточно в коде гипертекстовой странице вставить скрипт, который сгенерировался в ходе нашей работы. Но мы рассмотрим, как разместить виджет на сайте, чтобы он был сразу на всех страницах. В качестве примера используем тестовый сайт на CMS 1С-Битрикс. Нажмите кнопку Код на сайт:
В открывшемся окне нажмите Скопировать в Буфер.
Далее переходим на наш тестовый сайт и входим в режим администрирования. Здесь последовательно выбираем разделы Настройки - Настройки продукта - Сайты - Шаблоны сайтов. У используемого шаблона выбираем Изменить: 
В коде шаблона переходим в самый низ и вставляем наш скрипт перед закрывающимся тегом </body>:
Сохраняем сделанные изменения. В результате у нас на всех страницах сайта есть новый виджет, который привлекает внимание клиентов и позволяет им заказать бесплатный звонок на сайте:
При нажатии на виджет открывается созданная нами форма.
После её заполнения в Битрикс24 появляется новый лид и менеджер может сразу перезвонить заинтересованному клиенту:
Мы рассмотрели простой вариант использования формы и виджета из Битрикс24 на сайте. На практике бывают более сложные варианты, когда нужно точнее подобрать цвет, расположение виджета, вид формы для заполнения, указать, на каких страницах выводить виджет, на каких нет. Или сделать ряд виджетов, которые на разных страницах будут выводится в разных местах и открывать различные формы и пр. Для этого уже потребуется специалист, который сможет выполнить более тонкую настройку этих удобных инструментов. Вы можете заказать индивидуальную интеграцию Битрикс24 и вашего сайта в представленной ниже форме.
Вам может быть интересно:
Статьи по теме
