GlobusPlus Currency Widget - Документація

🚀 Швидкий старт

Додайте віджет курсу валют на ваш сайт за 3 простих кроки

1

Підключіть CSS стилі

Додайте CSS файл в секцію <head> вашої сторінки

CSS - Підключення стилів

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@globusplus/[email protected]/gp-currency-widget.css">

2

Підключіть JavaScript

Додайте JS файл перед закриваючим тегом </body>

JavaScript - Підключення функціоналу

<script src="https://cdn.jsdelivr.net/npm/@globusplus/[email protected]/gp-currency-widget.iife.js"></script>

3

Додайте контейнер віджета

Створіть div з спеціальним атрибутом в потрібному місці сторінки

HTML - Контейнер віджета

<div data-gp-currency-widget></div>

💱 Тут з'явиться ваш віджет курсу валют

✅ Автоматична ініціалізація

Віджет автоматично знайде всі контейнери та ініціалізує їх після завантаження сторінки. Додаткових налаштувань не потрібно!

📦 Детальне встановлення

Повний посібник з встановлення віджета

Мінімальний приклад

Ось повний приклад HTML сторінки з віджетом:

HTML - Полный пример страницы

                    <!DOCTYPE html>
                        <html lang="uk">
                        <head>
                        <meta charset="UTF-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <title>Мій сайт з віджетом валют</title>

                        <!-- Підключаємо стилі віджета -->
                        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@globusplus/[email protected]/gp-currency-widget.css">
                        </head>
                        <body>
                        <h1>Вітаємо на нашому сайті</h1>

                        <!-- Віджет курсу валют -->
                        <div data-gp-currency-widget></div>

                        <!-- Підключаємо JavaScript в кінці -->
                        <script src="https://cdn.jsdelivr.net/npm/@globusplus/[email protected]/gp-currency-widget.iife.js"></script>
                        </body>
                        </html>
                

💡 Порада щодо розміщення файлів

Розмістіть CSS файл в секції <head>, а JavaScript файл перед закриваючим тегом </body> для оптимальної швидкості завантаження.

💻 Способи використання

Різні варіанти ініціалізації віджета

1. Автоматична ініціалізація (рекомендовано)

Найпростіший спосіб - використовувати data-атрибут:

HTML - Автоматична ініціалізація

                    <!-- Віджет ініціалізується автоматично -->
                        <div data-gp-currency-widget></div>
                

2. Використання ID

Альтернативний спосіб через ID елемента:

HTML - Використання ID

<div id="globusPlusCurrencyWidget"></div>

3. Ручна ініціалізація

Для динамічного додавання віджетів:

JavaScript - Ручна ініціалізація

                    
                        // Або ініціалізувати конкретний елемент

                        const container = document.getElementById('myWidget');

                        window.GPCurrencyWidget.init(container);

4. Множинні віджети

Ви можете розмістити кілька віджетів на одній сторінці:

HTML - Множинні віджети

                    
                        <!-- Віджет в header -->
                        <div data-gp-currency-widget></div>
                        
                        <!-- Віджет в sidebar -->
                        <div data-gp-currency-widget></div>
                        
                        <!-- Віджет в footer -->
                        <div data-gp-currency-widget></div>

✨ Можливості віджета

Все що потрібно знати про функціонал віджета

🔄

Два режими

Перемикання між обмінним курсом та курсом за картками GlobusPlus

📊

Тренди

Візуальні індикатори зростання/падіння курсу

💰

USD & EUR

Підтримка основних валютних пар

⚡

Швидкий

Легкий бандл ~28KB на базі Preact

📱

Адаптивний

Чудово працює на всіх пристроях

🔧

Простий

Встановлення за 5 хвилин

🔄 Автооновлення даних

Віджет автоматично оновлює курси валют кожні 15 хвилин для актуальної інформації.

🔧 Усунення проблем

Вирішення найпоширеніших проблем

⚠️ Віджет не відображається?

Перевірте:

Чи правильно підключені CSS та JS файли
Чи доступний API endpoint
Консоль браузера на наявність помилок
Чи правильний атрибут data-gp-currency-widget

Частые помилки

1. 404 помилка завантаження файлів

Рішення: Переконайтеся що шляхи до CSS та JS файлів правильні.

HTML - Правильні шляхи до файлів

                    
                        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@globusplus/[email protected]/gp-currency-widget.css">
                        
                        <script src="https://cdn.jsdelivr.net/npm/@globusplus/[email protected]/gp-currency-widget.iife.js"></script>

2. CORS помилки

Рішення: Налаштуйте правильні CORS заголовки на вашому сервері.

3. Віджет не ініціалізується

Рішення: Перевірте що JavaScript файл завантажується після DOM елементів.

💡 Потрібна допомога?

Якщо проблема не вирішилась, зверніться до команди підтримки GlobusPlus з деталями помилки.