Dokumentacija widgeta
Potpuni vodič za umetanje i prilagodbu widgeta za konverziju valuta Currency.Wiki na vašu web stranicu.
Sadržaj
1 Početak rada
Dodavanje widgeta za konverziju valuta na vašu web stranicu je jednostavno. Slijedite ove korake:
- Idite na stranicu Izrada widgeta i prilagodite izgled widgeta
- Odaberite željeni stil widgeta, valute i temu
- Kopirajte generirani kod za umetanje (skripta ili iframe)
- Zalijepite kod u HTML vaše web stranice gdje želite da se widget prikaže
Savjet: Koristite brze početne predloške u Izradi widgeta za brzi početak s unaprijed konfiguriranim widgetom.
2 Metode umetanja
Umetanje putem skripte (preporučeno)
Metoda umetanja skripte izravno ubacuje widget na vašu stranicu. Padajući izbornici valuta prikazivat će se ispred okolnog sadržaja radi lakšeg odabira.
<div id="currency-wiki-widget"></div>
<script src="https://widget.currency.wiki/v3/script.js?style=compact&theme=light&from=USD&to=EUR"></script>
- Izbornici se prikazuju izvan okvira widgeta
- Najbolje za interaktivni odabir valuta
- Besprijekorna integracija s vašom stranicom
Umetanje putem iframea
Metoda umetanja iframea stvara izolirani okvir za widget. Ova metoda je sigurna i radi u okruženjima sa strogim pravilima sadržaja.
<iframe src="https://widget.currency.wiki/v3/embed?style=compact&theme=light&from=USD&to=EUR"
width="300" height="180" frameborder="0"></iframe>
- Potpuno izolirano od stilova vaše stranice
- Radi sa strogim pravilima sigurnosti sadržaja
- Jednostavna i sigurna implementacija
Napomena: Koristite umetanje putem skripte za punu interaktivnost (izbornici iznad sadržaja). Koristite iframe kada trebate izolaciju ili imate CSP ograničenja.
3 Stilovi widgeta
Odaberite između 11 različitih stilova widgeta kako biste uskladili dizajn svoje web stranice. Svaki stil je optimiziran za različite potrebe i veličine prikaza.
mini
250x140px
Kompaktni konverter u jednom redu. Savršen za zaglavlja ili uske prostore.
square
250x250px
Widget omjera 1:1 s gumbom za zamjenu. Odlično za bočne trake.
compact
300x180px
Konverter malih dimenzija sa svim osnovnim funkcijama.
inline
480x56px
Vodoravni raspored. Idealan za umetanje unutar sadržaja ili navigacije.
tall
200x280px
Okomiti raspored bočne trake s klasičnim oznakama.
mini-chart
250x260px
Kompaktni konverter s grafom povijesti tečaja.
multi-expandable
300x320px
Konverter za više valuta. Korisnici mogu dodavati/uklanjati valute.
multi-fixed
300x300px
Fiksni popis tečajeva. Najbolje za prikaz određenih tečajeva.
rates-compact
250x320px
Sažeti popis tečajeva s vremenom zadnjeg ažuriranja.
rates-viewer
300x500px
Puni prikaz grafikona s detaljnim informacijama o tečaju.
rates-viewer-compact
300x400px
Kompaktna verzija preglednika tečajeva s grafikonima.
4 URL parametri
Prilagodite svoj widget pomoću URL parametara. Ovi parametri rade s obje metode umetanja: skripta i iframe.
| Parametar | Zadano | Opis |
|---|---|---|
| style | compact | Stil widgeta (mini, square, compact, inline, tall, mini-chart, multi-expandable, multi-fixed, rates-compact, rates-viewer, rates-viewer-compact) |
| theme | light | Tematska boja (light, dark ili auto) |
| from | USD | Kod izvorne valute (npr. USD, EUR, GBP) |
| to | EUR | Kod ciljne valute (npr. EUR, USD, JPY) |
| amount | 1000 | Zadani iznos za konverziju |
| accent | #2563eb | Boja naglaska u hex formatu (bez #) |
| lang | en | Kod jezika widgeta (npr. en, es, fr, de) |
| flags | 1 | Prikaži zastave država (1=prikaži, 0=sakrij) |
| display | iso | Format prikaza valute (iso=USD, symbol=$) |
| lock | 0 | Zaključaj valute (1=zaključano, 0=otključano) |
| currencies | EUR,GBP,JPY | Popis valuta odvojenih zarezom za widgete s više valuta |
| dropdown | all | Valute u padajućem izborniku (all, top10, top20 ili popis odvojen zarezom) |
| branding | 1 | Prikaži brendiranje (1=prikaži, 0=sakrij) |
| brandinglink | 1 | Brendiranje kao poveznica (1=poveznica, 0=samo tekst) |
| format | auto | Format broja (auto, us, eu, french, indian) |
| decimals | 2 | Broj decimalnih mjesta (0-6) |
| chart | 0 | Omogući grafikon (1=omogućeno, 0=onemogućeno) |
| chartperiod | 7d | Razdoblje grafikona (7d, 14d, 30d, 90d) |
Primjeri
Kompaktni konverter s tamnom temom:
?style=compact&theme=dark&from=USD&to=EUR
Tečajevi za više valuta:
?style=multi-fixed&from=USD¤cies=EUR,GBP,JPY,CAD
Mini konverter s 30-dnevnim grafom:
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
Prikaz simbola valute umjesto kodova:
?style=compact&display=symbol&from=USD&to=EUR
Zaključane valute s prilagođenim iznosom:
?style=compact&from=GBP&to=USD&lock=1&amount=100
5 Opcije prilagodbe
Opcije teme
- light - Svijetla pozadina s tamnim tekstom
- dark - Tamna pozadina sa svijetlim tekstom
- auto - Automatski prati postavke sustava korisnika
Format prikaza valute
- iso - Prikazuje ISO kodove poput USD, EUR, GBP
- symbol - Prikazuje simbole valuta poput $, €, £
Formati brojeva
- auto - Automatski prepoznaje postavke preglednika posjetitelja
- us - US format: 1.234,56
- eu - Europski format: 1.234,56
- french - Francuski format: 1 234,56
- indian - Indijski format: 1,23,456.78
Opcije valuta u padajućem izborniku
- all - Sve podržane valute (170+)
- top10 - Top 10 najpopularnijih valuta
- top20 - Top 20 valuta po obujmu trgovanja
- USD,EUR,GBP,... - Prilagođeni popis određenih valuta
Savjet: Koristite Izradu widgeta za vizualnu konfiguraciju svih ovih opcija i automatsko generiranje koda za umetanje.
6 Rješavanje problema
Widget se ne prikazuje
Provjerite je li kod za umetanje ispravno postavljen u vaš HTML. Za umetanje skripte, provjerite postoji li div spremnik s ispravnim ID-om. Provjerite konzolu preglednika za JavaScript pogreške.
Padajući izbornik ne radi
Ako koristite umetanje putem iframea, izbornici će se pomicati unutar područja widgeta. Za punu funkcionalnost izbornika s preklapanjem koristite metodu umetanja skripte.
Sukobi stilova
Ako CSS vaše stranice utječe na izgled widgeta, pokušajte koristiti umetanje putem iframea koje izolira stilove widgeta od vaše stranice.
Problemi s politikom sigurnosti sadržaja
Ako imate strogu CSP, možda ćete trebati dodati currency.wiki u dopuštene direktive script-src i frame-src. Primjer: script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
Trebate pomoć?
Ne možete pronaći što tražite? Naš tim za podršku je ovdje za vas.
