Widgetin dokumentaatio
Täydellinen opas Currency.Wiki-valuuttamuunnin-widgetin upottamiseen ja muokkaamiseen verkkosivustollasi.
Sisällysluettelo
1 Aloitus
Valuuttamuunnin-widgetin lisääminen verkkosivustollesi on helppoa. Noudata näitä yksinkertaisia ohjeita:
- Siirry Widgetin rakentaja -sivulle ja muokkaa widgetin ulkoasua
- Valitse haluamasi widgetin tyyli, valuutat ja teema
- Kopioi luotu upotuskoodi (Skripti tai Iframe)
- Liitä koodi verkkosivustosi HTML:ään siihen kohtaan, johon haluat widgetin näkyvän
Vinkki: Käytä Widgetin rakentajan pikakäynnistyksen esiasetuksia aloittaaksesi nopeasti esikonfiguroidulla widgetillä.
2 Upotusmenetelmät
Skripti-upotus (suositeltu)
Skripti-upotus lisää widgetin suoraan sivullesi. Valuuttapudotusvalikot näkyvät sisällön päällä helppoa valintaa varten.
<div id="currency-wiki-widget"></div>
<script src="https://widget.currency.wiki/v3/script.js?style=compact&theme=light&from=USD&to=EUR"></script>
- Pudotusvalikot näkyvät widgetin ulkopuolella
- Paras vuorovaikutteiseen valuuttavalintaan
- Saumaton integrointi sivullesi
Iframe-upotus
Iframe-upotus luo eristetyn säiliön widgetille. Tämä menetelmä on turvallinen ja toimii tiukoissa sisältöturvapolitiikoissa.
<iframe src="https://widget.currency.wiki/v3/embed?style=compact&theme=light&from=USD&to=EUR"
width="300" height="180" frameborder="0"></iframe>
- Täysin eristetty sivusi tyyleistä
- Toimii tiukkojen CSP-asetusten kanssa
- Yksinkertainen ja turvallinen toteutus
Huom: Käytä skripti-upotusta täyteen vuorovaikutteisuuteen (pudotusvalikot näkyvät sisällön päällä). Käytä iframe-upotusta, kun tarvitset eristystä tai sinulla on CSP-rajoituksia.
3 Widgetin tyylit
Valitse 11 eri widget-tyylistä, jotka sopivat verkkosivustosi ulkoasuun. Jokainen tyyli on optimoitu eri käyttötarkoituksiin ja näyttökokoihin.
mini
250x140px
Kompakti yksirivinen muunnin. Täydellinen otsikoihin tai ahtaisiin tiloihin.
square
250x250px
1:1-suhteen widget vaihto-painikkeella. Erinomainen sivupalkkeihin.
compact
300x180px
Pieni muunnin kaikilla tärkeillä ominaisuuksilla.
inline
480x56px
Vaakasuora asettelu. Ihanteellinen sisällön tai navigaation sisään.
tall
200x280px
Pystysuora sivupalkkiasettelu klassisilla nimikkeillä.
mini-chart
250x260px
Kompakti muunnin, jossa on sparkline-kaavio kurssihistoriasta.
multi-expandable
300x320px
Monivaluuttamuunnin. Käyttäjät voivat lisätä/poistaa valuuttoja.
multi-fixed
300x300px
Kiinteä lista valuuttakursseja. Paras tiettyjen kurssien näyttämiseen.
rates-compact
250x320px
Tiivis kurssilista viimeisimmällä päivitysajalla.
rates-viewer
300x500px
Täysi kaavionäkymä yksityiskohtaisilla kurssitiedoilla.
rates-viewer-compact
300x400px
Tiivistetty versio kurssinäkymästä kaavioilla.
4 URL-parametrit
Mukauta widgettiäsi URL-parametreilla. Nämä toimivat sekä skripti- että iframe-upotuksessa.
| Parametri | Oletus | Kuvaus |
|---|---|---|
| style | compact | Widgetin tyyli (mini, square, compact, inline, tall, mini-chart, multi-expandable, multi-fixed, rates-compact, rates-viewer, rates-viewer-compact) |
| theme | light | Värimaailma (light, dark tai auto) |
| from | USD | Lähdevaluutan koodi (esim. USD, EUR, GBP) |
| to | EUR | Kohdevaluutan koodi (esim. EUR, USD, JPY) |
| amount | 1000 | Oletusmäärä muunnokselle |
| accent | #2563eb | Korostusväri heksana (ilman #) |
| lang | en | Widgetin kielikoodi (esim. en, es, fr, de) |
| flags | 1 | Näytä maiden liput (1=näytä, 0=piilota) |
| display | iso | Valuutan näyttömuoto (iso=USD, symbol=$) |
| lock | 0 | Lukitse valuutat (1=lukittu, 0=ei lukittu) |
| currencies | EUR,GBP,JPY | Pilkuilla eroteltu lista valuutoista monivaluuttawidgeteille |
| dropdown | all | Pudotusvalikon valuutat (all, top10, top20 tai pilkuilla eroteltu lista) |
| branding | 1 | Näytä brändäys (1=näytä, 0=piilota) |
| brandinglink | 1 | Tee brändäyksestä klikattava (1=linkki, 0=vain teksti) |
| format | auto | Lukumuoto (auto, us, eu, french, indian) |
| decimals | 2 | Desimaalien määrä (0-6) |
| chart | 0 | Ota kaavio käyttöön (1=käytössä, 0=pois käytöstä) |
| chartperiod | 7d | Kaavion aikaväli (7d, 14d, 30d, 90d) |
Esimerkkejä
Tumma teema, kompakti muunnin:
?style=compact&theme=dark&from=USD&to=EUR
Monivaluuttakurssit:
?style=multi-fixed&from=USD¤cies=EUR,GBP,JPY,CAD
Mini-muunnin 30 päivän kaaviolla:
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
Näytä valuuttasymbolit koodien sijaan:
?style=compact&display=symbol&from=USD&to=EUR
Lukitut valuutat ja mukautettu määrä:
?style=compact&from=GBP&to=USD&lock=1&amount=100
5 Muokkausvaihtoehdot
Teema-asetukset
- light - Vaalea tausta, tumma teksti
- dark - Tumma tausta, vaalea teksti
- auto - Mukautuu automaattisesti käyttäjän järjestelmäasetuksiin
Valuutan näyttömuoto
- iso - Näyttää ISO-koodit kuten USD, EUR, GBP
- symbol - Näyttää valuuttasymbolit kuten $, €, £
Lukumuodot
- auto - Tunnistaa automaattisesti vierailijan selaimen asetukset
- us - US-muoto: 1,234.56
- eu - Eurooppalainen muoto: 1.234,56
- french - Ranskalainen muoto: 1 234,56
- indian - Intialainen muoto: 1,23,456.78
Pudotusvalikon valuutta-asetukset
- all - Kaikki 170+ tuettua valuuttaa
- top10 - 10 suosituinta valuuttaa
- top20 - 20 vaihdetuinta valuuttaa
- USD,EUR,GBP,... - Mukautettu lista tietyistä valuutoista
Vinkki: Käytä Widgetin rakentajaa konfiguroidaksesi kaikki nämä asetukset visuaalisesti ja luodaksesi upotuskoodin automaattisesti.
6 Vianmääritys
Widget ei näy
Varmista, että upotuskoodi on sijoitettu oikein HTML:ään. Skripti-upotuksessa varmista, että container-div on olemassa oikealla ID:llä. Tarkista selaimen konsolista mahdolliset JavaScript-virheet.
Pudotusvalikko ei toimi
Jos käytät iframe-upotusta, pudotusvalikot vierivät widget-alueen sisällä. Täyden pudotusvalikkotoiminnallisuuden saat käyttämällä skripti-upotusta.
Tyyli-ristiriidat
Jos verkkosivustosi CSS vaikuttaa widgetin ulkoasuun, kokeile iframe-upotusta, joka eristää widgetin tyylit sivustostasi.
Content Security Policy -ongelmat
Jos sinulla on tiukka CSP, lisää currency.wiki sallittuihin script-src ja frame-src -direktiiveihin. Esimerkki: script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
Tarvitsetko apua?
Etkö löydä etsimääsi? Tukitiimimme auttaa mielellään.
