Документація віджета
Повний гід по вбудовуванню та налаштуванню віджета конвертера валют Currency.Wiki на вашому сайті.
Зміст
1 Початок роботи
Додати віджет конвертера валют на ваш сайт просто. Дотримуйтесь цих кроків:
- Перейдіть на сторінку конструктора віджета та налаштуйте вигляд
- Оберіть стиль, валюти та тему віджета
- Скопіюйте згенерований код для вбудовування (скрипт або iframe)
- Вставте код у HTML вашого сайту там, де має з'явитися віджет
Порада: Використовуйте швидкі шаблони у конструкторі віджета для швидкого старту з попередньо налаштованим віджетом.
2 Методи вбудовування
Вбудовування через скрипт (рекомендовано)
Метод вбудовування через скрипт вставляє віджет прямо на вашу сторінку. Випадаючі меню валют відображаються поверх контенту для зручного вибору.
<div id="currency-wiki-widget"></div>
<script src="https://widget.currency.wiki/v3/script.js?style=compact&theme=light&from=USD&to=EUR"></script>
- Випадаючі меню поза контейнером віджета
- Найкраще для інтерактивного вибору валют
- Безшовна інтеграція зі сторінкою
Вбудовування через Iframe
Метод вбудовування через iframe створює ізольований контейнер для віджета. Цей метод безпечний і працює в умовах суворої політики контенту.
<iframe src="https://widget.currency.wiki/v3/embed?style=compact&theme=light&from=USD&to=EUR"
width="300" height="180" frameborder="0"></iframe>
- Повністю ізольований від стилів сторінки
- Працює з суворими політиками безпеки контенту
- Простий і безпечний у впровадженні
Примітка: Використовуйте скрипт для повної інтерактивності (випадаючі меню поверх контенту). Використовуйте iframe для ізоляції або при обмеженнях CSP.
3 Стилі віджета
Оберіть з 11 різних стилів віджета, щоб відповідати дизайну вашого сайту. Кожен стиль оптимізовано для різних сценаріїв та розмірів.
mini
250x140px
Компактний однорядковий конвертер. Ідеально для заголовків або обмеженого простору.
square
250x250px
Віджет у співвідношенні 1:1 з кнопкою обміну. Чудово для сайдбарів.
compact
300x180px
Маленький конвертер з усіма основними функціями.
inline
480x56px
Горизонтальне розташування. Ідеально для вбудовування у контент чи навігацію.
tall
200x280px
Вертикальний сайдбар з класичними підписами.
mini-chart
250x260px
Компактний конвертер з графіком динаміки курсу.
multi-expandable
300x320px
Мультивалютний конвертер. Користувачі можуть додавати/видаляти валюти.
multi-fixed
300x300px
Фіксований список курсів. Найкраще для відображення конкретних курсів.
rates-compact
250x320px
Стиснутий список курсів з часом останнього оновлення.
rates-viewer
300x500px
Повний вигляд графіка з детальною інформацією про курс.
rates-viewer-compact
300x400px
Компактна версія переглядача курсів з графіками.
4 Параметри URL
Налаштовуйте віджет за допомогою параметрів URL. Вони працюють як для скрипта, так і для iframe.
| Параметр | За замовчуванням | Опис |
|---|---|---|
| style | compact | Стиль віджета (mini, square, compact, inline, tall, mini-chart, multi-expandable, multi-fixed, rates-compact, rates-viewer, rates-viewer-compact) |
| theme | light | Колірна тема (light, dark або auto) |
| from | USD | Код вихідної валюти (наприклад, USD, EUR, GBP) |
| to | EUR | Код цільової валюти (наприклад, EUR, USD, JPY) |
| amount | 1000 | Сума за замовчуванням для конвертації |
| accent | #2563eb | Акцентний колір у hex (без #) |
| lang | en | Код мови віджета (наприклад, en, es, fr, de) |
| flags | 1 | Показувати прапори країн (1=так, 0=ні) |
| display | iso | Формат відображення валюти (iso=USD, symbol=$) |
| lock | 0 | Заблокувати валюти (1=так, 0=ні) |
| currencies | EUR,GBP,JPY | Список валют через кому для мультивалютних віджетів |
| dropdown | all | Валюти у випадаючому меню (all, top10, top20 або список через кому) |
| branding | 1 | Показувати брендинг (1=так, 0=ні) |
| brandinglink | 1 | Зробити брендинг клікабельним (1=посилання, 0=лише текст) |
| format | auto | Формат чисел (auto, us, eu, french, indian) |
| decimals | 2 | Кількість знаків після коми (0-6) |
| chart | 0 | Увімкнути графік (1=так, 0=ні) |
| chartperiod | 7d | Період графіка (7d, 14d, 30d, 90d) |
Приклади
Компактний конвертер у темній темі:
?style=compact&theme=dark&from=USD&to=EUR
Мультивалютні курси:
?style=multi-fixed&from=USD¤cies=EUR,GBP,JPY,CAD
Міні-конвертер з 30-денним графіком:
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
Відображати символи валют замість кодів:
?style=compact&display=symbol&from=USD&to=EUR
Заблоковані валюти з користувацькою сумою:
?style=compact&from=GBP&to=USD&lock=1&amount=100
5 Опції налаштування
Опції теми
- light - Світлий фон з темним текстом
- dark - Темний фон зі світлим текстом
- auto - Автоматично підлаштовується під налаштування системи користувача
Формат відображення валюти
- iso - Показує ISO-коди, наприклад USD, EUR, GBP
- symbol - Показує символи валют, наприклад $, €, £
Формати чисел
- auto - Автоматично визначає налаштування браузера відвідувача
- us - Формат США: 1,234.56
- eu - Європейський формат: 1.234,56
- french - Французький формат: 1 234,56
- indian - Індійський формат: 1,23,456.78
Опції валют у випадаючому меню
- all - Всі 170+ підтримуваних валют
- top10 - Топ 10 найпопулярніших валют
- top20 - Топ 20 валют за обсягом торгів
- USD,EUR,GBP,... - Користувацький список конкретних валют
Порада: Використовуйте конструктор віджета для візуального налаштування всіх цих опцій і автоматичної генерації коду для вбудовування.
6 Вирішення проблем
Віджет не відображається
Переконайтеся, що код для вбудовування розміщено правильно у вашому HTML. Для скрипта переконайтеся, що контейнер div існує з правильним ID. Перевірте консоль браузера на наявність помилок JavaScript.
Випадаюче меню не працює
Якщо використовуєте iframe, випадаючі меню прокручуються всередині віджета. Для повної функціональності меню з накладанням використовуйте метод скрипта.
Конфлікти стилів
Якщо CSS вашого сайту впливає на вигляд віджета, спробуйте метод iframe, який ізолює стилі віджета від сторінки.
Проблеми з політикою безпеки контенту (CSP)
Якщо у вас сувора CSP, додайте currency.wiki до дозволених script-src і frame-src. Приклад: script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
Потрібна допомога?
Не можете знайти потрібне? Наша служба підтримки допоможе вам.
