Интеграция Битрикс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
Понравилась статья?
Поделитесь ссылкой с друзьями и коллегами!

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

24.03.2023
Как мы заново написали модуль учета рабочего времени сотрудников в среде Битрикс24 для инжинирингового холдинга Задача учета времени работы сотрудников всегда актуальна. Для этой цели разработано много инструментов. Если вы пользуетесь Битрикс24, то наверняка знаете ...
10.02.2023
Импортозамещение наоборот или как мы сделали и продаем Обратный SMS-шлюз для Twilio + Bitrix24 Мы сделали приложение для глобального рынка, научились его продвигать и продавать и вышли на $1000+ дохода в месяц (самим немного смешно, но на оплату Goog...
10.02.2023
Экономим время HRa и нервы ИТ-дира, внедряя HR-платформу в Битрикс24 Меня зовут Антон Колодницкий, в компании ИНТЕРВОЛГА я руковожу разработкой HR-платформы для Битрикс24. Сегодня расскажу, как мы помогли улучшить процесс ад...
10.01.2023
Как мы CRM Битрикс24 с кучей всего интегрировали У нас был сложный сайт с личным кабинетом клиентов, устаревшая, переписанная 1С-ка, десяток маркетинговых сервисов, и телефония на Asterisk. Единств...
03.11.2022
Тюнинг HR процессов в компании Брайт Вэй Компания Брайт Вэй - динамично развивающаяся группа компаний, стратегия которой включает реализацию многих значимых проектов в фармацевтической отрасли Рос...
25.07.2022
Настройка вычисляемых и зависимых полей в Salesforce и Битрикс24 Вычисляемые поля в CRM CRM в коммерческом отделе — инструмент, упрощающий работу в компании. Но, как и все инструменты, его также можно и нужно настраивать. ...

Мы работаем по одному из двух форматов:

  • аренда команды (от 2 человек, не менее 3 месяцев);
  • итерации с фиксированной ценой (1-3 месяца длительностью).

ИНТЕРВОЛГА предоставляет:

  • регулярные онлайн-планерки с заказчиком;
  • квалифицированных специалистов;
  • организованную команду (находятся в одном помещении, что упрощает решение рабочих вопросов);
  • полную прозрачность и регулярность отчетов о результатах.

Для доработок и развития мы предлагаем формат 100 часов в месяц. Что можно сделать за это время:

  • новые нетиповые страницы или раздел;
  • 2 отчета с индивидуальными настройками;
  • 3-5 веб-сервисов интеграции;
  • замудренный калькулятор и т.п.

Поддержка «чтобы все работало как часы» стоит 45 тысяч рублей в месяц и описана тут.

Хочешь получать лучшие статьи от INTERVOLGA раз в месяц?
Подпишись на рассылку — спамить не будем