Виджет конвертера валют: руководство по установке и использованию
Предоставьте посетителям вашего сайта быстрый и интерактивный расчет курсов валют. Виджет конвертера валют поддерживает более 150 мировых валют, драгоценные металлы и Bitcoin с мгновенным двусторонним пересчетом на стороне клиента, поиском валют с флагами и нулевыми затратами на обслуживание.
1. Быстрый старт: встраивание виджета
Встроить конвертер очень просто. Добавьте скрипт и пользовательский HTML-тег в тело (<body>) вашей веб-страницы в том месте, где должен отображаться виджет:
<!-- Загрузка движка виджета -->
<script src="https://www.forexinvestors.com/widgets/currency-converter/widget.js"></script>
<!-- Элемент конвертера валют -->
<currency-converter
lang="ru"
from="USD"
to="EUR"
amount="1"
theme="default"
border-radius="5">
</currency-converter>Совет по производительности: Файл загрузчика JavaScript достаточно подключить только один раз на странице, даже если вы размещаете несколько конвертеров одновременно.
2. Атрибуты настройки
Настройте внешний вид и валютную пару по умолчанию, изменив атрибуты элемента <currency-converter>:
| Атрибут | Тип | По умолчанию | Описание |
|---|---|---|---|
lang |
Строка (String) | en |
Задает язык интерфейса для локализованных названий валют и формата даты (en, ar, fr, es, ru). |
from |
Строка (String) | EUR |
Код исходной валюты по умолчанию (ISO 4217, а также BTC, XAU, XAG, XPT; например: USD, EUR, GBP, SAR). |
to |
Строка (String) | USD |
Код целевой валюты по умолчанию (ISO 4217 или BTC; например: EUR, USD, JPY, AED, EGP). |
amount |
Число (Number) | 1 |
Начальная сумма для конвертации при загрузке (любое положительное число, например: 1, 100, 50.5). |
theme |
Строка (String) | default |
Выбирает цветовую схему: default, blue, green, yellow, red, ocean, purple, teal, dark, rose или custom. |
border-radius |
Число (Number) | 5 |
Радиус скругления углов в пикселях для контейнера виджета (целое число от 0 до 20 в конфигураторе, поддерживается до 50, например: 0, 5, 12). |
size |
Строка (String) | normal |
Управляет высотой и размером шрифта полей ввода и списков (normal или large). |
native-dropdown |
Строка (String) | off |
Установите значение on, чтобы использовать стандартные списки <select> браузера вместо выпадающего меню с поиском и флагами. |
Атрибуты цветов пользовательской темы
При установке theme="custom" вы можете настроить отдельные цвета виджета с помощью 6-значных шестнадцатеричных кодов (без символа #):
| Атрибут | По умолчанию | Описание |
|---|---|---|
bg-color |
F6F6F6 |
Цвет фона контейнера виджета. |
border-color |
BCBCBC |
Цвет рамки контейнера, полей ввода и выпадающих списков. |
text-color |
222222 |
Основной цвет текста для полей ввода, названий валют и времени обновления. |
input-bg-color |
FFFFFF |
Цвет фона для полей ввода суммы и списков валют. |
bg-color-button |
535353 |
Цвет фона кнопки смены валют (⇆) и кнопок нижней панели. |
button-border-color |
2E2E2E |
Цвет рамки кнопки смены валют и кнопок нижней панели. |
button-hover-color |
8A8A8A |
Цвет подсветки при наведении на кнопку смены валют и кнопки нижней панели. |
3. Возможности для пользователей
Посетители вашего сайта получают доступ к следующим встроенным функциям конвертера:
- Мгновенный двусторонний расчет: Вводите сумму в верхнее (исходная валюта) или нижнее (целевая валюта) поле для мгновенного пересчета в любом направлении прямо в браузере без дополнительных запросов к серверу.
- Быстрая смена валют (
⇆): Мгновенно меняйте исходную и целевую валюты местами с помощью кнопки рядом с верхним полем ввода. - Более 150 валют, металлы и криптовалюта: Конвертация мировых фиатных валют, Bitcoin (
BTC) и драгоценных металлов (XAU,XAG,XPT), разделенных на Избранные (USD,EUR,GBP,CAD) и Все валюты. - Выпадающие списки с поиском и флагами: Быстрый поиск любой валюты по коду или названию со значками флагов стран и фильтрацией на лету.
- Изоляция Shadow DOM и автоконтраст: Виджет рендерится внутри изолированного Shadow DOM, исключая конфликты со стилями вашего сайта, и автоматически подбирает контрастный цвет текста на кнопках.
- Отметка времени курсов: Отображает дату и время последней синхронизации курсов в нижней части виджета вместе с быстрыми ссылками на источник данных (
FI) и страницу настройки виджета (+).
4. Инструкции по интеграции в CMS
WordPress / Gutenberg и Elementor
- Добавьте блок Произвольный HTML (Custom HTML) в запись, на страницу или в боковую панель виджетов.
- Вставьте код скрипта и элемент
<currency-converter>, сгенерированный выше. - Обновите или опубликуйте страницу.
Webflow, Wix и Shopify
- Добавьте элемент Встраивание / Пользовательский код (Embed / Custom Code) в макет страницы.
- Вставьте фрагмент кода виджета.
- Убедитесь, что родительский контейнер имеет минимальную ширину от
240pxдо340pxдля оптимального отображения.
5. Часто задаваемые вопросы (FAQ)
Как часто обновляются курсы валют в виджете?
Курсы валют обновляются каждые 5 минут на основе актуальных котировок валютного рынка. Отметка времени в нижней части виджета показывает время последнего обновления.
Вызывает ли смена валюты или ввод суммы дополнительные запросы к серверу?
Нет. Виджет загружает полную таблицу курсов один раз при инициализации и выполняет все расчеты, смену валют и обратную конвертацию мгновенно в браузере.
Можно ли разместить несколько конвертеров на одной странице?
Да. Вы можете добавить несколько элементов <currency-converter> с разными валютными парами, суммами или темами оформления. Внешний тег <script> достаточно подключить один раз на странице.
Адаптирован ли виджет для мобильных устройств?
Да. Виджет использует адаптивную вертикальную верстку, которая автоматически подстраивается под ширину родительского контейнера на смартфонах, планшетах и в боковых панелях на компьютерах.
Требуется ли для работы виджета API-ключ или атрибут data-endpoint?
API-ключ не требуется, а указывать атрибут data-endpoint не нужно — виджет автоматически определяет адрес загрузки данных из URL подключенного скрипта widget.js.