Интеграция с CRM Extreme для площадок дилера

Общая информация

Для того, чтобы дать возможность оформлять заявки на финансовые сервисы прямо со своей площадки - с сайта или интернет-магазина - вам потребуется провести несложную интеграцию. Ориентировочно потребуется от 0.5 до 1.5 часа специалиста, никаких дополнительных технических требований нет.

Сейчас поддерживаются:

1. Подключите скрипты

В тело страниц (или шаблона страниц) вашего сайта или магазина нужно добавить следующие строки:

<link href="//i.extremeassist.ru/xast_js.css" rel="stylesheet">
<script type="text/javascript" src="//i.extremeassist.ru/xast_js.js" defer></script>

Обычно они подключены в секции head, в шаблоне сайта, но можно указать прямо в теле страницы.

2. Передайте данные

После подключения скриптов, внутри страницы требуется:

Для получения ID компании и ее торговых точек — пожалуйста, обратитесь к представителю Extreme Assistance по телефону или электронной почте sladkevich@extremeassist.ru

2.1 Заявка без ограничений

Этот метод не требует технических предустановок и дополнительных данных.

499 900 руб Оформить заявку

<button class="xast-action" data-xast="">Оформить заявку</button>

2.2 Заявка с указанием компании

В данных активного элемента надо передать ID компании, вида E6796153-B842-48F2-AD64-F008405A71C2.

В форме будут показаны на выбор торговые точки (мотосалоны) для этой компании.

499 900 руб Оформить заявку

<button class="xast-action" data-xast='{"company":"E6796153-B842-48F2-AD64-F008405A71C2"}'>Оформить заявку</button>

2.3 Заявка с указанием торговой точки

В данных активного элемента надо передать ID торговой точки/салона, вида 3AE8A86A-EE3D-44E4-B5B4-5F12CD4BE1EA.

499 900 руб Оформить заявку

<button class="xast-action" data-xast='{"salepoint":"3AE8A86A-EE3D-44E4-B5B4-5F12CD4BE1EA"}'>Оформить заявку</button>

2.4 Данные формы

Не следует заставлять пользователя вводить вручную те данные, которые уже известны. Пожалуйста, по возможности - заполняйте данные техники, цену, марку-модель и другие известные поля. Важно! Чем больше полей заполнено - тем выше конверсия.

499 900 руб Оформить заявку

<button class="xast-action" data-xast='{"motorPrice":"499900","motorBrand":"Yamaha"}'>Оформить заявку</button>

Возможные поля данных:

Имя клиентаcontactName
Телефон клиентаcontactPhone
Эл. почтаcontactEmail
Регион проживания клиентаcontactRegion
Тип техникиmotorType
Марка техникиmotorBrand
Модель техникиmotorModel
Цена техникиmotorPrice
Регион покупки техникиregion
Комментарийcomment

3. Настройте интеграцию

Как настраивать внешний вид?
За внешний вид окна сейчас отвечают классы в xast_js.css, настраивайте их на свое усмотрение.

Как изменить внутреннее отображение формы, внутри iframe?
Есть возможность передать ссылку на файл стилей CSS, который будет применен к внутреннему содержанию формы.
499 900 руб Белая форма

<button class="xast-action"
data-xast='{"motorPrice":"499900","custom_css":"//crm.extremeassist.ru/VAADIN/sample/white.css"}'>Белая форма</button>

Что важно помнить в этом случае:

  • форма отдается с зашифрованном канале (https), поэтому файл со стилями CSS должен также отдаваться в защищенном канале, с подтвержденным сертификатом (иначе браузер клиента просто не загрузит его, по соображениям безопасности).
  • в пути файла запрещены служебные символы ?,&,=,<,> и некоторые другие, из-за потенциальной возможности атак межсайтового скриптинга (XSS)

Еще примеры:

Русская Механика
Форма с брендированием - Русская Механика

<button class="xast-action" data-xast='{"motorPrice":"499900",
"motorBrand":"Русская Механика","custom_css":"//s.extremeassist.ru/rm/rm1117.css",
"salepoint":"3AE8A86A-EE3D-44E4-B5B4-5F12CD4BE1EA"}'>Заполнить заявку</button>
Stels
Форма с брендированием - Stels

