Перейти к содержанию

Формы Битрикс24 – виджет на сайт

Виджет на сайт – это полный набор каналов коммуникации с клиентами с сайта: Онлайн-чатCRM-форма (Форма обратной связи и Контактные данные) и Обратный звонок. Интеграция с Roistat позволяет автоматически создавать лид или сделку в CRM на основе контактных данных из формы.

На сайте можно подключить несколько форм Битрикс24.

Внимание!

С 1 января 2021 года интеграция с Битрикс24 доступна только для пользователей коммерческих тарифов Битрикс24. Узнать больше

Внимание!

Интеграция с Roistat поддерживает только CRM-форму и Обратный звонок. В Битрикс24 должно быть добавлено дополнительное поле roistat.

Дополнительное поле обязательно должно иметь название roistat, иначе интеграция работать не будет.

С помощью интеграции с формами Битрикс24 можно создавать заявки в CRM по номерам визита даже без включенной интеграции в Каталоге интеграций Roistat. Для этого нужно установить счетчик Roistat на ваш сайт.

CRM-форма «Форма обратной связи»

1.png

CRM-форма «Контактные данные»

2.png

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

3.png

Настройка

Внимание!

Для настройки виджета требуются права администратора в Битрикс24.

Внимание!

Перед настройкой выберите классический конструктор CRM-форм:

  1. Перейдите в раздел CRM → Настройки:

    3-1.png

  2. Перейдите в раздел Другое и нажмите Прочие настройки:

    3-2.png

  3. На вкладке Общие найдите блок Настройки CRM-форм и в списке Конструктор CRM-форм по умолчанию выберите Классический:

    3-3.png

Настройка форм

  1. В личном кабинете Битрикс24 откройте список предустановленных CRM-форм: CRM → Еще → CRM-формы:

    4.png

  2. Напротив предустановленной формы нажмите Редактировать. Выберите классический конструктор, если ранее вы не установили его по умолчанию.

  3. Внизу окна редактирования CRM-формы раскройте блок параметров Дополнительно.

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

  5. В блоке Значения полей по умолчанию установите флажок заполнять поля в CRM автоматически при отправке формы. В появившемся списке выберите roistat и нажмите добавить поле. Введите значение поля %roistatID%:

    5.jpg

  6. Настройте остальные параметры формы и нажмите Сохранить. После этого убедитесь, что форма включена. Если форма отключена, будет доступна кнопка Включить, которую необходимо нажать:

    6.png

  7. Разместите код настроенной формы в шаблоне вашего сайта. Этот код подразумевает отправку заявок из форм Битрикс напрямую в CRM, от которой созданы формы:

    1. Нажмите кнопку Код на сайт. Откроется одноименное окно.
    2. Откройте закладку с кодом для нужного типа вызова формы и скопируйте весь код формы.
    3. Вставьте скопированный код на страницу шаблона вашего сайта перед счетчиком Roistat.
    4. После строки <script data-b24-form="...." data-skip-moving="true"> добавьте следующий код:

      window.roistatVisitCallback = function (visitId) {
      window.addEventListener('b24:form:init', (event) => {
          let form = event.detail.object;
          form.setProperty("roistatID", visitId);
        });   
      

После этого код должен выглядеть следующим образом:

<script data-b24-form="...." data-skip-moving="true">
     window.roistatVisitCallback = function (visitId) {
    window.addEventListener('b24:form:init', (event) => {
         let form = event.detail.object;
         form.setProperty("roistatID", visitId);
    });
    (function(w,d,u){
         var s=d.createElement('script');s.async=true;s.src=u+'?'+(Date.now()/180000|0);
         var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);
    })(window,document,'https://cdn-ru.bitrix24.ru/..../crm/form/loader_4.js');
     };
</script>   

