Widget Gratuito para Webmasters

Widget de Tabla de Tipos de Cambio para su Sitio Web

Configure una tabla multidivisa en tiempo real para su sitio web o blog. Elija la moneda base, seleccione las divisas a mostrar, active la calculadora integrada y copie el código HTML.

1. Idioma, Moneda Base e Importe

2. Divisas Cruzadas y Formato de Tabla

3. Apariencia y Tema

Código HTML para su Sitio Web

Copie y pegue este fragmento de código donde desee mostrar la tabla.

Widget de Tabla de Tipos de Cambio: Guía de Integración y Uso

Muestre una tabla de tipos de cambio en vivo y personalizable en su sitio web. El Widget de Tipos de Cambio realiza el seguimiento de más de 150 divisas mundiales, metales preciosos y Bitcoin frente a cualquier moneda base, con banderas de países, indicadores de tendencia al alza o a la baja y una calculadora multidivisa integrada opcional.

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

Insertar la tabla de tipos de cambio 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/exchange-rates/widget.js"></script>

<!-- Elemento de Tabla de Tipos de Cambio -->
<currency-widget 
  lang="es" 
  base="USD" 
  cross="AUD,CAD,CHF,EUR,GBP,INR,JPY" 
  display="code" 
  calc="off" 
  amount="1" 
  theme="default" 
  border-radius="5">
</currency-widget>

Consejo de rendimiento: El archivo JavaScript solo necesita importarse una vez por página, incluso si inserta múltiples tablas con diferentes monedas base en el mismo diseño.

2. Atributos de Personalización

Configure la moneda base, la lista de divisas cruzadas, el modo de calculadora y el estilo visual modificando los atributos del elemento <currency-widget>:

Atributo Tipo Por defecto Descripción
lang Texto (String) en Define el idioma de la interfaz para los nombres traducidos de las divisas y el formato de fecha (en, ar, fr, es, ru).
base Texto (String) USD Código de la moneda base de referencia mostrada en el encabezado de la tabla (ISO 4217, además de BTC, XAU, XAG, XPT; p. ej., USD, EUR, GBP, SAR).
cross Texto (String) USD,EUR,GBP,AUD,CHF,CAD,INR Lista separada por comas de códigos de divisas de destino para mostrar en las filas de la tabla (p. ej., EUR,GBP,JPY,CAD,AUD,CHF). Cualquier código igual a base se omite automáticamente.
display Texto (String) code Controla cómo se etiquetan las monedas en cada fila: code para símbolos ISO (p. ej., EUR) o name para los nombres completos traducidos.
calc Texto (String) off Activa o desactiva la calculadora interactiva integrada (on u off). Cuando está en on, las celdas de tasas se convierten en campos editables.
amount Número (Number) 1 Cantidad inicial de la moneda base utilizada para multiplicar todas las tasas listadas (cualquier número positivo, p. ej., 1, 10, 100).
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) 5 Radio de las esquinas en píxeles para el contenedor del widget (entero de 0 a 20 en el configurador, p. ej., 0, 5, 12).

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 la tabla.
border-color BCBCBC Color del borde del contenedor y de los campos editables de la calculadora.
text-color 222222 Color de texto principal para las etiquetas de divisas, tasas y marca de tiempo.
input-bg-color FFFFFF Color de fondo para las filas pares de la tabla y los campos editables de la calculadora.
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 fondo para el encabezado de la tabla (<th>), el resaltado al pasar el cursor por las filas y los botones del pie.

3. Funciones para el Usuario Final

Los visitantes que consultan el widget de tipos de cambio en su sitio disfrutan de las siguientes capacidades integradas:

  • Tabla multidivisa personalizable: Consulte los tipos de cambio en vivo para cualquier combinación de más de 150 monedas mundiales, metales preciosos (XAU, XAG, XPT) y Bitcoin (BTC) respecto a la moneda base elegida.
  • Indicadores visuales de subida y bajada: Las tasas resaltan automáticamente la dirección diaria frente al cierre anterior, mostrándose en verde cuando suben y en rojo cuando bajan.
  • Calculadora interactiva multifila (calc="on"): Cuando está activada, los visitantes pueden escribir un importe tanto en el encabezado de la moneda base como en cualquier fila para recalcular todas las demás divisas de la tabla simultáneamente.
  • Visualización por código o nombre completo con banderas: Elija códigos ISO compactos (EUR, GBP) para barras laterales estrechas o nombres completos traducidos, acompañados de banderas de países y descripciones emergentes.
  • Encapsulación Shadow DOM y contraste automático: Se renderiza dentro de un Shadow DOM aislado para que los estilos de tablas de su sitio web no entren en conflicto con el widget, con ajuste automático de contraste para encabezados y botones.
  • Datos 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 <currency-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 (use display="code" en columnas estrechas).

5. Preguntas Frecuentes (FAQ)

¿Con qué frecuencia se actualizan los tipos de cambio en la tabla?

Los tipos de cambio se actualizan cada 5 minutos a partir de fuentes del mercado de divisas en vivo. La marca de tiempo en la parte inferior del widget indica la hora exacta de la última actualización.

¿Qué significan los colores verde y rojo en las tasas?

El verde indica que el tipo de cambio ha subido en comparación con la tasa diaria anterior, mientras que el rojo indica que ha bajado. Cuando calc="on" está activo, los campos de entrada utilizan fondos suaves en verde y rojo para mantener la legibilidad.

¿Puedo colocar varias tablas de tipos de cambio en la misma página?

Sí. Puede añadir múltiples elementos <currency-widget> con diferentes monedas base, listas de divisas o temas. La etiqueta externa <script> solo debe incluirse una vez por página.

¿Cuál es la diferencia entre <currency-widget> y <currency-converter>?

<currency-widget> (cargado desde /widgets/exchange-rates/widget.js) muestra una tabla multifila de tipos de cambio respecto a una moneda base, mientras que <currency-converter> muestra un conversor entre dos divisas con menús desplegables.

¿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