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

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

Если вы хотите настроить интеграцию с онлайн-чатом Битрикс24, воспользуйтесь этой инструкцией.

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

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

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

С 1 января 2021 года интеграция с Битрикс24 доступна только для пользователей коммерческих тарифов Битрикс24. Узнать больше
Интеграция с Roistat поддерживает только CRM-форму и Обратный звонок. В Битрикс24 должно быть добавлено дополнительное поле roistat.
Дополнительное поле обязательно должно иметь название roistat, иначе интеграция работать не будет.

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

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

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

Настройка¶

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

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

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

В личном кабинете Битрикс24 откройте список предустановленных CRM-форм: CRM → Еще → CRM-формы:
Слева от названия формы нажмите Редактировать:
В меню слева перейдите на вкладку Сущности в CRM. Выберите сущность в зависимости от того, что вы хотите создавать в CRM по заявке из виджета.
Нажмите Включить экспертный режим и перейдите на вкладку Значения полей по умолчанию:

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

Нажмите на иконку редактирования поля и введите значение %roistatID%:
Настройте остальные параметры формы и нажмите Сохранить. После этого убедитесь, что форма включена:
Разместите код настроенной формы в шаблоне вашего сайта. Этот код подразумевает отправку заявок из форм Битрикс напрямую в 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 для настройки других типов форм при необходимости.

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

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

Затем нажмите Редактировать:
Для нужных каналов коммуникации замените формы на те, которые создали:
Убедитесь, что каналы включены, и нажмите Сохранить.

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

На странице CRM → Еще → Виджет на сайт нажмите кнопку Код на сайт. Откроется одноименное окно.
Скопируйте код виджета без тегов <script> </script>:

Вставьте скопированный код внутри следующего скрипта:

<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>

Скопируйте полученный код и вставьте его на страницу шаблона вашего сайта перед счетчиком 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 можно передавать на другом домене (когда форма сделана как отдельный лендинг со своей страницей). Для этого нужно:

В настройках формы в блоке Значения полей по умолчанию установите флажок заполнять поля в CRM автоматически при отправке формы.
В раскрывающемся списке под флажком выберите roistat и нажмите Добавить поле.
Ведите значение поля %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:

Лид

Сделка