Dokumentasi Widget
Panduan lengkap untuk menyemat dan menyesuaikan widget penukar mata wang Currency.Wiki di laman web anda.
Isi Kandungan
1 Bermula
Menambah widget penukar mata wang ke laman web anda sangat mudah. Ikuti langkah mudah ini:
- Pergi ke halaman Pembina Widget dan sesuaikan penampilan widget anda
- Pilih gaya widget, mata wang, dan tema pilihan anda
- Salin kod semat yang dijana (Skrip atau Iframe)
- Tampal kod ke dalam HTML laman web anda di tempat yang anda mahu widget dipaparkan
Petua: Gunakan Praset Mula Pantas dalam Pembina Widget untuk bermula dengan pantas menggunakan widget yang telah dikonfigurasi.
2 Kaedah Semat
Semat Skrip (Disyorkan)
Kaedah semat skrip menyuntik widget terus ke halaman anda. Menu dropdown mata wang akan dipaparkan di hadapan kandungan sekeliling untuk pemilihan mudah.
<div id="currency-wiki-widget"></div>
<script src="https://widget.currency.wiki/v3/script.js?style=compact&theme=light&from=USD&to=EUR"></script>
- Dropdown dipaparkan di luar bekas widget
- Terbaik untuk pemilihan mata wang interaktif
- Integrasi lancar dengan halaman anda
Semat Iframe
Kaedah semat iframe mencipta bekas terasing untuk widget. Kaedah ini selamat dan berfungsi dalam persekitaran dengan dasar kandungan yang ketat.
<iframe src="https://widget.currency.wiki/v3/embed?style=compact&theme=light&from=USD&to=EUR"
width="300" height="180" frameborder="0"></iframe>
- Sepenuhnya terasing daripada gaya halaman anda
- Berfungsi dengan Dasar Keselamatan Kandungan yang ketat
- Pelaksanaan mudah dan selamat
Nota: Gunakan semat Skrip untuk interaktiviti penuh (dropdown dipaparkan di atas kandungan). Gunakan semat Iframe jika anda perlukan pengasingan atau ada sekatan CSP.
3 Gaya Widget
Pilih daripada 11 gaya widget berbeza untuk padankan reka bentuk laman web anda. Setiap gaya dioptimumkan untuk kegunaan dan saiz paparan berbeza.
mini
250x140px
Penukar satu baris padat. Sesuai untuk header atau ruang sempit.
square
250x250px
Widget nisbah 1:1 dengan butang tukar. Hebat untuk bar sisi.
compact
300x180px
Penukar padat dengan semua ciri penting.
inline
480x56px
Susun atur mendatar. Ideal untuk disemat dalam kandungan atau navigasi.
tall
200x280px
Susun atur bar sisi menegak dengan label klasik.
mini-chart
250x260px
Penukar padat dengan carta sparkline sejarah kadar.
multi-expandable
300x320px
Penukar pelbagai mata wang. Pengguna boleh tambah/buang mata wang.
multi-fixed
300x300px
Senarai kadar tukaran tetap. Terbaik untuk paparan kadar tertentu.
rates-compact
250x320px
Senarai kadar tukaran padat dengan masa kemas kini terakhir.
rates-viewer
300x500px
Paparan carta penuh dengan maklumat kadar terperinci.
rates-viewer-compact
300x400px
Versi padat paparan kadar dengan carta.
4 Parameter URL
Sesuaikan widget anda menggunakan parameter URL. Parameter ini berfungsi dengan kedua-dua kaedah semat Skrip dan Iframe.
| Parameter | Lalai | Penerangan |
|---|---|---|
| style | compact | Gaya widget (mini, square, compact, inline, tall, mini-chart, multi-expandable, multi-fixed, rates-compact, rates-viewer, rates-viewer-compact) |
| theme | light | Tema warna (cerah, gelap, atau auto) |
| from | USD | Kod mata wang sumber (cth. USD, EUR, GBP) |
| to | EUR | Kod mata wang sasaran (cth. EUR, USD, JPY) |
| amount | 1000 | Amaun lalai untuk penukaran |
| accent | #2563eb | Warna aksen dalam format hex (tanpa #) |
| lang | en | Kod bahasa widget (cth. en, es, fr, de) |
| flags | 1 | Papar bendera negara (1=papar, 0=sembunyi) |
| display | iso | Format paparan mata wang (iso=USD, symbol=$) |
| lock | 0 | Kunci mata wang (1=terkunci, 0=tidak terkunci) |
| currencies | EUR,GBP,JPY | Senarai mata wang dipisahkan koma untuk widget pelbagai mata wang |
| dropdown | all | Mata wang dalam dropdown (all, top10, top20, atau senarai dipisahkan koma) |
| branding | 1 | Papar penjenamaan (1=papar, 0=sembunyi) |
| brandinglink | 1 | Jadikan penjenamaan boleh diklik (1=pautan, 0=teks sahaja) |
| format | auto | Format nombor (auto, us, eu, french, indian) |
| decimals | 2 | Bilangan tempat perpuluhan (0-6) |
| chart | 0 | Aktifkan carta (1=aktif, 0=tidak aktif) |
| chartperiod | 7d | Tempoh carta (7d, 14d, 30d, 90d) |
Contoh
Penukar padat tema gelap:
?style=compact&theme=dark&from=USD&to=EUR
Kadar tukaran pelbagai mata wang:
?style=multi-fixed&from=USD¤cies=EUR,GBP,JPY,CAD
Penukar mini dengan carta 30 hari:
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
Papar simbol mata wang dan bukannya kod:
?style=compact&display=symbol&from=USD&to=EUR
Mata wang terkunci dengan amaun tersuai:
?style=compact&from=GBP&to=USD&lock=1&amount=100
5 Pilihan Penyesuaian
Pilihan Tema
- light - Latar cerah dengan teks gelap
- dark - Latar gelap dengan teks cerah
- auto - Padan automatik dengan keutamaan sistem pengguna
Format Paparan Mata Wang
- iso - Papar kod ISO seperti USD, EUR, GBP
- symbol - Papar simbol mata wang seperti $, €, £
Format Nombor
- auto - Kesan tetapan pelayar pelawat secara automatik
- us - Format AS: 1,234.56
- eu - Format Eropah: 1.234,56
- french - Format Perancis: 1 234,56
- indian - Format India: 1,23,456.78
Pilihan Mata Wang Dropdown
- all - Semua 170+ mata wang yang disokong
- top10 - 10 mata wang paling popular
- top20 - 20 mata wang teratas mengikut volum dagangan
- USD,EUR,GBP,... - Senarai tersuai mata wang tertentu
Petua: Gunakan Pembina Widget untuk mengkonfigurasi semua pilihan ini secara visual dan jana kod semat secara automatik.
6 Penyelesaian Masalah
Widget Tidak Dipaparkan
Pastikan kod semat diletakkan dengan betul dalam HTML anda. Untuk semat skrip, pastikan div bekas wujud dengan ID yang betul. Semak konsol pelayar anda untuk sebarang ralat JavaScript.
Dropdown Tidak Berfungsi
Jika menggunakan semat iframe, dropdown akan tatal dalam kawasan widget. Untuk fungsi dropdown penuh dengan overlay, gunakan kaedah semat skrip.
Konflik Gaya
Jika CSS laman web anda menjejaskan penampilan widget, cuba gunakan kaedah semat iframe yang mengasingkan gaya widget daripada halaman anda.
Isu Dasar Keselamatan Kandungan
Jika anda mempunyai CSP yang ketat, anda mungkin perlu tambah currency.wiki ke dalam arahan script-src dan frame-src yang dibenarkan. Contoh: script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
Perlukan Bantuan?
Tidak jumpa apa yang anda cari? Pasukan sokongan kami sedia membantu.
