Documentació del widget
Guia completa per integrar i personalitzar el widget de convertidor de divises Currency.Wiki al teu lloc web.
Taula de continguts
1 Començar
Afegir un widget de convertidor de divises al teu lloc web és fàcil. Segueix aquests passos:
- Ves a la pàgina del Constructor de Widget i personalitza l'aparença
- Selecciona l'estil, monedes i tema preferits
- Copia el codi d'integració generat (Script o Iframe)
- Enganxa el codi a l'HTML del teu lloc web on vulguis que aparegui el widget
Consell: Utilitza els preconfigurats ràpids al Constructor de Widget per començar ràpidament amb un widget preconfigurat.
2 Mètodes d'integració
Integració Script (Recomanat)
El mètode d'integració amb script injecta el widget directament a la teva pàgina. Els desplegables de monedes es mostren davant del contingut per facilitar la selecció.
<div id="currency-wiki-widget"></div>
<script src="https://widget.currency.wiki/v3/script.js?style=compact&theme=light&from=USD&to=EUR"></script>
- Els desplegables es mostren fora del contenidor del widget
- Ideal per a selecció interactiva de monedes
- Integració perfecta amb la teva pàgina
Integració Iframe
El mètode d'integració amb iframe crea un contenidor aïllat per al widget. Aquest mètode és segur i funciona en entorns amb polítiques de contingut estrictes.
<iframe src="https://widget.currency.wiki/v3/embed?style=compact&theme=light&from=USD&to=EUR"
width="300" height="180" frameborder="0"></iframe>
- Totalment aïllat dels estils de la teva pàgina
- Funciona amb polítiques de seguretat estrictes
- Implementació simple i segura
Nota: Utilitza la integració Script per a interactivitat completa (els desplegables es mostren sobre el contingut). Utilitza Iframe quan necessitis aïllament o tinguis restriccions CSP.
3 Estils del widget
Tria entre 11 estils diferents de widget per adaptar-se al disseny del teu lloc web. Cada estil està optimitzat per a diferents usos i mides de visualització.
mini
250x140px
Convertidor compacte d'una sola línia. Perfecte per a capçaleres o espais reduïts.
square
250x250px
Widget quadrat amb botó d'intercanvi. Ideal per a barres laterals.
compact
300x180px
Convertidor de mida petita amb totes les funcions essencials.
inline
480x56px
Disseny horitzontal. Ideal per incrustar dins de contingut o navegació.
tall
200x280px
Disseny vertical de barra lateral amb etiquetes clàssiques.
mini-chart
250x260px
Convertidor compacte amb gràfic d'historial de tarifes.
multi-expandable
300x320px
Convertidor multi-divisa. Els usuaris poden afegir/eliminar monedes.
multi-fixed
300x300px
Llista fixa de tarifes de canvi. Ideal per mostrar tarifes específiques.
rates-compact
250x320px
Llista condensada de tarifes amb hora d'actualització.
rates-viewer
300x500px
Vista completa de gràfic amb informació detallada.
rates-viewer-compact
300x400px
Versió compacta del visualitzador de tarifes amb gràfics.
4 Paràmetres d'URL
Personalitza el teu widget utilitzant paràmetres d'URL. Funcionen tant amb Script com amb Iframe.
| Paràmetre | Per defecte | Descripció |
|---|---|---|
| style | compact | Estil 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 | Codi de moneda d'origen (ex: USD, EUR, GBP) |
| to | EUR | Codi de moneda de destí (ex: EUR, USD, JPY) |
| amount | 1000 | Import per defecte per a la conversió |
| accent | #2563eb | Color d'accent en format hex (sense #) |
| lang | en | Codi d'idioma del widget (ex: en, es, fr, de) |
| flags | 1 | Mostra banderes de país (1=mostrar, 0=amagar) |
| display | iso | Format de visualització de moneda (iso=USD, symbol=$) |
| lock | 0 | Bloqueja monedes (1=blocat, 0=desblocat) |
| currencies | EUR,GBP,JPY | Llista separada per comes de monedes per a widgets multi-divisa |
| dropdown | all | Monedes al desplegable (all, top10, top20 o llista separada per comes) |
| branding | 1 | Mostra marca (1=mostrar, 0=amagar) |
| brandinglink | 1 | Marca clicable (1=enllaç, 0=només text) |
| format | auto | Format numèric (auto, us, eu, french, indian) |
| decimals | 2 | Nombre de decimals (0-6) |
| chart | 0 | Activa gràfic (1=activat, 0=desactivat) |
| chartperiod | 7d | Període del gràfic (7d, 14d, 30d, 90d) |
Exemples
Convertidor compacte amb tema fosc:
?style=compact&theme=dark&from=USD&to=EUR
Tarifes de canvi multi-divisa:
?style=multi-fixed&from=USD¤cies=EUR,GBP,JPY,CAD
Convertidor mini amb gràfic de 30 dies:
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
Mostra símbols de moneda en lloc de codis:
?style=compact&display=symbol&from=USD&to=EUR
Monedes bloquejades amb import personalitzat:
?style=compact&from=GBP&to=USD&lock=1&amount=100
5 Opcions de personalització
Opcions de tema
- light - Fons clar amb text fosc
- dark - Fons fosc amb text clar
- auto - S'adapta automàticament a la preferència del sistema de l'usuari
Format de visualització de moneda
- iso - Mostra codis ISO com USD, EUR, GBP
- symbol - Mostra símbols com $, €, £
Formats numèrics
- auto - Detecta automàticament la configuració del navegador del visitant
- us - Format US: 1,234.56
- eu - Format europeu: 1.234,56
- french - Format francès: 1 234,56
- indian - Format indi: 1,23,456.78
Opcions de monedes al desplegable
- all - Totes les 170+ monedes compatibles
- top10 - Les 10 monedes més populars
- top20 - Les 20 monedes amb més volum de negociació
- USD,EUR,GBP,... - Llista personalitzada de monedes específiques
Consell: Utilitza el Constructor de Widget per configurar visualment totes aquestes opcions i generar el codi d'integració automàticament.
6 Resolució de problemes
El widget no es mostra
Assegura't que el codi d'integració està col·locat correctament al teu HTML. Per a integració amb script, comprova que el div contenidor existeix amb l'ID correcte. Revisa la consola del navegador per errors de JavaScript.
El desplegable no funciona
Si utilitzes integració amb iframe, els desplegables es desplacen dins l'àrea del widget. Per funcionalitat completa amb superposició, utilitza la integració amb script.
Conflictes d'estil
Si el CSS del teu lloc afecta l'aparença del widget, prova la integració amb iframe, que aïlla els estils del widget de la teva pàgina.
Problemes amb la política de seguretat de contingut
Si tens una CSP estricta, potser hauràs d'afegir currency.wiki a les directives permeses de script-src i frame-src. Exemple: script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
Necessites ajuda?
No trobes el que busques? El nostre equip de suport t'ajudarà.