<button class="xast-action" data-xast='{"motorPrice":"499900",
"motorBrand":"Stels","custom_css":"//s.extremeassist.ru/stels/stels1117.css",
"salepoint":"3AE8A86A-EE3D-44E4-B5B4-5F12CD4BE1EA"}'>Заполнить заявку</button>
CFMoto
Форма с брендированием - CFMOTO

<button class="xast-action" data-xast='{"motorPrice":"499900",
"motorBrand":"CFMOTO","custom_css":"//s.extremeassist.ru/cf/cf1117.css",
"salepoint":"3AE8A86A-EE3D-44E4-B5B4-5F12CD4BE1EA"}'>Заполнить заявку</button>
Bajaj
Форма с брендированием - Bajaj Motor

<button class="xast-action" data-xast='{"motorPrice":"499900",
"motorBrand":"Bajaj","custom_css":"//s.extremeassist.ru/bj/bj1117.css",
"salepoint":"3AE8A86A-EE3D-44E4-B5B4-5F12CD4BE1EA"}'>Заполнить заявку</button>
Tinger
Форма с брендированием - Tinger

<button class="xast-action" data-xast='{"motorPrice":"499900",
"motorBrand":"Tinger","custom_css":"//s.extremeassist.ru/tin/tin1117.css",
"salepoint":"3AE8A86A-EE3D-44E4-B5B4-5F12CD4BE1EA"}'>Заполнить заявку</button>
Polaris
Форма с брендированием - Polaris

<button class="xast-action" data-xast='{"motorPrice":"499900",
"motorBrand":"Polaris","custom_css":"//s.extremeassist.ru/pl/pl1117.css",
"salepoint":"3AE8A86A-EE3D-44E4-B5B4-5F12CD4BE1EA"}'>Заполнить заявку</button>
Yamaha
Форма с брендированием - Yamaha

<button class="xast-action" data-xast='{"motorPrice":"499900",
"motorBrand":"Yamaha","custom_css":"//s.extremeassist.ru/yam/yam1117.css",
"salepoint":"3AE8A86A-EE3D-44E4-B5B4-5F12CD4BE1EA"}'>Заполнить заявку</button>
Husqvarna
Форма с брендированием - Husqvarna

<button class="xast-action" data-xast='{"motorPrice":"499900",
"motorBrand":"Husqvarna","custom_css":"//s.extremeassist.ru/hq/hq1117.css",
"salepoint":"3AE8A86A-EE3D-44E4-B5B4-5F12CD4BE1EA"}'>Заполнить заявку</button>
Tohatsu
Форма с брендированием - Tohatsu

<button class="xast-action" data-xast='{"motorPrice":"499900",
"motorBrand":"Tohatsu","custom_css":"//s.extremeassist.ru/th/th1117.css",
"salepoint":"3AE8A86A-EE3D-44E4-B5B4-5F12CD4BE1EA"}'>Заполнить заявку</button>
Mercury
Форма с брендированием - Mercury

<button class="xast-action" data-xast='{"motorPrice":"499900",
"motorBrand":"Mercury","custom_css":"//s.extremeassist.ru/merc/merc1117.css",
"salepoint":"3AE8A86A-EE3D-44E4-B5B4-5F12CD4BE1EA"}'>Заполнить заявку</button>
BaltMotors
Форма с брендированием - Baltmotors

<button class="xast-action" data-xast='{"motorPrice":"499900",
"motorBrand":"Baltmotors","custom_css":"//s.extremeassist.ru/bm/bm1117.css",
"salepoint":"3AE8A86A-EE3D-44E4-B5B4-5F12CD4BE1EA"}'>Заполнить заявку</button>

3.1 Как «покрасить кнопку»

Кнопка, а точнее элемент, открывающий форму, рисуется на стороне вашего сайта — следовательно, может принимать любую форму на ваш вкус и цвет. Если у вас уже есть какие-то кнопки в каталоге на сайте (а скорее всего это так), то скопируйте их внешний вид, и настройте.
Подходящие элементы: button (кнопка), a (ссылка), div (блок), input type=button (кнопка в форме) и другие.
Единственное требование: элемент должен уметь получать событие click.

Примеры:

Просто цветная кнопка

Поменяйте цвет для соответствия остальным элементам сайта — и полдела сделано.

