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

Виджет калькулятора золота и серебра для вашего сайта

Настройте интерактивный калькулятор драгоценных металлов для вашего сайта или блога. Посетители смогут рассчитывать стоимость золота (24K–8K) и серебра в граммах, тройских унциях и толах более чем в 150 валютах.

1. Язык и валюта по умолчанию

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

3. Заголовок виджета

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

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

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

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

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

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

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

<!-- Элемент калькулятора золота -->
<gold-calculator-widget 
  lang="ru" 
  currency="USD" 
  show-header="on" 
  header-text="Калькулятор золота" 
  theme="default" 
  border-radius="5">
</gold-calculator-widget>

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

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

Настройте внешний вид и параметры по умолчанию, изменив атрибуты элемента <gold-calculator-widget>:

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

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

При установке 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. Возможности для пользователей

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

  • Поддержка золота и серебра: Мгновенное переключение между золотом и серебром с автоматическим обновлением доступных проб.
  • Полный выбор каратов и проб:
    • Караты золота: 24K (999 проба), 23K (965), 22K (916), 21K (875), 18K (750), 14K (585), 12K (500), 10K (417), 9K (375) и 8K (333).
    • Пробы серебра: 999 (чистое серебро), 958 (Британия), 925 (стерлинговое серебро), 900 (монетное серебро) и 800 (ювелирное серебро).
  • Гибкий выбор веса и единиц измерения: Ввод любого веса и переключение между стандартными единицами измерения драгоценных металлов: унция (тройская унция), грамм и тола.
  • Выбор валюты с поиском и флагами: 150 мировых валют, разделенных на Избранные (USD, EUR, GBP, CAD, AUD, JPY, CHF, INR, AED, SAR) и Все валюты, со значками флагов, мгновенным поиском и навигацией с клавиатуры.
  • Изоляция стилей Shadow DOM: Виджет рендерится внутри изолированного Shadow DOM, поэтому CSS-стили вашего сайта не конфликтуют с версткой калькулятора.
  • Отметка времени котировок: Отображает дату и время последней синхронизации рыночных курсов в нижней части виджета вместе с быстрыми ссылками на источник данных и страницу настройки виджета (+).

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

WordPress / Gutenberg и Elementor

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

Webflow, Wix и Shopify

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

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

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

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

Замедлит ли этот виджет загрузку моего сайта?

Нет. Скрипт веб-компонента легковесен, загружает данные о курсах асинхронно и отображается в изолированном Shadow DOM, не блокируя рендеринг страницы.

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

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

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

Да. Виджет использует адаптивную верстку, которая автоматически подстраивается под ширину контейнера на смартфонах, планшетах и компьютерах, а также автоматически переключается в режим справа налево (RTL) при выборе lang="ar".

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

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

Виджеты