Бесплатный виджет для сайта

Виджет таблицы курсов валют для вашего сайта

Создайте мультивалютную таблицу курсов для вашего сайта или блога. Выберите базовую валюту, отметьте нужные валюты, включите интерактивный калькулятор и скопируйте HTML-код.

1. Язык, базовая валюта и сумма

2. Котируемые валюты и режим таблицы

3. Оформление и тема

HTML-код для установки на сайт

Скопируйте и вставьте этот код в нужное место вашей веб-страницы.

Виджет таблицы курсов валют: руководство по установке и использованию

Разместите на своем сайте настраиваемую таблицу актуальных курсов валют. Виджет курсов валют отслеживает более 150 мировых валют, драгоценные металлы и Bitcoin по отношению к любой базовой валюте, отображая флаги стран, индикаторы роста и падения, а также встроенный мультивалютный калькулятор.

1. Быстрый старт: встраивание виджета

Встроить таблицу курсов валют очень просто. Добавьте скрипт и пользовательский HTML-тег в тело (<body>) вашей веб-страницы в том месте, где должен отображаться виджет:

<!-- Загрузка движка виджета -->
<script src="https://www.forexinvestors.com/widgets/exchange-rates/widget.js"></script>

<!-- Элемент таблицы курсов валют -->
<currency-widget 
  lang="ru" 
  base="USD" 
  cross="AUD,CAD,CHF,EUR,GBP,INR,JPY" 
  display="code" 
  calc="off" 
  amount="1" 
  theme="default" 
  border-radius="5">
</currency-widget>

Совет по производительности: Файл загрузчика JavaScript достаточно подключить только один раз на странице, даже если вы размещаете несколько таблиц с разными базовыми валютами одновременно.

2. Атрибуты настройки

Настройте базовую валюту, список котируемых валют, режим калькулятора и оформление, изменив атрибуты элемента <currency-widget>:

Атрибут Тип По умолчанию Описание
lang Строка (String) en Задает язык интерфейса для локализованных названий валют и формата даты (en, ar, fr, es, ru).
base Строка (String) USD Код базовой валюты в заголовке таблицы (ISO 4217, а также BTC, XAU, XAG, XPT; например: USD, EUR, GBP, SAR).
cross Строка (String) USD,EUR,GBP,AUD,CHF,CAD,INR Список кодов целевых валют через запятую для отображения в строках таблицы (например: EUR,GBP,JPY,CAD,AUD,CHF). Валюта, совпадающая с base, автоматически исключается.
display Строка (String) code Способ отображения валют в строках: code для трехбуквенных кодов ISO (например, EUR) или name для полных названий валют.
calc Строка (String) off Включает или отключает встроенный интерактивный калькулятор (on или off). При значении on ячейки курсов становятся редактируемыми полями ввода.
amount Число (Number) 1 Начальная сумма базовой валюты, на которую умножаются все курсы в таблице (любое положительное число, например: 1, 10, 100).
theme Строка (String) default Выбирает цветовую схему: default, blue, green, yellow, red, ocean, purple, teal, dark, rose или custom.
border-radius Число (Number) 5 Радиус скругления углов в пикселях для контейнера виджета (целое число от 0 до 20 в конфигураторе, например: 0, 5, 12).

Атрибуты цветов пользовательской темы

При установке theme="custom" вы можете настроить отдельные цвета виджета с помощью 6-значных шестнадцатеричных кодов (без символа #):

Атрибут По умолчанию Описание
bg-color F6F6F6 Цвет фона контейнера виджета и нечетных строк таблицы.
border-color BCBCBC Цвет рамки контейнера и полей ввода встроенного калькулятора.
text-color 222222 Основной цвет текста для названий валют, курсов и времени обновления.
input-bg-color FFFFFF Цвет фона четных строк таблицы и полей ввода калькулятора.
bg-color-button 535353 Цвет фона кнопок в нижней панели виджета (FI и +).
button-border-color 2E2E2E Цвет рамки кнопок в нижней панели виджета.
button-hover-color 8A8A8A Цвет фона шапки таблицы (<th>), подсветки строк при наведении и кнопок нижней панели.

3. Возможности для пользователей

Посетители вашего сайта получают доступ к следующим встроенным функциям таблицы курсов валют:

  • Настраиваемая мультивалютная таблица: Отслеживание актуальных курсов для любой комбинации из более чем 150 мировых валют, драгоценных металлов (XAU, XAG, XPT) и Bitcoin (BTC) относительно выбранной базовой валюты.
  • Цветовые индикаторы роста и падения: Строки автоматически показывают динамику курса по сравнению с предыдущим днем — зеленым цветом при росте и красным при снижении.
  • Интерактивный многострочный калькулятор (calc="on"): При включении посетители могут ввести любую сумму в шапке базовой валюты или в любой строке таблицы для мгновенного пересчета всех остальных валют.
  • Отображение кодов или полных названий с флагами: Выбирайте компактные коды ISO (EUR, GBP) для узких боковых панелей или полные локализованные названия валют со значками флагов и всплывающими подсказками.
  • Изоляция Shadow DOM и автоконтраст: Виджет рендерится внутри изолированного Shadow DOM, поэтому стили таблиц вашего сайта не конфликтуют с виджетом, а цвет текста в шапке и на кнопках подбирается автоматически.
  • Отметка времени котировок: Отображает дату и время последней синхронизации курсов в нижней части виджета вместе с быстрыми ссылками на источник данных (FI) и страницу настройки виджета (+).

4. Инструкции по интеграции в CMS

WordPress / Gutenberg и Elementor

  1. Добавьте блок Произвольный HTML (Custom HTML) в запись, на страницу или в боковую панель виджетов.
  2. Вставьте код скрипта и элемент <currency-widget>, сгенерированный выше.
  3. Обновите или опубликуйте страницу.

Webflow, Wix и Shopify

  1. Добавьте элемент Встраивание / Пользовательский код (Embed / Custom Code) в макет страницы.
  2. Вставьте фрагмент кода виджета.
  3. Убедитесь, что родительский контейнер имеет минимальную ширину от 240px до 340px (используйте display="code" для узких колонок).

5. Часто задаваемые вопросы (FAQ)

Как часто обновляются курсы валют в таблице?

Курсы валют обновляются каждые 5 минут на основе актуальных котировок валютного рынка. Отметка времени в нижней части виджета показывает точное время последнего обновления.

Что означают зеленый и красный цвета курсов?

Зеленый цвет означает рост курса валюты по сравнению с предыдущим дневным значением, а красный — снижение. При включенном режиме calc="on" поля ввода окрашиваются в мягкие зеленые и красные оттенки для сохранения удобства чтения.

Можно ли разместить несколько таблиц курсов валют на одной странице?

Да. Вы можете добавить несколько элементов <currency-widget> с разными базовыми валютами, списками валют или темами оформления. Внешний тег <script> достаточно подключить один раз на странице.

В чем разница между <currency-widget> и <currency-converter>?

<currency-widget> (подключаемый из /widgets/exchange-rates/widget.js) отображает многострочную таблицу курсов относительно базовой валюты, тогда как <currency-converter> отображает конвертер двух валют с выпадающими списками.

Требуется ли для работы виджета API-ключ или атрибут data-endpoint?

API-ключ не требуется, а указывать атрибут data-endpoint не нужно — виджет автоматически определяет адрес загрузки данных из URL подключенного скрипта widget.js.

Виджеты