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

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

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

Внимание!

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

Внимание!

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

Внимание!

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

Внимание!

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

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

1.png

CRM-форма "*Контактные данные"

2.png

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

3.png

Настройка

Внимание!

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

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

  1. В личном кабинете Битрикс24 откройте список предустановленных CRM-форм: CRM → Еще → CRM-формы: 4.jpg
  2. Напротив предустановленной формы нажмите Редактировать.
  3. Раскройте блок параметров Дополнительно.
  4. В блоке Создание документов установите переключатель Лид или Сделка, в зависимости от того, что вы хотите создавать в CRM по заявке из виджета.
  5. В блоке Значения полей по умолчанию установите флажок Заполнять поля в CRM автоматически при отправке формы.
  6. В раскрывающемся списке под флажком выберите roistat и нажмите добавить поле.
  7. Ведите значение поля %roistatID%: 5.jpg
  8. Настройте остальные параметры формы.
  9. Прокрутите настройки формы вниз и нажмите Применить.
  10. Нажмите К списку.
  11. Справа от настроенной формы нажмите Включить. 6.jpg
  12. Разместите код настроенной формы в шаблоне вашего сайта. Этот код подразумевает отправку заявок из форм Битрикс напрямую в CRM, от которой созданы формы:
    1. Нажмите кнопку Код на сайт. Откроется одноименное окно.
    2. Откройте закладку с кодом для нужного типа вызова формы и скопируйте весь код формы.
    3. Вставьте скопированный код на страницу шаблона вашего сайта перед счетчиком Roistat и в список передаваемых из формы параметров в строке b24form({<код зависит от способа вызова формы>}); добавьте "presets": {"roistatID": visitId} :

Место в шаблоне сайта для добавления кода CRM-формы

        <script>
            window.roistatVisitCallback = function (visitId) {
            <-- код CRM-формы -->
            }
        </script>

Пример размещения кода CRM-формы в шаблоне сайта*

        <script id="bx24_form_inline" data-skip-moving="true">
            window.roistatVisitCallback = function (visitId) {
            (function(w,d,u,b){w['Bitrix24FormObject']=b;w[b] = w[b] || function(){arguments[0].ref=u;
                        (w[b].forms=w[b].forms||[]).push(arguments[0])};
                        if(w[b]['forms']) return;
                        var s=d.createElement('script');s.async=1;s.src=u+'?'+(1*new Date());
                        var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);
                })(window,document,'https://b24-7f7rml.bitrix24.ru/bitrix/js/crm/form_loader.js','b24form');
                b24form({"id":"5","lang":"ru","sec":"b5ujpm","type":"inline","presets": {"roistatID": visitId}});
            }
         </script>

Внимание!

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

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

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

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

  3. Проверьте, чтобы каналы были включены, и нажмите Применить.
  4. Разместите код виджета в шаблоне вашего сайта:
    1. На странице CRM → Еще → Виджет на сайт нажмите кнопку Код на сайт. Откроется одноименное окно.
    2. Скопируйте код виджета без тегов <script data-skip-moving="true"> </script>: 9.jpg
    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=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-формы и виджета в шаблоне сайта

<script>
window.roistatVisitCallback = function (visitId) {
<-- Пример кода CRM-формы -->
(function(w,d,u,b){w['Bitrix24FormObject']=b;w[b] = w[b] || function(){arguments[0].ref=u;
                (w[b].forms=w[b].forms||[]).push(arguments[0])};
                if(w[b]['forms']) return;
                var s=d.createElement('script');s.async=1;s.src=u+'?'+(1*new Date());
                var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);
        })(window,document,'https://b24-7f7rml.bitrix24.ru/bitrix/js/crm/form_loader.js','b24form');
        b24form({"id":"5","lang":"ru","sec":"b5ujpm","type":"inline","presets": {"roistatID": visitId}});
<-- Пример кода виджета -->
(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>

Передача номера визита в Битрикс Формах

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

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

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

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

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

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

Лид

10.png

Сделка

11.png