Documentación del widget
Guía completa para insertar y personalizar el widget de convertidor de divisas Currency.Wiki en tu sitio web.
Tabla de contenidos
1 Primeros pasos
Agregar un widget de convertidor de divisas a tu sitio web es fácil. Sigue estos sencillos pasos:
- Ve a la página del Constructor de Widget y personaliza la apariencia
- Selecciona tu estilo, monedas y tema preferidos
- Copia el código de inserción generado (Script o Iframe)
- Pega el código en el HTML de tu sitio web donde quieras que aparezca el widget
Consejo: Usa los preajustes rápidos en el Constructor de Widget para comenzar rápidamente con un widget preconfigurado.
2 Métodos de inserción
Inserción Script (Recomendado)
El método de inserción por script inyecta el widget directamente en tu página. Los menús desplegables de monedas aparecerán sobre el contenido circundante para facilitar la selección.
<div id="currency-wiki-widget"></div>
<script src="https://widget.currency.wiki/v3/script.js?style=compact&theme=light&from=USD&to=EUR"></script>
- Los menús desplegables aparecen fuera del contenedor del widget
- Ideal para selección interactiva de monedas
- Integración perfecta con tu página
Inserción Iframe
El método de inserción por iframe crea un contenedor aislado para el widget. Este método es seguro y funciona en entornos con políticas de contenido estrictas.
<iframe src="https://widget.currency.wiki/v3/embed?style=compact&theme=light&from=USD&to=EUR"
width="300" height="180" frameborder="0"></iframe>
- Completamente aislado de los estilos de tu página
- Funciona con políticas de seguridad estrictas
- Implementación simple y segura
Nota: Usa inserción Script para interactividad total (los menús aparecen sobre el contenido). Usa inserción Iframe cuando necesites aislamiento o tengas restricciones CSP.
3 Estilos del widget
Elige entre 11 estilos de widget diferentes para combinar con el diseño de tu sitio web. Cada estilo está optimizado para diferentes casos de uso y tamaños de visualización.
mini
250x140px
Convertidor compacto de una sola línea. Perfecto para encabezados o espacios reducidos.
square
250x250px
Widget de proporción 1:1 con botón de intercambio. Ideal para barras laterales.
compact
300x180px
Convertidor de tamaño reducido con todas las funciones esenciales.
inline
480x56px
Diseño horizontal. Ideal para insertar dentro de contenido o navegación.
tall
200x280px
Diseño vertical tipo barra lateral con etiquetas clásicas.
mini-chart
250x260px
Convertidor compacto con gráfico de líneas que muestra el historial de tasas.
multi-expandable
300x320px
Convertidor multi-divisa. Los usuarios pueden agregar/eliminar monedas.
multi-fixed
300x300px
Lista fija de tasas de cambio. Ideal para mostrar tasas específicas.
rates-compact
250x320px
Lista condensada de tasas de cambio con hora de última actualización.
rates-viewer
300x500px
Vista completa de gráfico con información detallada de tasas.
rates-viewer-compact
300x400px
Versión compacta del visor de tasas con gráficos.
4 Parámetros de URL
Personaliza tu widget usando parámetros de URL. Estos parámetros funcionan tanto con los métodos de inserción Script como Iframe.
| Parámetro | Predeterminado | Descripción |
|---|---|---|
| style | compact | Estilo del widget (mini, square, compact, inline, tall, mini-chart, multi-expandable, multi-fixed, rates-compact, rates-viewer, rates-viewer-compact) |
| theme | light | Tema de color (light, dark o auto) |
| from | USD | Código de moneda de origen (ej. USD, EUR, GBP) |
| to | EUR | Código de moneda destino (ej. EUR, USD, JPY) |
| amount | 1000 | Cantidad predeterminada para la conversión |
| accent | #2563eb | Color de acento en formato hex (sin #) |
| lang | en | Código de idioma del widget (ej. en, es, fr, de) |
| flags | 1 | Mostrar banderas de países (1=mostrar, 0=ocultar) |
| display | iso | Formato de visualización de moneda (iso=USD, symbol=$) |
| lock | 0 | Bloquear monedas (1=bloqueado, 0=desbloqueado) |
| currencies | EUR,GBP,JPY | Lista separada por comas de monedas para widgets multi-divisa |
| dropdown | all | Monedas en el menú desplegable (all, top10, top20 o lista separada por comas) |
| branding | 1 | Mostrar marca (1=mostrar, 0=ocultar) |
| brandinglink | 1 | Hacer la marca clicable (1=enlace, 0=solo texto) |
| format | auto | Formato numérico (auto, us, eu, french, indian) |
| decimals | 2 | Cantidad de decimales (0-6) |
| chart | 0 | Habilitar gráfico (1=habilitado, 0=deshabilitado) |
| chartperiod | 7d | Período del gráfico (7d, 14d, 30d, 90d) |
Ejemplos
Convertidor compacto con tema oscuro:
?style=compact&theme=dark&from=USD&to=EUR
Tasas de cambio multi-divisa:
?style=multi-fixed&from=USD¤cies=EUR,GBP,JPY,CAD
Convertidor mini con gráfico de 30 días:
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
Mostrar símbolos de moneda en vez de códigos:
?style=compact&display=symbol&from=USD&to=EUR
Monedas bloqueadas con cantidad personalizada:
?style=compact&from=GBP&to=USD&lock=1&amount=100
5 Opciones de personalización
Opciones de tema
- light - Fondo claro con texto oscuro
- dark - Fondo oscuro con texto claro
- auto - Se adapta automáticamente a la preferencia del sistema del usuario
Formato de visualización de moneda
- iso - Muestra códigos ISO como USD, EUR, GBP
- symbol - Muestra símbolos de moneda como $, €, £
Formatos numéricos
- auto - Detecta automáticamente la configuración del navegador del visitante
- us - Formato EE.UU.: 1,234.56
- eu - Formato europeo: 1.234,56
- french - Formato francés: 1 234,56
- indian - Formato indio: 1,23,456.78
Opciones de monedas en menú desplegable
- all - Todas las más de 170 monedas soportadas
- top10 - Las 10 monedas más populares
- top20 - Las 20 monedas con mayor volumen de negociación
- USD,EUR,GBP,... - Lista personalizada de monedas específicas
Consejo: Usa el Constructor de Widget para configurar visualmente todas estas opciones y generar el código de inserción automáticamente.
6 Solución de problemas
El widget no se muestra
Asegúrate de que el código de inserción esté colocado correctamente en tu HTML. Para inserción por script, verifica que el div contenedor exista con el ID correcto. Revisa la consola del navegador para errores de JavaScript.
El menú desplegable no funciona
Si usas inserción por iframe, los menús desplegables se desplazarán dentro del área del widget. Para funcionalidad completa con superposiciones, usa el método de inserción por script.
Conflictos de estilo
Si el CSS de tu sitio afecta la apariencia del widget, prueba usar la inserción por iframe, que aísla los estilos del widget de los de tu página.
Problemas con la política de seguridad de contenido
Si tienes una CSP estricta, puede que necesites agregar currency.wiki a tus directivas permitidas en script-src y frame-src. Ejemplo: script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
¿Necesitas ayuda?
¿No encuentras lo que buscas? Nuestro equipo de soporte está aquí para ayudarte.
