(CRM) Интеграция с RetailCRM

RetailCRM — специализированная облачная CRM-система для интернет-магазинов.

Настройка полей

Основные поля:

• Имя - будет передано в поле name;

• Электронная почта - будет передана в поле email;

• Телефон - будет передан в поле phone;

Дополнительные поля:

• Количество;

• Галочки;

• Галочки с картинками;

• Одна галочка;

• Варианты;

• Варианты с картинками

• Выпадающий список;

• Файл - только название файла;

• Ползунок;

• Калькулятор;

• Галочка с согласием на обработку персональных данных;

• Скрытое поле;

• Название товара или название формы;

• Адрес страницы;

ПРОВЕРЬТЕ ЭТО ПЕРЕД ТЕМ, КАК ПРИСТУПИТЬ К ПОДКЛЮЧЕНИЮ ИНТЕГРАЦИИ

Чтобы после подключения интеграции передача заявки произошла успешно убедитесь, что типы полей выбраны корректно, а действием в форме после отправки заявки указано действие с сообщением:

1. Для поля где вводится ФИО нужно указать id для интеграции “name”

2. Для поля где вводится Почта нужно указать id “email”

3. Для поля где вводится Телефон нужно указать id “phone”

Подключение интеграции

1. В личном кабинете RetailCRM создайте магазин, если он еще не создан.

2. Перейдите в раздел настроек ”Интеграции” - ”Collector” и активируйте Collector для созданного магазина.

3. Скопируйте код ниже и замените установленное значение "RC-XXXXXXXXXXX-X" на свой полученный ключ.

<script type="text/javascript">
(function(_,r,e,t,a,i,l){_['retailCRMObject']=a;_[a]=_[a]||function(){(_[a].q=_[a].q||[]).push(arguments)};_[a].l=1*new Date();l=r.getElementsByTagName(e)[0];i=r.createElement(e);i.async=!0;i.src=t;l.parentNode.insertBefore(i,l)})(window,document,'script','https://collector.retailcrm.pro/w.js','_rc');

_rc('create', 'RC-XXXXXXXXXXX-X')

_rc('send', 'pageView');
</script>

4. Добавьте получившийся скрипт во вкладке Плагины, раздел "Свой код", поле "Перед \".

5. Дополнительно в самом конце поля "Перед \" добавьте такой скрипт и нажмите на кнопку "Сохранить".

<script>

cr.api(function (page) {
page.lazy('.cr-form', function (el) {
    var form = page.getComponent(el);

    // Начинаем ловить событие отправки формы
    form.on('before-submit', function (event) {

var name = event.fields.find(function (field) {

        return field.uid === 'name';
      });

var email = event.fields.find(function (field) {
        return field.uid === 'email';
      });

var phone = event.fields.find(function (field) {
        return field.uid === 'phone';
      });

var fields = event.fields.map(function (field) {
        return field.name + '\n' + field.value;

      }).join('\n\n');
console.log(event);
fields += '\n\n';
fields += 'Название формы:\n' + event.name + '\n\n';

fields += 'Адрес страницы:' + '\n' + location.href;

_rc('send', 'order', {
'name': name.value,
'email': email.value,
'phone': phone.value,
'customerComment': fields,
'orderMethod' : 'landing-page'
});
});
});
});

</script>

Важно! Обратите внимание на то, что если вы не передаете какое-то из трех полей (почта, имя, телефон), нужно удалить эту строчку в конце кода, который находится выше. К примеру если в вашей форме отсутствует email, то удаляется'email': email.value, .

6. Если все шаги инструкции выполнены корректно, то можно приступить к проверке работоспособности интеграции. Для этого убедитесь, что внесенные изменения в настройках сайта сохранены и выполните повторное открытие сайта. После чего оставьте на сайте заявку, а ее наличие проверьте в вашем аккаунте RetailCRM.

Передача пользовательских полей (продвинутые возможности)

Вы также можете создать пользовательское поле в CRM-системе и передавать информацию конкретного поля формы туда, для этого:

1. Создать пользовательское поле в RetailCRM следуя скриншотам ниже

2. Полю в редакторе страницы задается id

Примечание ID может быть любым, главное чтобы id не повторялось в рамках одной формы.

3. Код из шага 5 заменить на такой:

<script>

cr.api(function (page) {
page.lazy('.cr-form', function (el) {
    var form = page.getComponent(el);
    // Начинаем ловить событие отправки формы
    form.on('before-submit', function (event) {
var name = event.fields.find(function (field) {
        return field.uid === 'name';
      });
var email = event.fields.find(function (field) {
        return field.uid === 'email';
      });
var phone = event.fields.find(function (field) {
        return field.uid === 'phone';
      });
var fields = event.fields.map(function (field) {
        return field.name + '\n' + field.value;
      }).join('\n\n');
console.log(event);
fields += '\n\n';
fields += 'Название формы:\n' + event.name + '\n\n';
fields += 'Адрес страницы:' + '\n' + location.href;

/* Начала кода для доп.поля*/
var color = event.fields.find(function (field) {
/*  color -> это id поля */
        return field.uid === 'color';
      });
/* Конец кода для доп. поля */ 

_rc('send', 'order', {
'name': name.value,
'email': email.value,
'phone': phone.value,
'customerComment': fields,
/* Для добавления поля в CRM нужно прописать custom 
и к нему добавить с большой буквы символьный код Сolor */
'customСolor': color.value,
'orderMethod' : 'landing-page'
});
});
});
});

</script>

Результат передачи пользовательского поля