Documentazione Widget
Guida completa per incorporare e personalizzare il widget convertitore di valute Currency.Wiki sul tuo sito.
Indice
1 Per Iniziare
Aggiungere un widget convertitore di valute al tuo sito è semplice. Segui questi passaggi:
- Vai alla pagina del Costruttore Widget e personalizza l'aspetto
- Seleziona stile, valute e tema preferiti
- Copia il codice embed generato (Script o Iframe)
- Incolla il codice nell'HTML del tuo sito dove vuoi che appaia il widget
Suggerimento: Usa i Preset Avvio Rapido nel Costruttore Widget per iniziare subito con un widget preconfigurato.
2 Metodi di Embed
Embed Script (Consigliato)
Il metodo embed script inserisce il widget direttamente nella tua pagina. I menu a discesa delle valute si sovrappongono ai contenuti circostanti per una selezione facile.
<div id="currency-wiki-widget"></div>
<script src="https://widget.currency.wiki/v3/script.js?style=compact&theme=light&from=USD&to=EUR"></script>
- I menu a discesa appaiono fuori dal contenitore widget
- Ideale per selezione valuta interattiva
- Integrazione perfetta con la tua pagina
Embed Iframe
Il metodo embed iframe crea un contenitore isolato per il widget. È sicuro e funziona in ambienti con policy di contenuto restrittive.
<iframe src="https://widget.currency.wiki/v3/embed?style=compact&theme=light&from=USD&to=EUR"
width="300" height="180" frameborder="0"></iframe>
- Completamente isolato dagli stili della tua pagina
- Funziona con Content Security Policy restrittive
- Implementazione semplice e sicura
Nota: Usa embed Script per piena interattività (menu a discesa sopra i contenuti). Usa embed Iframe se serve isolamento o hai restrizioni CSP.
3 Stili Widget
Scegli tra 11 stili diversi per adattare il widget al design del tuo sito. Ogni stile è ottimizzato per casi d'uso e dimensioni diverse.
mini
250x140px
Convertitore compatto a riga singola. Perfetto per header o spazi ridotti.
square
250x250px
Widget rapporto 1:1 con pulsante inversione. Ottimo per barre laterali.
compact
300x180px
Convertitore compatto con tutte le funzioni essenziali.
inline
480x56px
Layout orizzontale. Ideale per l'inserimento in contenuti o menu.
tall
200x280px
Layout verticale a barra laterale con etichette classiche.
mini-chart
250x260px
Convertitore compatto con grafico sparkline dello storico tassi.
multi-expandable
300x320px
Convertitore multi-valuta. Gli utenti possono aggiungere/rimuovere valute.
multi-fixed
300x300px
Lista fissa di tassi di cambio. Ideale per mostrare tassi specifici.
rates-compact
250x320px
Lista tassi compatta con ora ultimo aggiornamento.
rates-viewer
300x500px
Vista grafico completa con dettagli tassi.
rates-viewer-compact
300x400px
Versione compatta della vista tassi con grafici.
4 Parametri URL
Personalizza il widget usando i parametri URL. Funzionano sia con embed Script che Iframe.
| Parametro | Predefinito | Descrizione |
|---|---|---|
| style | compact | Stile widget (mini, square, compact, inline, tall, mini-chart, multi-expandable, multi-fixed, rates-compact, rates-viewer, rates-viewer-compact) |
| theme | light | Tema colore (light, dark o auto) |
| from | USD | Codice valuta di origine (es. USD, EUR, GBP) |
| to | EUR | Codice valuta di destinazione (es. EUR, USD, JPY) |
| amount | 1000 | Importo predefinito per la conversione |
| accent | #2563eb | Colore accento in formato hex (senza #) |
| lang | en | Codice lingua widget (es. en, es, fr, de) |
| flags | 1 | Mostra bandiere nazionali (1=mostra, 0=nascondi) |
| display | iso | Formato visualizzazione valuta (iso=USD, symbol=$) |
| lock | 0 | Blocca valute (1=bloccato, 0=sbloccato) |
| currencies | EUR,GBP,JPY | Lista valute separata da virgole per widget multi-valuta |
| dropdown | all | Valute nel menu a discesa (all, top10, top20 o lista separata da virgole) |
| branding | 1 | Mostra branding (1=mostra, 0=nascondi) |
| brandinglink | 1 | Rendi il branding cliccabile (1=link, 0=solo testo) |
| format | auto | Formato numeri (auto, us, eu, french, indian) |
| decimals | 2 | Numero di decimali (0-6) |
| chart | 0 | Abilita grafico (1=abilitato, 0=disabilitato) |
| chartperiod | 7d | Periodo grafico (7d, 14d, 30d, 90d) |
Esempi
Convertitore compatto tema scuro:
?style=compact&theme=dark&from=USD&to=EUR
Tassi di cambio multi-valuta:
?style=multi-fixed&from=USD¤cies=EUR,GBP,JPY,CAD
Mini convertitore con grafico 30 giorni:
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
Mostra simboli valuta invece dei codici:
?style=compact&display=symbol&from=USD&to=EUR
Valute bloccate con importo personalizzato:
?style=compact&from=GBP&to=USD&lock=1&amount=100
5 Opzioni di Personalizzazione
Opzioni Tema
- light - Sfondo chiaro con testo scuro
- dark - Sfondo scuro con testo chiaro
- auto - Si adatta automaticamente alle preferenze di sistema dell'utente
Formato Visualizzazione Valuta
- iso - Mostra codici ISO come USD, EUR, GBP
- symbol - Mostra simboli valuta come $, €, £
Formati Numerici
- auto - Rileva automaticamente le impostazioni del browser del visitatore
- us - Formato US: 1,234.56
- eu - Formato Europeo: 1.234,56
- french - Formato Francese: 1 234,56
- indian - Formato Indiano: 1,23,456.78
Opzioni Valute Menu a Discesa
- all - Tutte le 170+ valute supportate
- top10 - Le 10 valute più popolari
- top20 - Le 20 valute per volume di scambio
- USD,EUR,GBP,... - Lista personalizzata di valute specifiche
Suggerimento: Usa il Costruttore Widget per configurare visivamente tutte queste opzioni e generare automaticamente il codice embed.
6 Risoluzione Problemi
Il Widget non si Visualizza
Assicurati che il codice embed sia inserito correttamente nell'HTML. Per embed script, verifica che il div contenitore abbia l'ID corretto. Controlla la console del browser per eventuali errori JavaScript.
Menu a Discesa non Funziona
Se utilizzi l'incorporamento tramite iframe, i menu a discesa scorreranno all'interno dell'area del widget. Per la piena funzionalità dei menu a discesa con sovrapposizioni, utilizza invece il metodo di incorporamento tramite script.
Conflitti di stile
Se il CSS del tuo sito web sta influenzando l'aspetto del widget, prova a utilizzare il metodo di incorporamento tramite iframe che isola gli stili del widget dalla tua pagina.
Problemi con la Content Security Policy
Se hai una CSP restrittiva, potresti dover aggiungere currency.wiki alle direttive consentite di script-src e frame-src. Esempio: script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
Hai bisogno di aiuto?
Non riesci a trovare ciò che cerchi? Il nostro team di supporto è qui per aiutarti.
