Web Component Gratuito y Ligero

Añada el Precio del Oro de Hoy a su Sitio Web

Personalice su tabla de precios del oro en vivo a continuación —moneda predeterminada, tema de color y encabezado— y copie el código en su web o tienda online.

1. Moneda y Modo Interactivo

2. Tema y Apariencia

3. Opciones de Encabezado

Código para Insertar en su Web

Pegue este fragmento dentro del HTML de su página o bloque HTML personalizado:

Widget de Precio del Oro Hoy: Guía de Integración y Uso

Muestre los precios diarios del oro en vivo directamente en su sitio web. El Widget de Precio del Oro Hoy ofrece un desglose instantáneo de las tasas de oro al contado por onza troy y por gramo en los principales quilates (24K, 22K, 21K, 18K y 14K) en 150 monedas mundiales sin necesidad de mantenimiento.

1. Inicio Rápido: Cómo Insertar el Widget

Insertar la tabla de precios del oro en vivo es muy sencillo. Coloque el script y la etiqueta HTML personalizada dentro del <body> de su página web donde desee que se muestre el widget:

<!-- Cargar el motor del widget -->
<script src="https://www.forexinvestors.com/widgets/gold-price-today/widget.js"></script>

<!-- Elemento de Precio del Oro Hoy -->
<gold-price-widget 
  lang="es" 
  currency="USD" 
  change-currency="on" 
  show-header="on" 
  header-text="Precio del Oro Hoy" 
  theme="default" 
  border-radius="5">
</gold-price-widget>

Consejo de rendimiento: El archivo JavaScript solo necesita importarse una vez por página, incluso si inserta múltiples widgets de precios del oro para diferentes divisas en el mismo diseño.

2. Atributos de Personalización

Configure la moneda inicial, el selector de divisas, la barra de encabezado y el estilo visual modificando los atributos del elemento <gold-price-widget>:

Atributo Tipo Por defecto Descripción
lang Texto (String) en Define el idioma de la interfaz para las etiquetas de unidades/quilates, nombres de países y formato de fecha (en, ar, fr, es, ru).
currency Texto (String) USD Código de la moneda inicial mostrada al cargar (ISO 4217, p. ej., USD, EUR, GBP, SAR, AED, EGP, INR).
change-currency Texto (String) on Controla si los visitantes pueden cambiar de moneda mediante el menú desplegable (on u off). Establézcalo en off para fijar el widget en una sola moneda.
show-header Texto (String) on Controla la visibilidad de la barra de título superior del widget (on u off).
header-text Texto (String) Gold Price Today Texto de título personalizado en el encabezado cuando show-header="on" (por defecto muestra el título traducido según el atributo lang).
header-link Texto (String) http://www.goldpricedata.com/ URL de destino opcional (http o https) para el enlace del título del encabezado.
theme Texto (String) default Selecciona la paleta de colores: default, blue, green, yellow, red, ocean, purple, teal, dark, rose o custom.
border-radius Número (Number) 0 Radio de las esquinas en píxeles para el contenedor del widget (entero de 0 a 20 en el configurador, hasta 50 soportado, p. ej., 0, 5, 12).
native-dropdown Texto (String) off Establézcalo en on para usar un menú <select> nativo del navegador en lugar del menú desplegable con búsqueda y banderas cuando change-currency="on".

Atributos de Color del Tema Personalizado

Cuando se establece theme="custom", puede personalizar los colores individuales del widget utilizando valores hexadecimales de 6 dígitos (sin el prefijo #):

Atributo Por defecto Descripción
bg-color F6F6F6 Color de fondo del contenedor del widget y de las filas impares de precios.
border-color BCBCBC Color del borde del contenedor, del divisor del encabezado del país y del selector de moneda.
text-color 222222 Color de texto principal para las etiquetas de quilates, precios del oro y marca de tiempo.
input-bg-color FFFFFF Color de fondo para las filas pares de precios y el menú desplegable de divisas.
bg-color-button 535353 Color de fondo para los botones de acción del pie (FI y +).
button-border-color 2E2E2E Color del borde para los botones de acción del pie.
button-hover-color 8A8A8A Color de resaltado al pasar el cursor sobre las filas de la tabla y los botones del pie.

3. Funciones para el Usuario Final

Los visitantes que consultan el widget de Precio del Oro Hoy en su sitio disfrutan de las siguientes capacidades integradas:

  • Desglose completo del precio del oro: Muestra los precios del oro en vivo en una tabla clara de 6 filas que incluye Onza (onza troy) y precios por gramo para Quilate 24, Quilate 22, Quilate 21, Quilate 18 y Quilate 14.
  • Barra de encabezado de país y moneda: Muestra la bandera de la divisa activa, el nombre del país (con enlace a su página detallada de precios del oro), el código ISO y el símbolo monetario.
  • Modo de moneda interactivo o fijo: Permita que los visitantes cambien entre 150 monedas mediante un menú desplegable con búsqueda y banderas (change-currency="on") con actualizaciones ligeras, o fije la tabla en una sola moneda local (change-currency="off").
  • Encapsulación Shadow DOM y contraste automático: Se renderiza dentro de un Shadow DOM aislado para que el CSS de su sitio web no afecte a la tabla de precios, con cálculo automático de contraste para el texto de los botones.
  • Cotizaciones de mercado con marca de tiempo: Muestra la fecha y hora de la última sincronización de tasas en el pie del widget junto con enlaces rápidos a la fuente de datos (FI) y al configurador (+).

4. Instrucciones de Integración en CMS

WordPress / Gutenberg y Elementor

  1. Añada un bloque de HTML personalizado en su entrada, página o barra lateral.
  2. Pegue el cargador de script y el código del elemento <gold-price-widget> generado arriba.
  3. Actualice o publique su página.

Webflow, Wix y Shopify

  1. Inserte un elemento de Incrustación / Código personalizado (Embed / Custom Code) en el lienzo de diseño.
  2. Pegue el fragmento de código de inserción del widget.
  3. Asegúrese de que el contenedor padre mantenga un ancho mínimo de 240px a 340px para una alineación óptima de la tabla.

5. Preguntas Frecuentes (FAQ)

¿Con qué frecuencia se actualizan los precios del oro en el widget?

Las tasas de oro al contado y las conversiones de divisas se actualizan cada 5 minutos a partir de fuentes del mercado en vivo. La marca de tiempo en la parte inferior del widget indica la hora de la última actualización.

¿Puedo fijar el widget en una sola moneda para que los visitantes no puedan cambiarla?

Sí. Establezca change-currency="off" en el elemento <gold-price-widget> (o seleccione "No" en la opción de cambiar moneda del configurador superior). Esto oculta el menú desplegable y reduce el tamaño de la respuesta de datos.

¿Puedo colocar varios widgets de precio del oro en la misma página?

Sí. Puede añadir múltiples elementos <gold-price-widget> con diferentes monedas, idiomas o temas en la misma página. La etiqueta externa <script> solo debe incluirse una vez.

¿El widget es compatible con dispositivos móviles?

Sí. El widget se adapta automáticamente al ancho de su contenedor padre en teléfonos inteligentes, tabletas y barras laterales de escritorio.

¿El widget requiere una clave API o el atributo data-endpoint?

No se requiere ninguna clave API ni es necesario especificar el atributo data-endpoint; el widget deduce automáticamente su punto de datos a partir de la URL del script widget.js.

Widgets