«Брендированный короткий отчёт»
Введение
Компонент «Брендированный короткий отчёт» (далее по тексту - «компонент») предоставляет возможность партнёрам сервиса avtocod.ru внедрить функционал отображения короткого отчёта (содержащего базовую информацию о ТС по его VIN-коду, госномеру и т.д.) в модальном (всплывающем) окне с возможностью его стилизации.
Модальное окно содержит кнопку «купить полный отчёт», по нажатию на которую открывается новая вкладка браузера с предложением произвести оплату полного отчёта. После покупки пользователем полного отчёта, партнёру начисляется его комиссия.
- По нажатию на элемент, содержащий специальный атрибут;
- После ввода VIN-кода, госномера и т.д. в произвольное текстовое поле;
- При принудительном вызове определенного javascript-метода.
Требования к сайтам для подключения компонента:
- Обмен данными происходит по протоколу HTTPS
Регистрация в партнерской программе
Для подключения компонента вам необходимо зарегистрироваться в партнерской программе. В личном кабинете партнера вы получите идентификатор партнерской ссылки, доступ ко всей статистике по вашим отчетам.
Шаг 1
Зарегистрируйтесь в партнерской программе. Ссылка на регистрацию.
Шаг 2
После прохождения модерации вы получите доступ в личный кабинет партнера.
Шаг 3
Необходимо создать партнёрскую ссылку в разделе Ссылки и промокоды или использовать уже созданную в этом же разделе. Из партнёрской ссылки нужно скопировать параметр refLinkId.
Запомните ваш идентификатор партнерской ссылки. Он необходим для интеграции AViframe компонента с вашим личным партнерским кабинетом (как использовать идентификатор партнерской ссылки, смотреть ниже).
Шаг 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({
ref_link_id: '111111'
});
</script>
После подключения компонента и создания экземпляра объекта AViframe происходит автоматический поиск элементов, содержащих специальный атрибут data-avtocod-number. По клику на него будет открываться модальное окно, содержащее короткий отчёт.
Наглядные примеры использования AViframe компонента вы можете найти по ссылке
2. Описание объекта Aviframe
При создании экземпляра объекта AViframe в конструктор вы можете передать набор параметров, позволяющих производить более тонкую настройку работы компонента. В параметр ref_link_id указываете полученный идентификатор refLinkId из личного кабинета.
var aviframe = new AViframe({
modal_css_uri: 'https://your.site/your_aviframe_style.css',
ref_link_id: '111111'
});
Также при использовании следующей конструкции вы сможете указать произвольный CSS-файл для брендирования контента модального окна:
var aviframe = new AViframe({
modal_css_uri: 'https://your.site/your_aviframe_style.css',
ref_link_id: '111111'
});
Подробнее, как настроить брендированный отчет, смотрите ниже.
В таблице представлены все возможные параметры со значениями, используемыми по умолчанию:
| Параметр | Описание | Значение по умолчанию |
|---|---|---|
modal_css_uri |
URI CSS файла, содержащего стили для оформления (брендирования) содержимого модального окна | null |
ref_link_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') |
setRefLinkId(string ref_link_id) |
Устанавливает идентификатор партнерской ссылки (refLinkId) | .setRefLinkId('1000001') |
Брендирование короткого отчёта
Вы можете использовать собственные стили для оформления контента модального окна, содержащего контент короткого отчёта. Для этого необходимо передать в конструктор объекта параметр modal_css_uri, который содержит стили для вашего компонента:
var aviframe = new AViframe({
modal_css_uri: 'https://your.site/your_aviframe_style.css',
ref_link_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 |
ref_link_id |
ID партнера в партнерской программе (в опциях объекта устанавливается через параметр ref_link_id или при помощи метода setRefLinkId()) |
/short_report?refLinkId=P0001 |
Параметры можно комбинировать, например: /short_report?number=A111AA177&refLinkId=P0001
В случае некорректно сформированного запроса вам будет отображена страница с сообщением об ошибке:
Ранее использовалась другая партнёрская программа, в которой применялся параметр partner_id. В текущей версии партнёрской программы используется параметр ref_link_id. Если вы используете старую интеграцию с параметром partner_id, настоятельно рекомендуем обновить код и перейти на использование ref_link_id.Это позволит снизить вероятность ошибок в будущем.
Если у вас остались вопросы, свяжитесь с нами по электронной почте pp@spectrumdata.ru. После установки AViframe на ваш сайт, также свяжитесь с нами для тестирования.