Widget Dokumentasie
Volledige gids om die Currency.Wiki-geldeenheid-omskakelaar-widget op jou webwerf in te bed en aan te pas.
Inhoudsopgawe
1 Aan die Gang Kom
Om 'n geldeenheid-omskakelaar-widget by jou webwerf te voeg is maklik. Volg hierdie eenvoudige stappe:
- Gaan na die Widget Bouer-bladsy en pas jou widget se voorkoms aan
- Kies jou voorkeur-widgetstyl, geldeenhede en tema
- Kopieer die gegenereerde inbedkode (Skrip of Iframe)
- Plak die kode in jou webwerf se HTML waar jy die widget wil laat verskyn
Wenk: Gebruik die Vinnige Begin Voorafinstellings in die Widget Bouer om vinnig te begin met 'n vooraf opgestelde widget.
2 Inbedmetodes
Skrip-inbedding (Aanbeveel)
Die skrip-inbedmetode voeg die widget direk by jou bladsy in. Geldeenheidaftreklyste sal voor omliggende inhoud vertoon vir maklike keuse.
<div id="currency-wiki-widget"></div>
<script src="https://widget.currency.wiki/v3/script.js?style=compact&theme=light&from=USD&to=EUR"></script>
- Aftreklyste vertoon buite die widgethouer
- Beste vir interaktiewe geldeenheidkeuse
- Naadlose integrasie met jou bladsy
Iframe-inbedding
Die iframe-inbedmetode skep 'n geïsoleerde houer vir die widget. Hierdie metode is veilig en werk in omgewings met streng inhoudsbeleide.
<iframe src="https://widget.currency.wiki/v3/embed?style=compact&theme=light&from=USD&to=EUR"
width="300" height="180" frameborder="0"></iframe>
- Heeltemal geïsoleer van jou bladsy se style
- Werk met streng Inhoudsekuriteitsbeleide
- Eenvoudige en veilige implementering
Let wel: Gebruik Skrip-inbedding vir volle interaktiwiteit (aftreklyste vertoon oor inhoud). Gebruik Iframe-inbedding wanneer jy isolasie benodig of CSP-beperkings het.
3 Widgetstyle
Kies uit 11 verskillende widgetstyle om by jou webwerf se ontwerp te pas. Elke styl is geoptimaliseer vir verskillende gebruiksgevalle en vertoongroottes.
mini
250x140px
Kompakte enkelreël-omskakelaar. Perfek vir opskrifte of klein spasies.
square
250x250px
1:1-verhouding widget met ruilknoppie. Ideaal vir kantbalke.
compact
300x180px
Klein voetspoor-omskakelaar met alle noodsaaklike funksies.
inline
480x56px
Horisontale uitleg. Ideaal vir inbedding binne inhoud of navigasie.
tall
200x280px
Vertikale kantbalkuitleg met klassieke etikette.
mini-chart
250x260px
Kompakte omskakelaar met vonkgrafiek wat koersgeskiedenis wys.
multi-expandable
300x320px
Multi-geldeenheid-omskakelaar. Gebruikers kan geldeenhede byvoeg/verwyder.
multi-fixed
300x300px
Vaste lys van wisselkoerse. Beste vir die vertoon van spesifieke koerse.
rates-compact
250x320px
Saamgeperste wisselkoerslys met laaste opdateringstyd.
rates-viewer
300x500px
Volledige grafiekbesigtiging met gedetailleerde koersinligting.
rates-viewer-compact
300x400px
Kompakte weergawe van koersbesigtiger met grafieke.
4 URL-parameters
Pas jou widget aan met URL-parameters. Hierdie parameters werk met beide Skrip- en Iframe-inbedmetodes.
| Parameter | Verstek | Beskrywing |
|---|---|---|
| style | compact | Widgetstyl (mini, square, compact, inline, tall, mini-chart, multi-expandable, multi-fixed, rates-compact, rates-viewer, rates-viewer-compact) |
| theme | light | Kleurtema (lig, donker of outo) |
| from | USD | Bron-geldeenheidskode (bv. USD, EUR, GBP) |
| to | EUR | Teiken-geldeenheidskode (bv. EUR, USD, JPY) |
| amount | 1000 | Verstek bedrag vir omskakeling |
| accent | #2563eb | Aksentkleur in hex-formaat (sonder #) |
| lang | en | Widget-taalkode (bv. en, es, fr, de) |
| flags | 1 | Wys landsvlae (1=wys, 0=versteek) |
| display | iso | Geldeenheid vertoonformaat (iso=USD, symbol=$) |
| lock | 0 | Sluit geldeenhede (1=gesluit, 0=oop) |
| currencies | EUR,GBP,JPY | Kommageskeide lys van geldeenhede vir multi-geldeenheid-widgets |
| dropdown | all | Geldeenhede in aftreklys (all, top10, top20, of kommageskeide lys) |
| branding | 1 | Wys handelsmerk (1=wys, 0=versteek) |
| brandinglink | 1 | Maak handelsmerk klikbaar (1=skakel, 0=slegs teks) |
| format | auto | Getalformaat (auto, us, eu, french, indian) |
| decimals | 2 | Aantal desimale plekke (0-6) |
| chart | 0 | Aktiveer grafiek (1=geaktiveer, 0=gedeaktiveer) |
| chartperiod | 7d | Grafiektydperk (7d, 14d, 30d, 90d) |
Voorbeelde
Donker tema kompakte omskakelaar:
?style=compact&theme=dark&from=USD&to=EUR
Multi-geldeenheid-wisselkoerse:
?style=multi-fixed&from=USD¤cies=EUR,GBP,JPY,CAD
Mini-omskakelaar met 30-dae grafiek:
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
Vertoon geldeenheidsimbole in plaas van kodes:
?style=compact&display=symbol&from=USD&to=EUR
Geslote geldeenhede met pasgemaakte bedrag:
?style=compact&from=GBP&to=USD&lock=1&amount=100
5 Aanpassingsopsies
Temakeuses
- light - Ligte agtergrond met donker teks
- dark - Donker agtergrond met ligte teks
- auto - Pas outomaties by gebruiker se stelselvoorkeur aan
Geldeenheid Vertoonformaat
- iso - Wys ISO-kodes soos USD, EUR, GBP
- symbol - Wys geldeenheidsimbole soos $, €, £
Getalformate
- auto - Bepaal outomaties besoeker se blaaierinstellings
- us - VS-formaat: 1,234.56
- eu - Europese formaat: 1.234,56
- french - Franse formaat: 1 234,56
- indian - Indiese formaat: 1,23,456.78
Aftreklys Geldeenheidopsies
- all - Alle 170+ ondersteunde geldeenhede
- top10 - Top 10 mees gewilde geldeenhede
- top20 - Top 20 geldeenhede volgens handelsvolume
- USD,EUR,GBP,... - Pasmaatlys van spesifieke geldeenhede
Wenk: Gebruik die Widget Bouer om al hierdie opsies visueel te konfigureer en die inbedkode outomaties te genereer.
6 Foutopsporing
Widget Wys Nie
Maak seker die inbedkode is korrek in jou HTML geplaas. Vir skrip-inbedding, maak seker die houer-div bestaan met die korrekte ID. Kyk in jou blaaier se konsole vir enige JavaScript-foute.
Aftreklys Werk Nie
As jy die iframe-inbedding gebruik, sal aftreklysies binne die widget-area rol. Vir volle aftreklys-funksionaliteit met oortreksels, gebruik eerder die skrip-inbeddingsmetode.
Stylkonflikte
As jou webwerf se CSS die voorkoms van die widget beïnvloed, probeer die iframe-inbeddingsmetode wat die widget-style van jou bladsy isoleer.
Inhoudsekuriteitsbeleid-kwessies
As jy 'n streng CSP het, moet jy dalk currency.wiki by jou toegelate script-src en frame-src riglyne voeg. Voorbeeld: script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
Hulp Nodig?
Kan jy nie vind waarna jy soek nie? Ons ondersteuning-span is hier om te help.
