Иштеп чыгуучулар жана өнөктөштөр үчүн

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 системасындагы виджеттин уникалдуу IDси
`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`	Билдирүү текстинин түсү. Көрсөтүлбөсө — алкактын караңгылатылган түсү

Суроолор пайда болдубу?