Documentație Widget
Ghid complet pentru inserarea și personalizarea widgetului convertor valutar Currency.Wiki pe site-ul tău.
Cuprins
1 Începe rapid
Adăugarea unui widget convertor valutar pe site-ul tău este ușoară. Urmează acești pași simpli:
- Accesează pagina Constructor Widget și personalizează aspectul widgetului
- Selectează stilul, monedele și tema preferată
- Copiază codul de inserare generat (Script sau Iframe)
- Inserează codul în HTML-ul site-ului tău acolo unde vrei să apară widgetul
Sfat: Folosește presetările rapide din Constructor Widget pentru a începe rapid cu un widget preconfigurat.
2 Metode de inserare
Inserare Script (Recomandat)
Metoda de inserare script injectează widgetul direct în pagină. Meniurile dropdown pentru monede vor apărea peste conținutul înconjurător pentru selecție ușoară.
<div id="currency-wiki-widget"></div>
<script src="https://widget.currency.wiki/v3/script.js?style=compact&theme=light&from=USD&to=EUR"></script>
- Dropdown-urile apar în afara containerului widgetului
- Ideal pentru selecție valutară interactivă
- Integrare perfectă cu pagina ta
Inserare Iframe
Metoda de inserare iframe creează un container izolat pentru widget. Această metodă este sigură și funcționează în medii cu politici stricte de conținut.
<iframe src="https://widget.currency.wiki/v3/embed?style=compact&theme=light&from=USD&to=EUR"
width="300" height="180" frameborder="0"></iframe>
- Complet izolat de stilurile paginii tale
- Funcționează cu politici stricte CSP
- Implementare simplă și sigură
Notă: Folosește inserarea Script pentru interactivitate completă (dropdown-urile apar peste conținut). Folosește inserarea Iframe când ai nevoie de izolare sau ai restricții CSP.
3 Stiluri widget
Alege din 11 stiluri diferite de widget pentru a se potrivi cu designul site-ului tău. Fiecare stil este optimizat pentru diverse cazuri de utilizare și dimensiuni de afișare.
mini
250x140px
Convertor compact pe o singură linie. Perfect pentru anteturi sau spații restrânse.
square
250x250px
Widget pătrat 1:1 cu buton de schimb. Ideal pentru bare laterale.
compact
300x180px
Convertor cu amprentă redusă și toate funcțiile esențiale.
inline
480x56px
Layout orizontal. Ideal pentru inserare în conținut sau navigare.
tall
200x280px
Layout vertical tip bară laterală cu etichete clasice.
mini-chart
250x260px
Convertor compact cu grafic de tip sparkline pentru istoricul cursului.
multi-expandable
300x320px
Convertor multi-monedă. Utilizatorii pot adăuga/elimina monede.
multi-fixed
300x300px
Listă fixă de cursuri de schimb. Ideal pentru afișarea unor cursuri specifice.
rates-compact
250x320px
Listă condensată de cursuri cu ora ultimei actualizări.
rates-viewer
300x500px
Vizualizare completă cu grafic și detalii despre cursuri.
rates-viewer-compact
300x400px
Versiune compactă a vizualizatorului de cursuri cu grafice.
4 Parametri URL
Personalizează widgetul folosind parametri URL. Acești parametri funcționează atât cu metoda Script, cât și cu Iframe.
| Parametru | Implicit | Descriere |
|---|---|---|
| style | compact | Stil widget (mini, square, compact, inline, tall, mini-chart, multi-expandable, multi-fixed, rates-compact, rates-viewer, rates-viewer-compact) |
| theme | light | Temă de culoare (light, dark sau auto) |
| from | USD | Cod monedă sursă (ex: USD, EUR, GBP) |
| to | EUR | Cod monedă țintă (ex: EUR, USD, JPY) |
| amount | 1000 | Sumă implicită pentru conversie |
| accent | #2563eb | Culoare accent în format hex (fără #) |
| lang | en | Cod limbă widget (ex: en, es, fr, de) |
| flags | 1 | Afișează steaguri (1=afișează, 0=ascunde) |
| display | iso | Format afișare monedă (iso=USD, symbol=$) |
| lock | 0 | Blochează monedele (1=blocat, 0=deblocat) |
| currencies | EUR,GBP,JPY | Listă de monede separate prin virgulă pentru widgeturile multi-monedă |
| dropdown | all | Monede în dropdown (all, top10, top20 sau listă separată prin virgulă) |
| branding | 1 | Afișează branding (1=afișează, 0=ascunde) |
| brandinglink | 1 | Branding cu link (1=link, 0=doar text) |
| format | auto | Format număr (auto, us, eu, french, indian) |
| decimals | 2 | Număr de zecimale (0-6) |
| chart | 0 | Activează graficul (1=activat, 0=dezactivat) |
| chartperiod | 7d | Perioadă grafic (7d, 14d, 30d, 90d) |
Exemple
Convertor compact cu temă întunecată:
?style=compact&theme=dark&from=USD&to=EUR
Cursuri de schimb multi-monedă:
?style=multi-fixed&from=USD¤cies=EUR,GBP,JPY,CAD
Convertor mini cu grafic pe 30 de zile:
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
Afișează simboluri valutare în loc de coduri:
?style=compact&display=symbol&from=USD&to=EUR
Monede blocate cu sumă personalizată:
?style=compact&from=GBP&to=USD&lock=1&amount=100
5 Opțiuni de personalizare
Opțiuni temă
- light - Fundal deschis cu text închis
- dark - Fundal închis cu text deschis
- auto - Se potrivește automat cu preferința sistemului utilizatorului
Format afișare monedă
- iso - Afișează coduri ISO precum USD, EUR, GBP
- symbol - Afișează simboluri valutare precum $, €, £
Formate numerice
- auto - Detectează automat setările browserului vizitatorului
- us - Format US: 1,234.56
- eu - Format european: 1.234,56
- french - Format francez: 1 234,56
- indian - Format indian: 1,23,456.78
Opțiuni monede dropdown
- all - Toate cele 170+ monede suportate
- top10 - Top 10 cele mai populare monede
- top20 - Top 20 monede după volum de tranzacționare
- USD,EUR,GBP,... - Listă personalizată de monede specifice
Sfat: Folosește Constructorul Widget pentru a configura vizual toate aceste opțiuni și a genera automat codul de inserare.
6 Depanare
Widgetul nu se afișează
Asigură-te că ai plasat corect codul de inserare în HTML. Pentru inserarea script, asigură-te că există div-ul container cu ID-ul corect. Verifică consola browserului pentru erori JavaScript.
Dropdown-ul nu funcționează
Dacă folosești inserarea iframe, dropdown-urile vor derula în interiorul ariei widgetului. Pentru funcționalitate completă cu suprapuneri, folosește metoda de inserare script.
Conflicte de stil
Dacă CSS-ul site-ului tău afectează aspectul widgetului, încearcă metoda de inserare iframe care izolează stilurile widgetului de pagina ta.
Probleme cu Content Security Policy
Dacă ai o politică CSP strictă, poate fi nevoie să adaugi currency.wiki la directivele permise script-src și frame-src. Exemplu: script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
Ai nevoie de ajutor?
Nu găsești ce cauți? Echipa noastră de suport este aici să te ajute.
