Widgetdocumentatie
Volledige gids voor het embedden en aanpassen van de Currency.Wiki valuta-omrekenwidget op je website.
Inhoudsopgave
1 Aan de slag
Een valuta-omrekenwidget toevoegen aan je website is eenvoudig. Volg deze simpele stappen:
- Ga naar de Widget Bouwer pagina en pas het uiterlijk van je widget aan
- Selecteer je gewenste widgetstijl, valuta's en thema
- Kopieer de gegenereerde embedcode (Script of Iframe)
- Plak de code in de HTML van je website waar je de widget wilt tonen
Tip: Gebruik de Snelle Start Presets in de Widget Bouwer om snel te beginnen met een vooraf geconfigureerde widget.
2 Embedmethoden
Script embed (aanbevolen)
De script embed-methode voegt de widget direct toe aan je pagina. Valutadropdownmenu's verschijnen voor de omliggende inhoud voor eenvoudige selectie.
<div id="currency-wiki-widget"></div>
<script src="https://widget.currency.wiki/v3/script.js?style=compact&theme=light&from=USD&to=EUR"></script>
- Dropdowns verschijnen buiten de widgetcontainer
- Ideaal voor interactieve valutaselectie
- Naadloze integratie met je pagina
Iframe embed
De iframe embed-methode creëert een geïsoleerde container voor de widget. Deze methode is veilig en werkt in omgevingen met strikte content policies.
<iframe src="https://widget.currency.wiki/v3/embed?style=compact&theme=light&from=USD&to=EUR"
width="300" height="180" frameborder="0"></iframe>
- Volledig geïsoleerd van je paginastijlen
- Werkt met strikte Content Security Policies
- Eenvoudige en veilige implementatie
Let op: Gebruik Script embed voor volledige interactiviteit (dropdowns verschijnen over de inhoud). Gebruik Iframe embed als je isolatie nodig hebt of CSP-beperkingen hebt.
3 Widgetstijlen
Kies uit 11 verschillende widgetstijlen die passen bij het ontwerp van je website. Elke stijl is geoptimaliseerd voor verschillende toepassingen en weergaveformaten.
mini
250x140px
Compacte éénregelige omrekenaar. Perfect voor headers of kleine ruimtes.
square
250x250px
1:1 verhouding widget met wisselknop. Ideaal voor zijbalken.
compact
300x180px
Kleine omrekenaar met alle essentiële functies.
inline
480x56px
Horizontale lay-out. Ideaal voor integratie in content of navigatie.
tall
200x280px
Verticale zijbalklay-out met klassieke labels.
mini-chart
250x260px
Compacte omrekenaar met sparkline-grafiek voor koershistorie.
multi-expandable
300x320px
Multi-valuta omrekenaar. Gebruikers kunnen valuta's toevoegen/verwijderen.
multi-fixed
300x300px
Vaste lijst met wisselkoersen. Ideaal voor het tonen van specifieke koersen.
rates-compact
250x320px
Samengevatte wisselkoersenlijst met laatste update.
rates-viewer
300x500px
Volledig grafiekoverzicht met gedetailleerde koersinformatie.
rates-viewer-compact
300x400px
Compacte versie van de koersviewer met grafieken.
4 URL-parameters
Pas je widget aan met URL-parameters. Deze parameters werken met zowel Script als Iframe embedmethoden.
| Parameter | Standaard | Beschrijving |
|---|---|---|
| style | compact | Widgetstijl (mini, square, compact, inline, tall, mini-chart, multi-expandable, multi-fixed, rates-compact, rates-viewer, rates-viewer-compact) |
| theme | light | Kleurthema (light, dark of auto) |
| from | USD | Bronvalutacode (bijv. USD, EUR, GBP) |
| to | EUR | Doelvalutacode (bijv. EUR, USD, JPY) |
| amount | 1000 | Standaardbedrag voor conversie |
| accent | #2563eb | Accentkleur in hex-formaat (zonder #) |
| lang | en | Widgettaalcode (bijv. en, es, fr, de) |
| flags | 1 | Toon landvlaggen (1=toon, 0=verberg) |
| display | iso | Valutaweergaveformaat (iso=USD, symbol=$) |
| lock | 0 | Valuta's vergrendelen (1=vergrendeld, 0=ontgrendeld) |
| currencies | EUR,GBP,JPY | Kommagescheiden lijst van valuta's voor multi-valuta widgets |
| dropdown | all | Valuta's in dropdown (all, top10, top20 of kommagescheiden lijst) |
| branding | 1 | Toon branding (1=toon, 0=verberg) |
| brandinglink | 1 | Maak branding klikbaar (1=link, 0=alleen tekst) |
| format | auto | Getalnotatie (auto, us, eu, french, indian) |
| decimals | 2 | Aantal decimalen (0-6) |
| chart | 0 | Grafiek inschakelen (1=aan, 0=uit) |
| chartperiod | 7d | Grafiekperiode (7d, 14d, 30d, 90d) |
Voorbeelden
Donker thema compacte omrekenaar:
?style=compact&theme=dark&from=USD&to=EUR
Multi-valuta wisselkoersen:
?style=multi-fixed&from=USD¤cies=EUR,GBP,JPY,CAD
Mini-omrekenaar met 30-dagen grafiek:
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
Toon valutasymbolen in plaats van codes:
?style=compact&display=symbol&from=USD&to=EUR
Vergrendelde valuta's met aangepast bedrag:
?style=compact&from=GBP&to=USD&lock=1&amount=100
5 Aanpassingsopties
Thema-opties
- light - Lichte achtergrond met donkere tekst
- dark - Donkere achtergrond met lichte tekst
- auto - Past zich automatisch aan het systeem van de gebruiker aan
Valutaweergaveformaat
- iso - Toont ISO-codes zoals USD, EUR, GBP
- symbol - Toont valutasymbolen zoals $, €, £
Getalnotaties
- auto - Detecteert automatisch de browserinstellingen van de bezoeker
- us - VS-notatie: 1,234.56
- eu - Europese notatie: 1.234,56
- french - Franse notatie: 1 234,56
- indian - Indiase notatie: 1,23,456.78
Dropdown valuta-opties
- all - Alle 170+ ondersteunde valuta's
- top10 - Top 10 populairste valuta's
- top20 - Top 20 valuta's op handelsvolume
- USD,EUR,GBP,... - Aangepaste lijst met specifieke valuta's
Tip: Gebruik de Widget Bouwer om al deze opties visueel te configureren en automatisch de embedcode te genereren.
6 Probleemoplossing
Widget wordt niet weergegeven
Zorg dat de embedcode correct is geplaatst in je HTML. Voor script embed, controleer of de container-div bestaat met het juiste ID. Controleer je browserconsole op JavaScript-fouten.
Dropdown werkt niet
Bij gebruik van iframe embed scrollen dropdowns binnen het widgetgebied. Voor volledige dropdownfunctionaliteit met overlays, gebruik de script embed-methode.
Stijlconflicten
Als de CSS van je website het uiterlijk van de widget beïnvloedt, probeer dan de iframe embed-methode die de widgetstijlen isoleert van je pagina.
Content Security Policy problemen
Als je een strikte CSP hebt, moet je currency.wiki toevoegen aan je toegestane script-src en frame-src. Voorbeeld: script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
Hulp nodig?
Kun je niet vinden wat je zoekt? Ons supportteam helpt je graag.
