Виджет кредитных предложений Banks.kg
Подключите к своему сайту готовый каталог кредитных предложений банков Кыргызстана. Виджет автоматически обновляет данные и всегда отображает актуальные условия без дополнительной поддержки с вашей стороны.
Почему стоит использовать виджет
Актуальные кредитные предложения от всех банков Кыргызстана
Автоматическое обновление данных без ручного вмешательства
Как подключить виджет
Интеграция занимает всего несколько минут и не требует сложной настройки:
1
Шаг 1. Добавьте контейнер и ссылку на страницу
HTML
<div class="banks-widget" data-id="YOUR_WIDGET_ID"></div>
<a
href="https://banks.kg"
class="bkwg-link"
target="_blank"
rel="noopener noreferrer"
style="all: initial; display: flex; justify-content: center; padding: 8px 16px; background: #fff; border-radius: 6px; margin-top: 8px; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #111827; align-items: center; gap: 12px; text-decoration: none; cursor: pointer;"
onmouseover="this.style.cursor='pointer'; this.style.textDecoration='underline'"
onmouseout="this.style.cursor='pointer'; this.style.textDecoration='none'"
>
<img
src="https://banks.kg/images/logos/banks-logo.svg"
alt="Banks.kg"
style="all: initial; display: block; height: 24px; width: auto; cursor: pointer;"
/>
<span style="all: initial; font-size: 12px; font-weight: 500; line-height: 24px; color: #2563eb; display: inline-block; vertical-align: middle; cursor: pointer; margin-top: -4px">
сравните предложения
</span>
</a> 2
Шаг 2. Подключите скрипт виджета
JavaScript
<script src="https://widget.banks.kg/banks-widget.js"></script>Настройка внешнего вида
Вы можете адаптировать внешний вид виджета под дизайн вашего сайта с помощью data-атрибутов:
HTML
<div class="banks-widget" data-id="YOUR_WIDGET_ID" data-accent="#2563EB" data-background-primary="#ffffff" data-btn-primary="#2563EB"></div>Поддерживаемые параметры
| Атрибут | Описание |
|---|---|
data-id | Обязательный параметр. Уникальный идентификатор виджета в системе Banks.kg |
data-accent | Цвет фокуса при вводе в поля, галочки чекбокса и индикатора загрузки (по умолчанию — #2563EB) |
data-background-primary | Основной фон: карточки, поля ввода, списки, подвал (по умолчанию — #ffffff) |
data-background-secondary | Фон блока фильтров, подложки логотипа и меток (по умолчанию — #f3f4f6) |
data-border | Цвет всех рамок и разделителей (по умолчанию — #e5e7eb) |
data-link | Цвет ссылок: название банка, ссылки в подвале и форме (по умолчанию — #2563EB) |
data-top | Цвет рамки и плашки «ТОП» у первого предложения (по умолчанию — #ea580c) |
data-top-text | Цвет текста на плашке «ТОП» (по умолчанию — #ffffff) |
data-btn-primary | Цвет кнопок «Оформить» и «Отправить заявку», а также активной страницы (по умолчанию — #2563EB) |
data-btn-primary-hover | Цвет этих кнопок при наведении. Если не задан — цвет кнопки, затемнённый на 10% |
data-btn-primary-text | Цвет текста на основных кнопках (по умолчанию — #ffffff) |
data-btn-page-inactive | Фон неактивных страниц пагинации (по умолчанию — #ffffff) |
data-btn-page-inactive-text | Цвет цифр на неактивных страницах пагинации (по умолчанию — #374151) |
data-btn-weight | Насыщенность шрифта основных кнопок: от 400 до 900 (по умолчанию — 500) |
data-btn-radius | Скругление углов основных кнопок, например 10px или 999px (по умолчанию — 6px) |
data-error | Цвет ошибок проверки формы: текст под полем и рамка поля (по умолчанию — #ef4444) |
data-alert-success | Цвет рамки сообщения об успешной отправке заявки (по умолчанию — #10b981) |
data-alert-success-bg | Фон этого сообщения. Если не задан — осветлённый цвет рамки |
data-alert-success-text | Цвет текста сообщения. Если не задан — затемнённый цвет рамки |
data-alert-error | Цвет рамки сообщения об ошибке отправки. Если не задан — значение data-error |
data-alert-error-bg | Фон этого сообщения. Если не задан — осветлённый цвет рамки |
data-alert-error-text | Цвет текста сообщения. Если не задан — затемнённый цвет рамки |