Внимание!

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

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

  1. Откройте настройки виджета на сайте: CRM → Еще → Виджет на сайт:

    7-1.png

    Затем нажмите Редактировать:

    7-2.png

  2. Для нужных каналов коммуникации замените формы на те, которые создали:

    8.png

  3. Убедитесь, что каналы включены, и нажмите Сохранить.

  4. Разместите код виджета в шаблоне вашего сайта:

    1. На странице CRM → Еще → Виджет на сайт нажмите кнопку Код на сайт. Откроется одноименное окно.

    2. Скопируйте код виджета без тегов <script> </script>:

      9.png

    3. Вставьте скопированный код на страницу шаблона вашего сайта перед счетчиком Roistat.

Место в шаблоне сайта для добавления кода виджета

<script>
    window.roistatVisitCallback = function (visitId) {
    <-- код виджета -->
    window.Bitrix24WidgetObject = window.Bitrix24WidgetObject || {};
        window.Bitrix24WidgetObject.handlers = {
            'form-init': function (form) {
                form.presets = {
                    'roistatID': visitId
                };
            }
        };
    }
</script>

Пример размещения кода виджета в шаблоне сайта

<script>
    window.roistatVisitCallback = function (visitId) {
    (function(w,d,u){
                var s=d.createElement('script');s.async=true;s.src=u+'?'+(Date.now()/60000|0);
                var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);
        })(window,document,'https://cdn-ru.bitrix24.ru/.../crm/site_button/loader_2_6x1gwa.js');
    window.Bitrix24WidgetObject = window.Bitrix24WidgetObject || {};
        window.Bitrix24WidgetObject.handlers = {
            'form-init': function (form) {
                form.presets = {
                    'roistatID': visitId
                };
            }
        };
    }
</script>

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

<script data-b24-form="inline/3/heu5ia" data-skip-moving="true">
     window.roistatVisitCallback = function (visitId) {
     <-- Пример кода CRM-формы с передачей номера визита -->
    window.addEventListener('b24:form:init', (event) => {
         let form = event.detail.object;
         form.setProperty("roistatID", visitId);
    });
    (function(w,d,u){
         var s=d.createElement('script');s.async=true;s.src=u+'?'+(Date.now()/180000|0);
         var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);
    })(window,document,'https://cdn-ru.bitrix24.ru/..../crm/form/loader_4.js');
     };
    <-- Пример кода виджета -->
    (function(w,d,u){
                var s=d.createElement('script');s.async=1;s.src=u+'?'+(Date.now()/60000|0);
                var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);
        })(window,document,'https://cdn.bitrix24.ru/b6451647/crm/site_button/loader_1_mgw0fn.js');

    window.Bitrix24WidgetObject = window.Bitrix24WidgetObject || {};
            window.Bitrix24WidgetObject.handlers = {
                    'form-init': function (form) {
                        form.presets = {
                                'roistatID': visitId
                        };
                    }
            };
        } 
  };
</script>

Передача номера визита в CRM-формах Битрикс24

Номер визита в CRM-формах Битрикс24 можно передавать на другом домене (когда форма сделана как отдельный лендинг со своей страницей). Для этого нужно:

  1. В настройках формы в блоке Значения полей по умолчанию установите флажок заполнять поля в CRM автоматически при отправке формы.
  2. В раскрывающемся списке под флажком выберите roistat и нажмите Добавить поле.
  3. Ведите значение поля %roistat_visit%

Затем разместите на сайте этот код:

<script>
    window.roistatVisitCallback = function (visitId) {
        $('[href*=".bitrix24.ru/form/"]').attr('href', function(i, originalValue) {
            var hasQueryMark = originalValue.match(/\?/);
            var queryDelimiter = hasQueryMark ? '&' : '?';
            return `${originalValue}${queryDelimiter}roistat_visit=${visitId}`;
        });
    };
</script>

Проверка работы

Создайте заявку через виджет на сайте. В личном кабинете Битрикс24 должны появиться новый лид или новая сделка с заполненным полем roistat:

Лид

10.png

Сделка

11.png