Автокод

Внедрение компонента
«Брендированный короткий отчёт»

Введение

Компонент «Брендированный короткий отчёт» (далее по тексту - «компонент») предоставляет возможность партнёрам сервиса avtocod.ru внедрить функционал отображения короткого отчёта (содержащего базовую информацию о ТС по его VIN-коду, госномеру и т.д.) в модальном (всплывающем) окне с возможностью его стилизации.

Модальное окно содержит кнопку «купить полный отчёт», по нажатию на которую открывается новая вкладка браузера с предложением произвести оплату полного отчёта. После покупки полного отчёта партнёру начисляется его комиссия.

Отображение модального окна может происходить:

По нажатию на элемент, содержащий специальный атрибут;
После ввода VIN-кода, госномера и т.д. в произвольное текстовое поле;
При принудительном вызове определенного javascript-метода.

Требования к сайтам для подключения компонента:

Обмен данными происходит по протоколу HTTPS

Регистрация в партнерской программе

Для подключения компонента вам необходимо зарегистрироваться в партнерской программе. В личном кабинете партнера вы получите партнерский ID, доступ ко всей статистике по вашим отчетам, а также платежным данным.

Шаг 1

Зарегистрируйтесь в партнерской программе. Ссылка на регистрацию.

Шаг 2

После прохождения модерации вы получите доступ в личный кабинет партнера.

Шаг 3

Партнерский ID размещен в разделе «Мой профиль» - «Персональные детали».

Запомните ваш ID партнёра. Он необходим для интеграции AViframe компонента с вашим личным партнерским кабинетом (как использовать ID партнера, смотреть ниже).

Шаг 4

Подключите Компонент «Брендированный короткий отчёт».

Базовое использование компонента

Базовый функционал позволяет при клике по кнопке отображать краткий отчёт в модальном окне на вашем сайте.

1. Подключение

Для подключения компонента необходимо добавить указанные ниже html-теги на страницу. Внутри тега <head> ... </head>:

<link type="text/css" rel="stylesheet" href="https://avtocod.ru/aviframe/aviframe-modal.css?ver=1.0" >

Данный файл содержит стандартные стили оформления модального окна (не его содержимого) и базовых классов. Вы можете разместить копию данного файла на своём ресурсе, переопределив их на своё усмотрение.

И перед закрывающим тегом </body>:

<script type="text/javascript" src="https://avtocod.ru/aviframe/aviframe.js?ver=1.0"></script>
<script type="text/javascript">
    var aviframe = new AViframe({
        partner_id: 'P00001'
    });
</script>

После подключения компонента и создания экземпляра объекта AViframe происходит автоматический поиск элементов, содержащих специальный атрибут data-avtocod-number. По клику на него будет открываться модальное окно, содержащее короткий отчёт.

Наглядные примеры использования AViframe компонента вы можете найти по ссылке

2. Описание объекта Aviframe

При создании экземпляра объекта AViframe в конструктор вы можете передать набор параметров, позволяющих производить более тонкую настройку работы компонента. В параметр partner_id указываете полученный ID партнера из личного кабинета.

var aviframe = new AViframe({
    modal_css_uri: 'https://your.site/your_aviframe_style.css',
    partner_id: 'P00002'
});

Также при использовании следующей конструкции вы сможете указать произвольный CSS-файл для брендирования контента модального окна:

var aviframe = new AViframe({
  modal_css_uri: 'https://your.site/your_aviframe_style.css',
  partner_id: 'P00003'
});

Подробнее, как настроить брендированный отчет, смотрите ниже.

В таблице представлены все возможные параметры со значениями, используемыми по умолчанию:

Параметр	Описание	Значение по умолчанию
`modal_css_uri`	URI CSS файла, содержащего стили для оформления (брендирования) содержимого модального окна	`null`
`partner_id`	ID партнера в партнерской программе	`null`
`auto_init`	Автоматическая инициализация объекта (автоматический вызов метода `init()`)	`true`

Также объект AViframe поддерживает следующие методы:

Имя метода	Описание	Пример использования
`init()`	Производит поиск элементов со специальным атрибутом `data-avtocod-number` и навешивание на них событий, создание DOM-элементов модального окна	`.init()`
`showModal(string number, string number_type)`	Отображает модальное окно с коротким отчетом	`.showModal('A111AA177', 'GRZ')`
`showExample()`	Открывает в новой вкладке браузера пример полного отчета. (Страница примера отчёта)	`true`
`setModalCssUri(string css_uri)`	Устанавливает URI CSS файла, содержащего стили для оформления содержимого модального окна	`.setModalCssUri('https://your.site/style.css')`
`setPartnerId(string partner_id)`	Устанавливает ID партнера в партнерской программе	`.setPartnerId('P000001')`

Брендирование короткого отчёта

Вы можете использовать собственные стили для оформления контента модального окна, содержащего контент короткого отчёта. Для этого необходимо передать в конструктор объекта параметр modal_css_uri, который содержит стили для вашего компонента:

var aviframe = new AViframe({
  modal_css_uri: 'https://your.site/your_aviframe_style.css',
  partner_id: 'P00003'
});

Или установить с использованием метода .setModalCssUri()) URI CSS файла стилей, который будет использован для оформления:

var aviframe = new AViframe();
aviframe.setModalCssUri('https://your.site/style.css');

Внимание! Для использования данного функционала свяжитесь с нами по электронной почте pp@spectrumdata.ru, предоставив URI файла стилей, который вы планируете использовать. После проверки URL модераторами, домен, на котором размещен файл стилей, будет добавлен в список разрешенных.

Пример брендированного короткого отчёта:

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


/* Основной контейнер, тут можете переопределить стили для шрифта */
.report-content{
    font-family: "Trebuchet MS", Verdana, Tahoma;
}

/* Главный логотип */
.main-logotype{
    background-image: url('https://your.site/logotype.png');
    background-repeat: no-repeat;
    height: 30px;
    margin-top: 10px;
}

/* Кнопка покупки полного отчёта */
.report-content .buy-button {
    background: rgb(61, 83, 124);
    color: #fff;
    border-radius: 0;
    border-color: rgb(61, 83, 124);
}

/* Кнопка покупки полного отчёта при наведении */
.report-content .buy-button:hover {
    background: rgb(85, 116, 171);
    border-color: rgb(85, 116, 171);
}

/* Стили для заголовка */
.report-header__title {
    font-size: 28px;
}

/* Стили для контента */
.post-text {
    font-size: 16px;
}

URI-параметры для iframe

Для отображения контента короткого отчёта используется специальным образом сформированный запрос. Базовый URI запроса выглядит следующим образом (принимает GET запросы):

https://avtocod.ru/aviframe/short_report

Параметр	Описание	Пример использования
`number`	Значение идентификатора ТС (обязательный параметр)	`/short_report?number_type=GRZ`
`number_type`	Тип идентификатора ТС	`.showModal('A111AA177', 'GRZ')`
`modal_css_uri`	URI CSS файла, содержащего стили для оформления	`/short_report?modal_css_uri=https%3A%2F%2Fyour.site%2Fyour_aviframe_style.css`
`a_aid`	ID партнера в партнерской программе (в опциях объекта устанавливается через параметр `partner_id` или при помощи метода `setPartnerId()`)	`/short_report?a_aid=P0001`

Параметры можно комбинировать, например: /short_report?number=A111AA177&a_aid=P0001

В случае некорректно сформированного запроса вам будет отображена страница с сообщением об ошибке:

Если у вас остались вопросы, свяжитесь с нами по электронной почте pp@spectrumdata.ru.