Документация по виджету
Полное руководство по внедрению и настройке виджета конвертера валют 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>
- Полная изоляция от стилей вашей страницы
- Работает при строгих Content Security Policy
- Простая и безопасная реализация
Примечание: Используйте вставку через скрипт для полной интерактивности (выпадающие списки поверх контента). Используйте 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. Для вставки через скрипт убедитесь, что контейнер с правильным ID существует. Проверьте консоль браузера на наличие ошибок JavaScript.
Выпадающий список не работает
При использовании вставки через iframe выпадающие списки будут прокручиваться внутри виджета. Для полной функциональности используйте вставку через скрипт.
Конфликт стилей
Если CSS вашего сайта влияет на виджет, попробуйте вставку через iframe, которая изолирует стили виджета.
Проблемы с политикой безопасности контента
Если у вас строгая CSP, добавьте currency.wiki в разрешённые источники script-src и frame-src. Пример: script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
Нужна помощь?
Не нашли, что искали? Наша служба поддержки готова помочь.
