Dokumentácia widgetu
Kompletný sprievodca vložením a prispôsobením menového konvertora Currency.Wiki na vašu webstránku.
Obsah
1 Začíname
Pridať menový konvertor widget na vašu stránku je jednoduché. Postupujte podľa týchto krokov:
- Prejdite na stránku Tvorca widgetu a prispôsobte si vzhľad widgetu
- Vyberte preferovaný štýl widgetu, meny a tému
- Skopírujte vygenerovaný vložený kód (Skript alebo Iframe)
- Vložte kód do HTML vašej stránky tam, kde chcete widget zobraziť
Tip: Použite rýchle prednastavenia v Tvorcovi widgetu pre rýchly štart s predkonfigurovaným widgetom.
2 Spôsoby vloženia
Vloženie cez Skript (Odporúčané)
Metóda vloženia cez skript vloží widget priamo na vašu stránku. Rozbaľovacie menu mien sa zobrazia nad obsahom stránky pre jednoduchý výber.
<div id="currency-wiki-widget"></div>
<script src="https://widget.currency.wiki/v3/script.js?style=compact&theme=light&from=USD&to=EUR"></script>
- Rozbaľovacie menu sa zobrazia mimo kontajnera widgetu
- Najlepšie pre interaktívny výber mien
- Bezproblémová integrácia so stránkou
Vloženie cez Iframe
Metóda vloženia cez iframe vytvorí izolovaný kontajner pre widget. Táto metóda je bezpečná a funguje aj pri prísnych bezpečnostných politikách obsahu.
<iframe src="https://widget.currency.wiki/v3/embed?style=compact&theme=light&from=USD&to=EUR"
width="300" height="180" frameborder="0"></iframe>
- Úplne izolované od štýlov vašej stránky
- Funguje s prísnymi Content Security Policies
- Jednoduchá a bezpečná implementácia
Poznámka: Použite vloženie cez Skript pre plnú interaktivitu (menu sa zobrazujú nad obsahom). Použite Iframe, ak potrebujete izoláciu alebo máte CSP obmedzenia.
3 Štýly widgetu
Vyberte si z 11 rôznych štýlov widgetu, ktoré sa hodia k dizajnu vašej stránky. Každý štýl je optimalizovaný pre iné použitie a veľkosť zobrazenia.
mini
250x140px
Kompaktný jedno-riadkový konvertor. Ideálne do hlavičiek alebo úzkych priestorov.
square
250x250px
Widget v pomere 1:1 s tlačidlom prehodiť. Skvelý do bočných panelov.
compact
300x180px
Malý konvertor so všetkými základnými funkciami.
inline
480x56px
Horizontálne rozloženie. Ideálne na vloženie do obsahu alebo navigácie.
tall
200x280px
Vertikálne rozloženie bočného panela s klasickými popiskami.
mini-chart
250x260px
Kompaktný konvertor s minigrafom vývoja kurzu.
multi-expandable
300x320px
Viacmenový konvertor. Používatelia môžu pridávať/odstraňovať meny.
multi-fixed
300x300px
Pevný zoznam kurzov. Najlepšie na zobrazenie konkrétnych kurzov.
rates-compact
250x320px
Zhutnený zoznam kurzov s časom poslednej aktualizácie.
rates-viewer
300x500px
Plný graf s detailnými informáciami o kurze.
rates-viewer-compact
300x400px
Kompaktná verzia prehliadača kurzov s grafmi.
4 Parametre URL
Prispôsobte si widget pomocou URL parametrov. Tieto parametre fungujú s oboma spôsobmi vloženia – Skript aj Iframe.
| Parameter | Predvolené | Popis |
|---|---|---|
| style | compact | Štýl widgetu (mini, square, compact, inline, tall, mini-chart, multi-expandable, multi-fixed, rates-compact, rates-viewer, rates-viewer-compact) |
| theme | light | Farebná téma (light, dark alebo auto) |
| from | USD | Kód zdrojovej meny (napr. USD, EUR, GBP) |
| to | EUR | Kód cieľovej meny (napr. EUR, USD, JPY) |
| amount | 1000 | Predvolená suma na konverziu |
| accent | #2563eb | Doplnková farba v hex formáte (bez #) |
| lang | en | Kód jazyka widgetu (napr. en, es, fr, de) |
| flags | 1 | Zobraziť vlajky krajín (1=zobraziť, 0=skryť) |
| display | iso | Formát zobrazenia meny (iso=USD, symbol=$) |
| lock | 0 | Zamknúť meny (1=zamknuté, 0=odomknuté) |
| currencies | EUR,GBP,JPY | Zoznam mien oddelený čiarkou pre viacmenové widgety |
| dropdown | all | Meny v rozbaľovacom menu (all, top10, top20 alebo zoznam mien oddelený čiarkou) |
| branding | 1 | Zobraziť značku (1=zobraziť, 0=skryť) |
| brandinglink | 1 | Značka ako odkaz (1=odkaz, 0=len text) |
| format | auto | Formát čísla (auto, us, eu, french, indian) |
| decimals | 2 | Počet desatinných miest (0-6) |
| chart | 0 | Povoliť graf (1=povolené, 0=zakázané) |
| chartperiod | 7d | Obdobie grafu (7d, 14d, 30d, 90d) |
Príklady
Kompaktný konvertor v tmavej téme:
?style=compact&theme=dark&from=USD&to=EUR
Viacmenové výmenné kurzy:
?style=multi-fixed&from=USD¤cies=EUR,GBP,JPY,CAD
Mini konvertor s 30-dňovým grafom:
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
Zobraziť symboly mien namiesto kódov:
?style=compact&display=symbol&from=USD&to=EUR
Zamknuté meny s vlastnou sumou:
?style=compact&from=GBP&to=USD&lock=1&amount=100
5 Možnosti prispôsobenia
Možnosti témy
- light - Svetlé pozadie s tmavým textom
- dark - Tmavé pozadie so svetlým textom
- auto - Automaticky podľa nastavenia systému používateľa
Formát zobrazenia meny
- iso - Zobrazuje ISO kódy ako USD, EUR, GBP
- symbol - Zobrazuje symboly mien ako $, €, £
Formáty čísiel
- auto - Automaticky detekuje nastavenia prehliadača návštevníka
- us - US formát: 1,234.56
- eu - Európsky formát: 1.234,56
- french - Francúzsky formát: 1 234,56
- indian - Indický formát: 1,23,456.78
Možnosti rozbaľovacieho menu mien
- all - Všetkých 170+ podporovaných mien
- top10 - Top 10 najpopulárnejších mien
- top20 - Top 20 mien podľa objemu obchodovania
- USD,EUR,GBP,... - Vlastný zoznam konkrétnych mien
Tip: Použite Tvorcu widgetu na vizuálne nastavenie všetkých týchto možností a automatické vygenerovanie vloženého kódu.
6 Riešenie problémov
Widget sa nezobrazuje
Uistite sa, že vložený kód je správne umiestnený v HTML. Pri vložení cez skript sa uistite, že existuje kontajner s korektným ID. Skontrolujte konzolu prehliadača na chyby JavaScriptu.
Rozbaľovacie menu nefunguje
Pri použití iframe sa menu posúva v rámci widgetu. Pre plnú funkcionalitu menu s prekrytím použite metódu vloženia cez skript.
Konflikt štýlov
Ak CSS vašej stránky ovplyvňuje vzhľad widgetu, skúste vloženie cez iframe, ktoré izoluje štýly widgetu od vašej stránky.
Problémy s Content Security Policy
Ak máte prísnu CSP, možno budete musieť pridať currency.wiki do povolených script-src a frame-src direktív. Príklad: script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
Potrebujete pomoc?
Nenašli ste, čo hľadáte? Náš tím podpory vám rád pomôže.
