RetailCRM — специализированная облачная CRM-система для интернет-магазинов.
Содержание
Настройка полей
Основные поля:
- Имя - будет передано в поле name;
- Электронная почта - будет передана в поле email;
- Телефон - будет передан в поле phone;
Дополнительные поля:
- Количество;
- Галочки;
- Галочки с картинками;
- Одна галочка;
- Варианты;
- Варианты с картинками
- Выпадающий список;
- Файл - только название файла;
- Ползунок;
- Калькулятор;
- Галочка с согласием на обработку персональных данных;
- Скрытое поле;
- Название товара или название формы;
- Адрес страницы;
ПРОВЕРЬТЕ ЭТО ПЕРЕД ТЕМ, КАК ПРИСТУПИТЬ К ПОДКЛЮЧЕНИЮ ИНТЕГРАЦИИ
Чтобы после подключения интеграции передача заявки произошла успешно убедитесь, что типы полей выбраны корректно, а действием в форме после отправки заявки указано действие с сообщением:
- Для поля где вводится ФИО нужно указать id для интеграции “name”
- Для поля где вводится Почта нужно указать id “email”
- Для поля где вводится Телефон нужно указать id “phone”
Подключение интеграции
1. В личном кабинете RetailCRM создайте магазин, если он еще не создан.
- Перейдите в раздел настроек ”Интеграции” - ”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. Добавьте получившийся скрипт во вкладке Плагины, раздел "Свой код", поле "Перед </head>".
5. Дополнительно в самом конце поля "Перед </body>" добавьте такой скрипт и нажмите на кнопку "Сохранить".
<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 следуя скриншотам ниже
- Полю в редакторе страницы задается id
Примечание ID может быть любым, главное чтобы id не повторялось в рамках одной формы.
- Код из шага 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>Результат передачи пользовательского поля
