Widget dokumentáció
Teljes útmutató a Currency.Wiki devizaváltó widget beágyazásához és testreszabásához weboldalán.
Tartalomjegyzék
1 Első lépések
Devizaváltó widget hozzáadása weboldalához egyszerű. Kövesse az alábbi lépéseket:
- Nyissa meg a Widget Készítő oldalt, és szabja testre a widget megjelenését
- Válassza ki a kívánt widget stílust, pénznemeket és témát
- Másolja ki a generált beágyazási kódot (Script vagy Iframe)
- Illessze be a kódot weboldala HTML-jébe oda, ahol a widgetet meg szeretné jeleníteni
Tipp: Használja a Gyorsindítási sablonokat a Widget Készítőben, hogy gyorsan elinduljon egy előre beállított widgettel.
2 Beágyazási módok
Script beágyazás (ajánlott)
A script beágyazási mód közvetlenül az oldalába illeszti a widgetet. A pénznem legördülő menük a környező tartalom előtt jelennek meg a könnyű kiválasztás érdekében.
<div id="currency-wiki-widget"></div>
<script src="https://widget.currency.wiki/v3/script.js?style=compact&theme=light&from=USD&to=EUR"></script>
- A legördülők a widget tartályán kívül jelennek meg
- Legjobb interaktív pénznemválasztáshoz
- Zökkenőmentes integráció az oldalával
Iframe beágyazás
Az iframe beágyazási mód egy elkülönített tartályt hoz létre a widget számára. Ez a módszer biztonságos, és működik szigorú tartalombiztonsági szabályzatok mellett is.
<iframe src="https://widget.currency.wiki/v3/embed?style=compact&theme=light&from=USD&to=EUR"
width="300" height="180" frameborder="0"></iframe>
- Teljesen elkülönül az oldal stílusaitól
- Működik szigorú tartalombiztonsági szabályzatokkal
- Egyszerű és biztonságos megvalósítás
Megjegyzés: A teljes interaktivitásért (legördülők tartalom felett) használja a Script beágyazást. Ha elkülönítésre vagy CSP korlátozásokra van szüksége, használja az Iframe beágyazást.
3 Widget stílusok
Válasszon 11 különböző widget stílus közül, hogy illeszkedjen weboldala dizájnjához. Minden stílus más-más felhasználási módhoz és megjelenítési mérethez optimalizált.
mini
250x140px
Kompakt, egysoros váltó. Tökéletes fejlécbe vagy szűk helyekre.
square
250x250px
1:1 arányú widget felcserélés gombbal. Oldalsávhoz ideális.
compact
300x180px
Kis helyigényű váltó minden alapvető funkcióval.
inline
480x56px
Vízszintes elrendezés. Tartalomba vagy navigációba ágyazva ideális.
tall
200x280px
Függőleges oldalsáv elrendezés klasszikus címkékkel.
mini-chart
250x260px
Kompakt váltó szikragrafikonos árfolyam-történettel.
multi-expandable
300x320px
Több pénznemű váltó. A felhasználók hozzáadhatnak/eltávolíthatnak pénznemeket.
multi-fixed
300x300px
Fix árfolyamlista. Legjobb konkrét árfolyamok megjelenítéséhez.
rates-compact
250x320px
Tömörített árfolyamlista utolsó frissítési idővel.
rates-viewer
300x500px
Teljes diagramnézet részletes árfolyaminformációkkal.
rates-viewer-compact
300x400px
A rates viewer kompakt változata diagramokkal.
4 URL paraméterek
Testreszabhatja widgetjét URL paraméterekkel. Ezek a paraméterek mind Script, mind Iframe beágyazásnál működnek.
| Paraméter | Alapértelmezett | Leírás |
|---|---|---|
| style | compact | Widget stílus (mini, square, compact, inline, tall, mini-chart, multi-expandable, multi-fixed, rates-compact, rates-viewer, rates-viewer-compact) |
| theme | light | Színtéma (light, dark vagy auto) |
| from | USD | Forrás pénznem kódja (pl. USD, EUR, GBP) |
| to | EUR | Cél pénznem kódja (pl. EUR, USD, JPY) |
| amount | 1000 | Alapértelmezett összeg átváltáshoz |
| accent | #2563eb | Kiemelő szín hex formátumban (# nélkül) |
| lang | en | Widget nyelvi kódja (pl. en, es, fr, de) |
| flags | 1 | Országzászlók megjelenítése (1=igen, 0=nem) |
| display | iso | Pénznem megjelenítési formátum (iso=USD, symbol=$) |
| lock | 0 | Pénznemek zárolása (1=zárolt, 0=nem zárolt) |
| currencies | EUR,GBP,JPY | Vesszővel elválasztott pénznemlista több pénznemű widgetekhez |
| dropdown | all | Legördülőben elérhető pénznemek (all, top10, top20 vagy vesszővel elválasztott lista) |
| branding | 1 | Márkajelzés megjelenítése (1=igen, 0=nem) |
| brandinglink | 1 | Márkajelzés kattinthatóvá tétele (1=link, 0=csak szöveg) |
| format | auto | Számformátum (auto, us, eu, french, indian) |
| decimals | 2 | Tizedesjegyek száma (0-6) |
| chart | 0 | Diagram engedélyezése (1=igen, 0=nem) |
| chartperiod | 7d | Diagram időszak (7d, 14d, 30d, 90d) |
Példák
Sötét témájú kompakt váltó:
?style=compact&theme=dark&from=USD&to=EUR
Több pénznemű árfolyamok:
?style=multi-fixed&from=USD¤cies=EUR,GBP,JPY,CAD
Mini váltó 30 napos diagrammal:
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
Pénznem szimbólumok megjelenítése kódok helyett:
?style=compact&display=symbol&from=USD&to=EUR
Zárolt pénznemek egyedi összeggel:
?style=compact&from=GBP&to=USD&lock=1&amount=100
5 Testreszabási lehetőségek
Téma opciók
- light - Világos háttér sötét szöveggel
- dark - Sötét háttér világos szöveggel
- auto - Automatikusan igazodik a felhasználó rendszerbeállításához
Pénznem megjelenítési formátum
- iso - ISO kódok, pl. USD, EUR, GBP
- symbol - Pénznem szimbólumok, pl. $, €, £
Számformátumok
- auto - Automatikusan felismeri a látogató böngésző beállításait
- us - US formátum: 1,234.56
- eu - Európai formátum: 1.234,56
- french - Francia formátum: 1 234,56
- indian - Indiai formátum: 1,23,456.78
Legördülő pénznem opciók
- all - Mind a 170+ támogatott pénznem
- top10 - 10 legnépszerűbb pénznem
- top20 - Top 20 pénznem kereskedési volumen szerint
- USD,EUR,GBP,... - Egyedi, meghatározott pénznemlista
Tipp: Használja a Widget Készítőt, hogy vizuálisan konfigurálja ezeket az opciókat, és automatikusan generálja a beágyazási kódot.
6 Hibaelhárítás
A widget nem jelenik meg
Győződjön meg róla, hogy a beágyazási kód helyesen van elhelyezve a HTML-ben. Script beágyazásnál ellenőrizze, hogy a tartály div létezik a megfelelő azonosítóval. Nézze meg a böngésző konzolt JavaScript hibákért.
A legördülő nem működik
Iframe beágyazásnál a legördülők a widget területén belül görgethetők. Teljes legördülő funkcionalitáshoz használja inkább a script beágyazási módot.
Stílusütközések
Ha weboldala CSS-e befolyásolja a widget megjelenését, próbálja ki az iframe beágyazást, amely elkülöníti a widget stílusait az oldalétól.
Tartalombiztonsági szabályzat problémák
Ha szigorú CSP-t használ, adja hozzá a currency.wiki-t az engedélyezett script-src és frame-src irányelvekhez. Példa: script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
Segítségre van szüksége?
Nem találja, amit keres? Ügyfélszolgálatunk segít Önnek.