Купить в кредит
<style> .xast-btn-t {border:#933 2px solid; background:#a00; color:#fff; display:inline-block; padding:0.7em 1em; border-radius:0.3em; cursor:pointer} .xast-btn-t:hover {border:#c66 2px solid; background:#c00;} </style> <button class="xast-action xast-btn-t" data-xast='....'>Купить в кредит</button>

Кнопка картинкой

Самый удобный вариант, если есть штатный дизайнер. В активном элементе выводится заранее нарисованная картинка с нужным текстом.

<style> .xast-btn2 {background: url('//s.extremeassist.ru/btn/btn2.jpg') 0 0 no-repeat; width:227px; height:71px; border-radius:0.5em; cursor:pointer} .xast-btn2:hover {background: url('//s.extremeassist.ru/btn/btn2.jpg') 0 -71px no-repeat;} </style> <button class="xast-action xast-btn-2" data-xast='....'></button>

Еще кнопка картинкой

Можно экспериментировать с формой и поведением (картинка меняется со смещением, при наведении мышкой).

<style> .xast-btn1 {background: url('//s.extremeassist.ru/btn/btn1.jpg') 0 0 no-repeat; width:290px; height:90px; cursor:pointer} .xast-btn1:hover {background: url('//s.extremeassist.ru/btn/btn1.jpg') 0 -90px no-repeat;} </style> <button class="xast-action xast-btn-1" data-xast='....'></button>

Оформление на чистом CSS

А здесь наоборот, никаких картинок. Только верстка, которую знает верстальщик. Цвет не надо писать руками, есть редакторы.

Хорошая идея — выводить для моделей предполагаемую сумму платежа прямо в каталоге. В таком варианте всё возможно.

Купить в кредит

Кредит от 20 000/мес
<style> .xast-btn0 { background: rgba(255,73,41,1); background: -moz-linear-gradient(top, rgba(255,73,41,1) 0%, rgba(255,100,77,1) 50%, rgba(255,34,5,1) 51%, rgba(255,39,10,1) 71%, rgba(250,39,20,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,73,41,1)), color-stop(50%, rgba(255,100,77,1)), color-stop(51%, rgba(255,34,5,1)), color-stop(71%, rgba(255,39,10,1)), color-stop(100%, rgba(250,39,20,1))); background: -webkit-linear-gradient(top, rgba(255,73,41,1) 0%, rgba(255,100,77,1) 50%, rgba(255,34,5,1) 51%, rgba(255,39,10,1) 71%, rgba(250,39,20,1) 100%); background: -o-linear-gradient(top, rgba(255,73,41,1) 0%, rgba(255,100,77,1) 50%, rgba(255,34,5,1) 51%, rgba(255,39,10,1) 71%, rgba(250,39,20,1) 100%); background: -ms-linear-gradient(top, rgba(255,73,41,1) 0%, rgba(255,100,77,1) 50%, rgba(255,34,5,1) 51%, rgba(255,39,10,1) 71%, rgba(250,39,20,1) 100%); background: linear-gradient(to bottom, rgba(255,73,41,1) 0%, rgba(255,100,77,1) 50%, rgba(255,34,5,1) 51%, rgba(255,39,10,1) 71%, rgba(250,39,20,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff4929', endColorstr='#fa2714', GradientType=0 ); font-size:120%; display:inline-block; padding:0.5em 1.1em; cursor:pointer; border-radius:0.5em; font-family: sans-serif; font-weight:bold; color:#fff; border:#ccc 3px solid; text-shadow: #666 0 1px 1px; rgba(0,0,0,0.1) 0 1px 10px;} </style> <button class="xast-action xast-btn0" data-xast='....'>Купить в кредит</button>

3.2 Еще техническое

Как обрабатывать элементы, отрисованные динамически (например, в ajax-корзине) ?
После динамического добавления нового элемента с классом .xast-action на страницу, вызовите метод xast_init(); еще раз. Уже обработанные элементы имеют метку, и повторно обработаны не будут.

При отработке скрипта всплывает popup с ошибкой парсинга, что делать?
Проверьте значения атрибутов data-xast='' и метода xast_init();. Они должны быть валидной json-нотацией (в том числе кавычки).

Куда писать с жалобами и предложениями?
sladkevich@extremeassist.ru . Важно! Если скрипт работает некорректно - пожалуйста, указывайте версию браузера, операционной системы и прочие параметры окружения, чтобы мы могли воспроизвести проблему у себя и всё полечить.