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

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

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

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

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

Обратите внимание:

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

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

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

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

1.png

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

2.png

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

3.png

Настройка

Обратите внимание:

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

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

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

    4.png

  2. Слева от названия формы нажмите Редактировать:

    4-2.png

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

  4. Нажмите Включить экспертный режим и перейдите на вкладку Значения полей по умолчанию:

    4-3.png

    Затем нажмите Добавить поле. В открывшемся окне найдите и выберите поле roistat и нажмите Добавить:

    4-4.png

    Нажмите на иконку редактирования поля и введите значение %roistatID%:

    5-1.png

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

    6.png

  6. Разместите код настроенной формы в шаблоне вашего сайта. Этот код подразумевает отправку заявок из форм Битрикс напрямую в 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);
          });
          <-- код формы Битрикс24 -->
      };
      

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

    <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. Вставьте скопированный код внутри следующего скрипта:

      <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>
      
    4. Скопируйте полученный код и вставьте его на страницу шаблона вашего сайта перед счетчиком Roistat.

Пример кода, если нужно использовать на сайте и 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