Бесплатный Web Component для Сайта

Добавьте Сегодняшние Цены на Золото на Свой Сайт

Настройте таблицу цен на золото ниже — выберите валюту по умолчанию, цветовую тему и заголовок — затем скопируйте готовый код для вставки на сайт.

1. Валюта и Переключатель

2. Тема и Оформление

3. Настройки Заголовка

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

Вставьте этот код в любое место HTML-страницы или в блок произвольного HTML вашей CMS:

Виджет «Цены на золото сегодня»: руководство по установке и использованию

Отображайте актуальные ежедневные цены на золото прямо на вашем сайте. Виджет «Цены на золото сегодня» предоставляет мгновенную сводку спотовых цен на золото за тройскую унцию и за грамм для основных проб (24K, 22K, 21K, 18K и 14K) в 150 мировых валютах без необходимости обслуживания.

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

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

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

<!-- Элемент цен на золото сегодня -->
<gold-price-widget 
  lang="ru" 
  currency="USD" 
  change-currency="on" 
  show-header="on" 
  header-text="Цены на золото сегодня" 
  theme="default" 
  border-radius="5">
</gold-price-widget>

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

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

Настройте валюту по умолчанию, переключатель валют, заголовок и цветовое оформление, изменив атрибуты элемента <gold-price-widget>:

Атрибут Тип По умолчанию Описание
lang Строка (String) en Задает язык интерфейса для названий единиц веса/проб, стран и формата даты (en, ar, fr, es, ru).
currency Строка (String) USD Код валюты по умолчанию при загрузке (ISO 4217, например: USD, EUR, GBP, SAR, AED, EGP, INR).
change-currency Строка (String) on Разрешает или запрещает посетителям менять валюту через выпадающий список (on или off). Установите off, чтобы закрепить одну валюту.
show-header Строка (String) on Управляет отображением верхней панели заголовка виджета (on — показать, off — скрыть).
header-text Строка (String) Gold Price Today Пользовательский текст заголовка при show-header="on" (по умолчанию используется локализованное название для выбранного lang).
header-link Строка (String) http://www.goldpricedata.com/ Необязательный целевой URL-адрес (http или https) для ссылки в заголовке виджета.
theme Строка (String) default Выбирает цветовую схему: default, blue, green, yellow, red, ocean, purple, teal, dark, rose или custom.
border-radius Число (Number) 0 Радиус скругления углов в пикселях для контейнера виджета (целое число от 0 до 20 в конфигураторе, поддерживается до 50, например: 0, 5, 12).
native-dropdown Строка (String) off Установите значение on, чтобы использовать стандартный список <select> браузера вместо меню с поиском и флагами при change-currency="on".

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

При установке 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 Цвет подсветки при наведении на строки таблицы и кнопки нижней панели.

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

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

  • Полная таблица цен на золото: Отображает актуальные цены на золото в удобной таблице из 6 строк, включая унцию (тройскую унцию) и цены за грамм для 24 карата, 22 карата, 21 карата, 18 карат и 14 карат.
  • Информационная панель страны и валюты: Показывает флаг выбранной валюты, название страны (со ссылкой на подробную страницу цен на золото в этой стране), код ISO и символ валюты.
  • Интерактивный или фиксированный режим валюты: Позвольте посетителям выбирать из 150 мировых валют через список с поиском и флагами (change-currency="on") с быстрой подгрузкой цен или закрепите одну локальную валюту (change-currency="off").
  • Изоляция Shadow DOM и автоконтраст: Виджет рендерится внутри изолированного Shadow DOM, поэтому стили вашего сайта не конфликтуют с таблицей цен, а цвет текста на кнопках подбирается автоматически.
  • Отметка времени котировок: Отображает дату и время последней синхронизации рыночных курсов в нижней части виджета вместе с быстрыми ссылками на источник данных (FI) и страницу настройки виджета (+).

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

WordPress / Gutenberg и Elementor

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

Webflow, Wix и Shopify

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

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

Как часто обновляются цены на золото в виджете?

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

Можно ли закрепить в виджете одну валюту, чтобы посетители не могли ее изменить?

Да. Установите атрибут change-currency="off" у элемента <gold-price-widget> (или выберите «Нет» в настройке возможности смены валюты выше). Это скроет выпадающий список и уменьшит объем загружаемых данных.

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

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

Адаптирован ли виджет для мобильных устройств?

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

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

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

Виджеты