Widgetdokumentation
Fullständig guide till att bädda in och anpassa Currency.Wiki valutakonverterare-widget på din webbplats.
Innehållsförteckning
1 Kom igång
Att lägga till en valutakonverterare-widget på din webbplats är enkelt. Följ dessa enkla steg:
- Gå till Widget Builder-sidan och anpassa widgetens utseende
- Välj önskad widgetstil, valutor och tema
- Kopiera den genererade inbäddningskoden (Script eller Iframe)
- Klistra in koden i din webbplats HTML där du vill att widgeten ska visas
Tips: Använd snabbstartsmallarna i Widget Builder för att snabbt komma igång med en förkonfigurerad widget.
2 Inbäddningsmetoder
Script-inbäddning (rekommenderas)
Script-inbäddningsmetoden injicerar widgeten direkt på din sida. Valutamenyer visas framför omgivande innehåll för enkel val.
<div id="currency-wiki-widget"></div>
<script src="https://widget.currency.wiki/v3/script.js?style=compact&theme=light&from=USD&to=EUR"></script>
- Rullgardinsmenyer visas utanför widgetbehållaren
- Bäst för interaktiv valutaval
- Sömlös integration med din sida
Iframe-inbäddning
Iframe-inbäddningsmetoden skapar en isolerad behållare för widgeten. Denna metod är säker och fungerar i miljöer med strikta innehållspolicys.
<iframe src="https://widget.currency.wiki/v3/embed?style=compact&theme=light&from=USD&to=EUR"
width="300" height="180" frameborder="0"></iframe>
- Helt isolerad från sidans stilar
- Fungerar med strikta Content Security Policies
- Enkel och säker implementation
Obs: Använd Script-inbäddning för full interaktivitet (rullgardinsmenyer visas över innehåll). Använd Iframe-inbäddning när du behöver isolering eller har CSP-begränsningar.
3 Widgetstilar
Välj mellan 11 olika widgetstilar för att matcha din webbplats design. Varje stil är optimerad för olika användningsområden och visningsstorlekar.
mini
250x140px
Kompakt enradskonverterare. Perfekt för rubriker eller trånga utrymmen.
square
250x250px
1:1-förhållande med byt-knapp. Utmärkt för sidopaneler.
compact
300x180px
Liten konverterare med alla viktiga funktioner.
inline
480x56px
Horisontell layout. Idealisk för inbäddning i innehåll eller navigation.
tall
200x280px
Vertikal sidopanelslayout med klassiska etiketter.
mini-chart
250x260px
Kompakt konverterare med sparkline-diagram som visar kurshistorik.
multi-expandable
300x320px
Fler-valutakonverterare. Användare kan lägga till/ta bort valutor.
multi-fixed
300x300px
Fast lista med växelkurser. Bäst för att visa specifika kurser.
rates-compact
250x320px
Kondenserad lista med växelkurser och senaste uppdateringstid.
rates-viewer
300x500px
Fullständig diagramvy med detaljerad kursinformation.
rates-viewer-compact
300x400px
Kompakt version av kursvisare med diagram.
4 URL-parametrar
Anpassa din widget med URL-parametrar. Dessa parametrar fungerar med både Script och Iframe-inbäddning.
| Parameter | Standard | Beskrivning |
|---|---|---|
| style | compact | Widgetstil (mini, square, compact, inline, tall, mini-chart, multi-expandable, multi-fixed, rates-compact, rates-viewer, rates-viewer-compact) |
| theme | light | Färgtema (light, dark eller auto) |
| from | USD | Källvalutakod (t.ex. USD, EUR, GBP) |
| to | EUR | Målvalutakod (t.ex. EUR, USD, JPY) |
| amount | 1000 | Standardbelopp för konvertering |
| accent | #2563eb | Accentfärg i hex-format (utan #) |
| lang | en | Widget-språkkod (t.ex. en, es, fr, de) |
| flags | 1 | Visa landsflaggor (1=visa, 0=dölj) |
| display | iso | Valutavisningsformat (iso=USD, symbol=$) |
| lock | 0 | Lås valutor (1=låst, 0=olåst) |
| currencies | EUR,GBP,JPY | Kommaseparerad lista med valutor för fler-valutawidgets |
| dropdown | all | Valutor i rullgardinsmeny (all, top10, top20 eller kommaseparerad lista) |
| branding | 1 | Visa varumärke (1=visa, 0=dölj) |
| brandinglink | 1 | Gör varumärket klickbart (1=länk, 0=endast text) |
| format | auto | Talformat (auto, us, eu, french, indian) |
| decimals | 2 | Antal decimaler (0-6) |
| chart | 0 | Aktivera diagram (1=aktiverat, 0=inaktiverat) |
| chartperiod | 7d | Diagramperiod (7d, 14d, 30d, 90d) |
Exempel
Mörkt tema kompakt konverterare:
?style=compact&theme=dark&from=USD&to=EUR
Fler-valutakurser:
?style=multi-fixed&from=USD¤cies=EUR,GBP,JPY,CAD
Mini-konverterare med 30-dagars diagram:
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
Visa valutasymboler istället för koder:
?style=compact&display=symbol&from=USD&to=EUR
Låsta valutor med anpassat belopp:
?style=compact&from=GBP&to=USD&lock=1&amount=100
5 Anpassningsalternativ
Temaalternativ
- light - Ljus bakgrund med mörk text
- dark - Mörk bakgrund med ljus text
- auto - Matchar automatiskt användarens systeminställning
Valutavisningsformat
- iso - Visar ISO-koder som USD, EUR, GBP
- symbol - Visar valutasymboler som $, €, £
Talformat
- auto - Upptäcker automatiskt besökarens webbläsarinställningar
- us - US-format: 1,234.56
- eu - Europeiskt format: 1.234,56
- french - Franskt format: 1 234,56
- indian - Indiskt format: 1,23,456.78
Alternativ för valutameny
- all - Alla 170+ stödda valutor
- top10 - Topp 10 mest populära valutor
- top20 - Topp 20 valutor efter handelsvolym
- USD,EUR,GBP,... - Anpassad lista med specifika valutor
Tips: Använd Widget Builder för att visuellt konfigurera alla dessa alternativ och generera inbäddningskoden automatiskt.
6 Felsökning
Widgeten visas inte
Kontrollera att inbäddningskoden är placerad korrekt i din HTML. För script-inbäddning, se till att container-diven finns med rätt ID. Kontrollera webbläsarens konsol för eventuella JavaScript-fel.
Rullgardinsmeny fungerar inte
Vid användning av iframe-inbäddning rullas menyer inom widgetområdet. För full funktionalitet med överlägg, använd script-inbäddningsmetoden istället.
Stilkonflikter
Om din webbplats CSS påverkar widgetens utseende, prova att använda iframe-inbäddning som isolerar widgetens stilar från din sida.
Problem med Content Security Policy
Om du har en strikt CSP kan du behöva lägga till currency.wiki till dina tillåtna script-src och frame-src direktiv. Exempel: script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
Behöver du hjälp?
Hittar du inte det du söker? Vårt supportteam finns här för att hjälpa dig.
