Dokumentasi Widget
Panduan lengkap menyematkan dan menyesuaikan widget konverter mata uang Currency.Wiki di situs web Anda.
Daftar Isi
1 Memulai
Menambahkan widget konverter mata uang ke situs web Anda sangat mudah. Ikuti langkah-langkah sederhana ini:
- Buka halaman Widget Builder dan sesuaikan tampilan widget Anda
- Pilih gaya widget, mata uang, dan tema yang diinginkan
- Salin kode semat yang dihasilkan (Script atau Iframe)
- Tempel kode ke HTML situs web Anda di tempat widget ingin ditampilkan
Tips: Gunakan Preset Mulai Cepat di Widget Builder untuk memulai dengan widget yang sudah dikonfigurasi.
2 Metode Semat
Semat Script (Direkomendasikan)
Metode semat script menyisipkan widget langsung ke halaman Anda. Menu dropdown mata uang akan tampil di depan konten sekitar untuk kemudahan pemilihan.
<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 tampil di luar wadah widget
- Terbaik untuk pemilihan mata uang interaktif
- Integrasi mulus dengan halaman Anda
Semat Iframe
Metode semat iframe membuat wadah terisolasi untuk widget. Metode ini aman dan berfungsi di lingkungan dengan kebijakan konten 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 terisolasi dari gaya halaman Anda
- Berfungsi dengan Kebijakan Keamanan Konten ketat
- Implementasi sederhana dan aman
Catatan: Gunakan semat Script untuk interaktivitas penuh (dropdown tampil di atas konten). Gunakan semat Iframe jika Anda butuh isolasi atau ada pembatasan CSP.
3 Gaya Widget
Pilih dari 11 gaya widget berbeda agar sesuai dengan desain situs web Anda. Setiap gaya dioptimalkan untuk kebutuhan dan ukuran tampilan berbeda.
mini
250x140px
Konverter satu baris kompak. Sempurna untuk header atau ruang sempit.
square
250x250px
Widget rasio 1:1 dengan tombol tukar. Cocok untuk sidebar.
compact
300x180px
Konverter berukuran kecil dengan semua fitur penting.
inline
480x56px
Tata letak horizontal. Ideal untuk disematkan dalam konten atau navigasi.
tall
200x280px
Tata letak sidebar vertikal dengan label klasik.
mini-chart
250x260px
Konverter kompak dengan grafik garis kecil yang menunjukkan riwayat kurs.
multi-expandable
300x320px
Konverter multi-mata uang. Pengguna dapat menambah/menghapus mata uang.
multi-fixed
300x300px
Daftar kurs tetap. Terbaik untuk menampilkan kurs tertentu.
rates-compact
250x320px
Daftar kurs ringkas dengan waktu pembaruan terakhir.
rates-viewer
300x500px
Tampilan grafik penuh dengan informasi kurs detail.
rates-viewer-compact
300x400px
Versi ringkas dari rates viewer dengan grafik.
4 Parameter URL
Sesuaikan widget Anda menggunakan parameter URL. Parameter ini berfungsi untuk metode semat Script maupun Iframe.
| Parameter | Default | Deskripsi |
|---|---|---|
| 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 (light, dark, atau auto) |
| from | USD | Kode mata uang sumber (misal: USD, EUR, GBP) |
| to | EUR | Kode mata uang tujuan (misal: EUR, USD, JPY) |
| amount | 1000 | Jumlah default untuk konversi |
| accent | #2563eb | Warna aksen dalam format hex (tanpa #) |
| lang | en | Kode bahasa widget (misal: en, es, fr, de) |
| flags | 1 | Tampilkan bendera negara (1=tampil, 0=sembunyi) |
| display | iso | Format tampilan mata uang (iso=USD, symbol=$) |
| lock | 0 | Kunci mata uang (1=terkunci, 0=tidak terkunci) |
| currencies | EUR,GBP,JPY | Daftar mata uang dipisahkan koma untuk widget multi-mata uang |
| dropdown | all | Mata uang di dropdown (all, top10, top20, atau daftar dipisahkan koma) |
| branding | 1 | Tampilkan branding (1=tampil, 0=sembunyi) |
| brandinglink | 1 | Buat branding dapat diklik (1=tautan, 0=teks saja) |
| format | auto | Format angka (auto, us, eu, french, indian) |
| decimals | 2 | Jumlah angka desimal (0-6) |
| chart | 0 | Aktifkan grafik (1=aktif, 0=nonaktif) |
| chartperiod | 7d | Periode grafik (7d, 14d, 30d, 90d) |
Contoh
Konverter kompak tema gelap:
?style=compact&theme=dark&from=USD&to=EUR
Kurs multi-mata uang:
?style=multi-fixed&from=USD¤cies=EUR,GBP,JPY,CAD
Konverter mini dengan grafik 30 hari:
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
Tampilkan simbol mata uang, bukan kode:
?style=compact&display=symbol&from=USD&to=EUR
Mata uang terkunci dengan jumlah kustom:
?style=compact&from=GBP&to=USD&lock=1&amount=100
5 Opsi Kustomisasi
Opsi Tema
- light - Latar terang dengan teks gelap
- dark - Latar gelap dengan teks terang
- auto - Otomatis mengikuti preferensi sistem pengguna
Format Tampilan Mata Uang
- iso - Menampilkan kode ISO seperti USD, EUR, GBP
- symbol - Menampilkan simbol mata uang seperti $, €, £
Format Angka
- auto - Mendeteksi pengaturan browser pengunjung secara otomatis
- us - Format US: 1,234.56
- eu - Format Eropa: 1.234,56
- french - Format Prancis: 1 234,56
- indian - Format India: 1,23,456.78
Opsi Mata Uang Dropdown
- all - Semua 170+ mata uang yang didukung
- top10 - 10 mata uang paling populer
- top20 - 20 mata uang teratas berdasarkan volume perdagangan
- USD,EUR,GBP,... - Daftar kustom mata uang tertentu
Tips: Gunakan Widget Builder untuk mengonfigurasi semua opsi ini secara visual dan menghasilkan kode semat secara otomatis.
6 Pemecahan Masalah
Widget Tidak Muncul
Pastikan kode semat ditempatkan dengan benar di HTML Anda. Untuk semat script, pastikan div kontainer ada dengan ID yang benar. Periksa konsol browser Anda untuk kesalahan JavaScript.
Dropdown Tidak Berfungsi
Jika menggunakan semat iframe, dropdown akan menggulir di dalam area widget. Untuk fungsi dropdown penuh dengan overlay, gunakan metode semat script.
Konflik Gaya
Jika CSS situs web Anda memengaruhi tampilan widget, coba gunakan metode semat iframe yang mengisolasi gaya widget dari halaman Anda.
Masalah Content Security Policy
Jika Anda memiliki CSP ketat, Anda mungkin perlu menambahkan currency.wiki ke direktif script-src dan frame-src yang diizinkan. Contoh: script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
Butuh Bantuan?
Tidak menemukan yang Anda cari? Tim dukungan kami siap membantu.
