Як вивести віджет банки Монобанку на свій сайт

Банка від Монобанк надає можливість збору коштів на різні цілі. Це може бути благодійність, накопичення на покупку, збір на подарунок чи будь-яка інша ціль. Але щоб максимально ефективно використовувати цю функцію, важливо не тільки створити банку, а й поширювати її серед аудиторії, зокрема й через власний веб-сайт. Так ваші відвідувачі зможуть бачити прогрес збору. У цій статті розглянемо, як це зробити правильно.

Основа віджету складається з трьох компонентів:

<div class="widget">
  <div class="qr-code">
    <!-- QR-код та декоративне зображення -->
  </div>
  <div class="progress-info">
    <!-- Інформація про збір та прогрес-бар -->
  </div>
</div>

Цікавою особливістю є поєднання QR-коду з декоративним зображенням котика:

<div class="qr-code">
  <img src="qrcat.png" class="cat">
  <img src="" class="qr" id="qrcode">
</div>

Котик розміщується поверх QR-коду, створюючи привабливий візуальний ефект. Важливо правильно налаштувати позиціонування через CSS.

Правий блок містить назву збору, прогрес-бар та статистику:

<div class="progress-info">
  <h3 id="title"></h3>
  <div class="progress-bar-container">
    <div class="progress-bar"></div>
  </div>
  <div class="progress-text">
    <span></span> <!-- Поточна сума та відсоток -->
    <span></span> <!-- Цільова сума -->
  </div>
</div>

Віджет оформлено в темній тематиці з градієнтами:

.widget {
  display: flex;
  align-items: center;
  background-color: #000;
  color: #fff;
  border-radius: 15px;
  padding: 20px;
  width: 350px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

Особливу увагу приділено прогрес-бару з градієнтним заливанням:

.progress-bar {
  background: linear-gradient(to right, #ff6b6b, #ff9a9e);
  height: 100%;
}

Головна частина функціоналу - запит до API Монобанку. Його реалізуємо за допомогою js коду.
Для початку нам потрібно дізнатись параметр longJarId для вашого віджета банки. Це не те саме, що звичайний jarId - це окремий ідентифікатор для API доступу. Його можна отримати на сторінці налаштування банки віджету - натисніть кнопку "Віджет для стрімів" в правому нижньому куті, відкриється вікно налаштування віджету.

Коли відкриється вікно налаштування віджета - в адресному рядку браузера копіюємо значення get-параметра longJarId.
Або натискаємо "Скопіювати віджет" і вставляємо отримане посилання у текстовий редактор. З цього посилання нам треба отримати взяти лише значення параметра jar (це і є той самий LONG_JAR_ID), яке ми будемо підставляти у посилання для отримання статистики банки у форматі json.

const url = "https://api.monobank.ua/bank/jar/[LONG_JAR_ID]";

fetch(url)
.then(response => response.json())
.then(monoApi => {
  // Обробка отриманих даних
});

API повертає об'єкт з наступними полями:

• title - назва банки
• amount - поточна сума (в копійках)
• goal - цільова сума (в копійках)
• jarId - короткий ідентифікатор банки (для QR-коду)

const progressBarAmount = (monoApi.amount / 100);
const progressBarGoal = (monoApi.goal / 100);
const progressPercentage = (progressBarAmount / progressBarGoal) * 100;

Для створення QR-коду використовується зовнішній сервіс. Важливо розуміти різницю між longJarId (для API запитів) та jarId (для QR-коду):

const data = "https://send.monobank.ua/jar/" + monoApi.jarId;
const qrCodeURL = `https://quickchart.io/qr?text=${encodeURIComponent(data)}&margin=0`;

Тобто для API використовуємо longJarId, а для QR-коду - короткий jarId, який API повертає у відповіді.

Результат - ось такий віджет на вашому сайті:

Віджет легко адаптується під дизайн сайту:

• Змініть кольорову схему через CSS змінні
• Адаптуйте розміри під свої потреби
• Додайте анімації для прогрес-бару
• Замініть декоративне зображення на власне

Інтеграція віджету банки Монобанку дозволяє підвищити ефективність збору коштів завдяки:

• Візуальному відображенню прогресу
• Зручності для донорів
• Автоматичному оновленню даних
• Професійному вигляду

Правильно налаштований віджет підвищить довіру відвідувачів до вашого проекту. Використовуйте наведений приклад як основу та адаптуйте його під свої потреби. Не забувайте тестувати функціонал на різних пристроях та браузерах для забезпечення найкращого користувацького досвіду.

Готовий скрипт: https://github.com/sparrow-ws/monobank-widget