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

Введение

Компонент "Брендированный короткий отчёт" (далее по тексту - "компонент") предоставляет возможность партнёрам сервиса 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');
Внимание! Для использования данного функционала свяжитесь с нами по электронной почте b2b@avtocod.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

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

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