Dokumentacja widgetu
Kompletny przewodnik po osadzaniu i personalizacji widgetu przelicznika walut Currency.Wiki na Twojej stronie.
Spis treści
1 Pierwsze kroki
Dodanie widgetu przelicznika walut na swoją stronę jest proste. Wykonaj te kroki:
- Przejdź do strony Kreatora Widgetu i dostosuj wygląd widgetu
- Wybierz preferowany styl widgetu, waluty i motyw
- Skopiuj wygenerowany kod do osadzenia (skrypt lub iframe)
- Wklej kod do HTML swojej strony tam, gdzie chcesz, aby pojawił się widget
Wskazówka: Użyj szybkich ustawień początkowych w Kreatorze Widgetu, aby szybko rozpocząć z gotowym widgetem.
2 Metody osadzania
Osadzenie skryptu (zalecane)
Metoda osadzenia skryptu wstrzykuje widget bezpośrednio na Twoją stronę. Menu rozwijane walut pojawią się nad otaczającą treścią dla łatwego wyboru.
<div id="currency-wiki-widget"></div>
<script src="https://widget.currency.wiki/v3/script.js?style=compact&theme=light&from=USD&to=EUR"></script>
- Listy rozwijane wyświetlane poza kontenerem widgetu
- Najlepsze do interaktywnego wyboru walut
- Płynna integracja ze stroną
Osadzenie Iframe
Metoda osadzenia iframe tworzy izolowany kontener dla widgetu. Ta metoda jest bezpieczna i działa w środowiskach ze ścisłą polityką treści.
<iframe src="https://widget.currency.wiki/v3/embed?style=compact&theme=light&from=USD&to=EUR"
width="300" height="180" frameborder="0"></iframe>
- Całkowicie izolowany od stylów strony
- Działa przy ścisłych politykach bezpieczeństwa treści
- Prosta i bezpieczna implementacja
Uwaga: Użyj osadzenia skryptu dla pełnej interaktywności (listy rozwijane nad treścią). Użyj iframe, gdy potrzebujesz izolacji lub masz ograniczenia CSP.
3 Style widgetu
Wybierz spośród 11 różnych stylów widgetu, aby dopasować go do wyglądu swojej strony. Każdy styl jest zoptymalizowany pod różne zastosowania i rozmiary wyświetlania.
mini
250x140px
Kompaktowy przelicznik jednoliniowy. Idealny do nagłówków lub wąskich miejsc.
square
250x250px
Widget w proporcji 1:1 z przyciskiem zamiany. Świetny do paneli bocznych.
compact
300x180px
Mały przelicznik z wszystkimi podstawowymi funkcjami.
inline
480x56px
Układ poziomy. Idealny do osadzania w treści lub nawigacji.
tall
200x280px
Pionowy układ boczny z klasycznymi etykietami.
mini-chart
250x260px
Kompaktowy przelicznik z wykresem pokazującym historię kursu.
multi-expandable
300x320px
Przelicznik wielowalutowy. Użytkownicy mogą dodawać/usuwać waluty.
multi-fixed
300x300px
Stała lista kursów. Najlepsze do prezentacji konkretnych kursów.
rates-compact
250x320px
Skrócona lista kursów z czasem ostatniej aktualizacji.
rates-viewer
300x500px
Pełny widok wykresu z szczegółowymi informacjami o kursie.
rates-viewer-compact
300x400px
Kompaktowa wersja przeglądarki kursów z wykresami.
4 Parametry URL
Personalizuj swój widget za pomocą parametrów URL. Te parametry działają zarówno dla osadzenia skryptu, jak i iframe.
| Parametr | Domyślnie | Opis |
|---|---|---|
| style | compact | Styl widgetu (mini, square, compact, inline, tall, mini-chart, multi-expandable, multi-fixed, rates-compact, rates-viewer, rates-viewer-compact) |
| theme | light | Motyw kolorystyczny (light, dark lub auto) |
| from | USD | Kod waluty źródłowej (np. USD, EUR, GBP) |
| to | EUR | Kod waluty docelowej (np. EUR, USD, JPY) |
| amount | 1000 | Domyślna kwota do przeliczenia |
| accent | #2563eb | Kolor akcentu w formacie hex (bez #) |
| lang | en | Kod języka widgetu (np. en, es, fr, de) |
| flags | 1 | Pokaż flagi krajów (1=pokaż, 0=ukryj) |
| display | iso | Format wyświetlania waluty (iso=USD, symbol=$) |
| lock | 0 | Zablokuj waluty (1=zablokowane, 0=odblokowane) |
| currencies | EUR,GBP,JPY | Lista walut oddzielona przecinkami dla widgetów wielowalutowych |
| dropdown | all | Waluty w menu rozwijanym (all, top10, top20 lub lista oddzielona przecinkami) |
| branding | 1 | Pokaż markę (1=pokaż, 0=ukryj) |
| brandinglink | 1 | Uczyń markę klikalną (1=link, 0=tylko tekst) |
| format | auto | Format liczb (auto, us, eu, french, indian) |
| decimals | 2 | Liczba miejsc po przecinku (0-6) |
| chart | 0 | Włącz wykres (1=włączony, 0=wyłączony) |
| chartperiod | 7d | Okres wykresu (7d, 14d, 30d, 90d) |
Przykłady
Kompaktowy przelicznik z ciemnym motywem:
?style=compact&theme=dark&from=USD&to=EUR
Kursy wymiany wielu walut:
?style=multi-fixed&from=USD¤cies=EUR,GBP,JPY,CAD
Mini przelicznik z 30-dniowym wykresem:
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
Wyświetlanie symboli walut zamiast kodów:
?style=compact&display=symbol&from=USD&to=EUR
Zablokowane waluty z własną kwotą:
?style=compact&from=GBP&to=USD&lock=1&amount=100
5 Opcje personalizacji
Opcje motywu
- light - Jasne tło z ciemnym tekstem
- dark - Ciemne tło z jasnym tekstem
- auto - Automatycznie dopasowuje się do preferencji systemu użytkownika
Format wyświetlania waluty
- iso - Wyświetla kody ISO, np. USD, EUR, GBP
- symbol - Wyświetla symbole walut, np. $, €, £
Formaty liczb
- auto - Automatycznie wykrywa ustawienia przeglądarki odwiedzającego
- us - Format US: 1,234.56
- eu - Format europejski: 1.234,56
- french - Format francuski: 1 234,56
- indian - Format indyjski: 1,23,456.78
Opcje walut w menu rozwijanym
- all - Wszystkie 170+ obsługiwanych walut
- top10 - 10 najpopularniejszych walut
- top20 - Top 20 walut według wolumenu obrotu
- USD,EUR,GBP,... - Własna lista wybranych walut
Wskazówka: Użyj Kreatora Widgetu, aby wizualnie skonfigurować wszystkie te opcje i automatycznie wygenerować kod do osadzenia.
6 Rozwiązywanie problemów
Widget się nie wyświetla
Upewnij się, że kod do osadzenia jest poprawnie umieszczony w HTML. Przy osadzeniu skryptu sprawdź, czy istnieje kontener div z odpowiednim ID. Sprawdź konsolę przeglądarki pod kątem błędów JavaScript.
Menu rozwijane nie działa
Przy osadzeniu iframe menu rozwijane przewijają się wewnątrz widgetu. Aby uzyskać pełną funkcjonalność rozwijanych list z nakładkami, użyj metody osadzenia skryptu.
Konflikty stylów
Jeśli CSS Twojej strony wpływa na wygląd widgetu, spróbuj użyć osadzenia iframe, które izoluje style widgetu od Twojej strony.
Problemy z polityką bezpieczeństwa treści
Jeśli masz ścisłą politykę CSP, dodaj currency.wiki do dozwolonych źródeł script-src i frame-src. Przykład: script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
Potrzebujesz pomocy?
Nie możesz znaleźć tego, czego szukasz? Nasz zespół wsparcia jest do Twojej dyspozycji.
