Widget အသုံးပြုနည်း
Currency.Wiki ငွေကြေးပြောင်းလဲမှု widget ကို ဝဘ်ဆိုဒ်တွင် ထည့်သွင်းခြင်းနှင့် စိတ်ကြိုက်ပြင်ဆင်ခြင်း လမ်းညွှန်အပြည့်အစုံ။
အကြောင်းအရာဇယား
1 စတင်အသုံးပြုခြင်း
ဝဘ်ဆိုဒ်တွင် ငွေကြေးပြောင်းလဲမှု widget ထည့်သွင်းရန် လွယ်ကူသည်။ အောက်ပါအဆင့်များကို လိုက်နာပါ။
- Widget Builder စာမျက်နှာသို့ သွားပြီး widget ပုံစံကို စိတ်ကြိုက်ပြင်ပါ
- သင့်ကြိုက်သော widget style, ငွေကြေးများနှင့် theme ကို ရွေးပါ
- ထုတ်ပေးသော embed code (Script သို့မဟုတ် Iframe) ကို ကူးယူပါ
- Widget ကို ပြသလိုသော HTML နေရာတွင် code ကို ထည့်ပါ
အကြံပြုချက်: Widget Builder ထဲရှိ Quick Start Presets ကို အသုံးပြု၍ အလွယ်တကူ စတင်နိုင်သည်။
2 Embed နည်းလမ်းများ
Script Embed (အကြံပြု)
Script embed နည်းလမ်းသည် widget ကို သင့်စာမျက်နှာထဲသို့ တိုက်ရိုက်ထည့်သွင်းသည်။ ငွေကြေး dropdown များသည် ဝဘ်စာမျက်နှာအပေါ်တွင် ပြသမည်။
<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 များသည် widget container အပြင်တွင် ပြသသည်
- Interactive ငွေကြေးရွေးချယ်မှုအတွက် အကောင်းဆုံး
- သင့်စာမျက်နှာနှင့် ပေါင်းစပ်အသုံးပြုနိုင်သည်
Iframe Embed
Iframe embed နည်းလမ်းသည် widget အတွက် သီးခြား container တစ်ခု ဖန်တီးသည်။ CSP တင်းကြပ်မှုရှိသောနေရာများတွင် အသုံးပြုနိုင်သည်။
<iframe src="https://widget.currency.wiki/v3/embed?style=compact&theme=light&from=USD&to=EUR"
width="300" height="180" frameborder="0"></iframe>
- သင့်စာမျက်နှာ style များနှင့် လုံးဝခွဲခြားထားသည်
- Content Security Policy တင်းကြပ်မှုများနှင့် အလုပ်လုပ်နိုင်သည်
- ရိုးရှင်းပြီး လုံခြုံမှုမြင့်သည်
မှတ်ချက်: Dropdown များအပြည့်အဝ အသုံးပြုလိုပါက Script embed ကို အသုံးပြုပါ။ Isolation သို့မဟုတ် CSP ကန့်သတ်မှုရှိပါက Iframe embed ကို အသုံးပြုပါ။
3 Widget ပုံစံများ
သင့်ဝဘ်ဆိုဒ်ဒီဇိုင်းနှင့် ကိုက်ညီရန် widget style ၁၁ မျိုး ရွေးနိုင်သည်။ အသုံးပြုမှုအမျိုးမျိုးနှင့် ပြသမှုအရွယ်အစားအလိုက် optimize လုပ်ထားသည်။
mini
250x140px
Compact single-line converter။ Header သို့မဟုတ် နေရာကျဉ်းသောနေရာများအတွက် သင့်တော်သည်။
square
250x250px
၁:၁ အချိုး widget၊ swap ခလုတ်ပါဝင်သည်။ Sidebar များအတွက် သင့်တော်သည်။
compact
300x180px
အဓိကအင်္ဂါရပ်များပါဝင်သော ကျစ်လစ် converter။
inline
480x56px
အလျားလိုက် layout။ Content သို့မဟုတ် navigation ထဲတွင် ထည့်သွင်းရန် သင့်တော်သည်။
tall
200x280px
ဒေါင်လိုက် sidebar layout၊ ရိုးရာ label များပါဝင်သည်။
mini-chart
250x260px
Sparkline ဇယားပါဝင်သော compact converter။
multi-expandable
300x320px
Multi-currency converter။ အသုံးပြုသူများ ငွေကြေး ထည့်/ဖယ်ရှားနိုင်သည်။
multi-fixed
300x300px
သတ်မှတ်ထားသော ငွေကြေးလဲလှယ်နှုန်းစာရင်း။ သီးသန့်နှုန်းများ ပြသရန် သင့်တော်သည်။
rates-compact
250x320px
နောက်ဆုံး update အချိန်ပါဝင်သော condensed exchange rates စာရင်း။
rates-viewer
300x500px
အသေးစိတ် rate အချက်အလက်ပါဝင်သော chart view အပြည့်။
rates-viewer-compact
300x400px
Chart ပါဝင်သော rates viewer compact version။
4 URL Parameter များ
URL parameter များကို အသုံးပြု၍ widget ကို စိတ်ကြိုက်ပြင်ဆင်နိုင်သည်။ Script နှင့် Iframe embed နှစ်မျိုးလုံးတွင် အသုံးပြုနိုင်သည်။
| Parameter | မူလတန်ဖိုး | ဖော်ပြချက် |
|---|---|---|
| style | compact | Widget style (mini, square, compact, inline, tall, mini-chart, multi-expandable, multi-fixed, rates-compact, rates-viewer, rates-viewer-compact) |
| theme | light | အရောင် theme (light, dark, auto) |
| from | USD | မူလငွေကြေး code (ဥပမာ USD, EUR, GBP) |
| to | EUR | ပစ်မှတ်ငွေကြေး code (ဥပမာ EUR, USD, JPY) |
| amount | 1000 | ပြောင်းလဲရန် မူလပမာဏ |
| accent | #2563eb | Accent အရောင် (hex format, # မပါ) |
| lang | en | Widget ဘာသာစကား code (ဥပမာ en, es, fr, de) |
| flags | 1 | နိုင်ငံအလံ ပြ/မပြ (1=ပြ, 0=မပြ) |
| display | iso | ငွေကြေးပြသပုံ (iso=USD, symbol=$) |
| lock | 0 | ငွေကြေးများ ချုပ်/မချုပ် (1=ချုပ်, 0=မချုပ်) |
| currencies | EUR,GBP,JPY | Multi-currency widget များအတွက် comma ဖြင့် ခွဲထားသော ငွေကြေးစာရင်း |
| dropdown | all | Dropdown တွင်ပါဝင်မည့် ငွေကြေးများ (all, top10, top20, သို့မဟုတ် comma ဖြင့် ခွဲထားသောစာရင်း) |
| branding | 1 | Branding ပြ/မပြ (1=ပြ, 0=မပြ) |
| brandinglink | 1 | Branding ကို လင့်ခ်လုပ်/မလုပ် (1=link, 0=text only) |
| format | auto | နံပါတ် format (auto, us, eu, french, indian) |
| decimals | 2 | ဒဿမနေရာအရေအတွက် (0-6) |
| chart | 0 | ဇယား ဖွင့်/ပိတ် (1=ဖွင့်, 0=ပိတ်) |
| chartperiod | 7d | ဇယားကာလ (7d, 14d, 30d, 90d) |
ဥပမာများ
အမှောင် theme compact converter:
?style=compact&theme=dark&from=USD&to=EUR
Multi-currency လဲလှယ်နှုန်းများ:
?style=multi-fixed&from=USD¤cies=EUR,GBP,JPY,CAD
၃၀ ရက် ဇယားပါ Mini converter:
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
ငွေကြေး code မဟုတ်ဘဲ သင်္ကေတဖြင့် ပြသခြင်း:
?style=compact&display=symbol&from=USD&to=EUR
Custom ပမာဏနှင့် ချုပ်ထားသော ငွေကြေးများ:
?style=compact&from=GBP&to=USD&lock=1&amount=100
5 စိတ်ကြိုက်ပြင်ဆင်မှုများ
Theme ရွေးချယ်စရာများ
- light - အလင်းနောက်ခံ၊ အနက်စာလုံး
- dark - အမှောင်နောက်ခံ၊ အဖြူစာလုံး
- auto - အသုံးပြုသူစနစ်အလိုက် အလိုအလျောက်
ငွေကြေးပြသပုံ
- iso - ISO code များ (ဥပမာ USD, EUR, GBP) ပြသသည်
- symbol - ငွေကြေးသင်္ကေတ (ဥပမာ $, €, £) ပြသသည်
နံပါတ် Format များ
- auto - အသုံးပြုသူ browser ဆက်တင်အလိုက် အလိုအလျောက်
- us - အမေရိကန်ပုံစံ: 1,234.56
- eu - ဥရောပပုံစံ: 1.234,56
- french - ပြင်သစ်ပုံစံ: 1 234,56
- indian - အိန္ဒိယပုံစံ: 1,23,456.78
Dropdown ငွေကြေးရွေးချယ်မှုများ
- all - ပံ့ပိုးထားသော ငွေကြေး ၁၇၀+ အားလုံး
- top10 - အများဆုံး လူကြိုက်ငွေကြေး ၁၀ ခု
- top20 - လဲလှယ်ပမာဏအရ ထိပ်တန်း ၂၀ ငွေကြေးများ
- USD,EUR,GBP,... - သီးသန့်ရွေးချယ်ထားသော ငွေကြေးစာရင်း
အကြံပြုချက်: Widget Builder ကို အသုံးပြု၍ ဤရွေးချယ်မှုများအားလုံးကို မြင်သာစွာ ပြင်ဆင်ပြီး Embed code ကို အလိုအလျောက် ထုတ်နိုင်သည်။
6 ပြဿနာဖြေရှင်းခြင်း
Widget မပြသနိုင်ပါ
Embed code ကို သင့် HTML မှန်ကန်သောနေရာတွင် ထည့်ထား/မထား စစ်ပါ။ Script embed အတွက် container div မှန်ကန်စွာ ရှိ/မရှိ စစ်ပါ။ Browser console တွင် JavaScript error ရှိ/မရှိ စစ်ပါ။
Dropdown မအလုပ်လုပ်ပါ
Iframe embed အသုံးပြုပါက dropdown များသည် widget အတွင်းတွင် scroll လုပ်ပါမည်။ Overlay ဖြင့် dropdown အပြည့်အဝ အသုံးပြုလိုပါက script embed ကို အသုံးပြုပါ။
Style ပဋိပက္ခ
သင့်ဝဘ်ဆိုဒ် CSS သည် widget ပုံစံကို သက်ရောက်နေပါက iframe embed ကို အသုံးပြုပါ။
Content Security Policy ပြဿနာများ
CSP တင်းကြပ်မှုရှိပါက currency.wiki ကို script-src နှင့် frame-src directive များတွင် ထည့်ပါ။ ဥပမာ: script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
အကူအညီလိုပါသလား?
လိုအပ်သောအချက်အလက် မတွေ့ရပါက ကျွန်ုပ်တို့ support အဖွဲ့က အကူအညီပေးပါမည်။
