Виджет Документациясы
Currency.Wiki валюта конвертер виджетин веб-сайтыңызга орнотуу жана ыңгайлаштыруу боюнча толук колдонмо.
Мазмун тизмеси
1 Баштоо
Веб-сайтыңызга валюта конвертер виджетин кошуу оңой. Бул жөнөкөй кадамдарды аткарыңыз:
- Виджет түзүүчү баракчасына өтүп, виджетиңиздин көрүнүшүн ыңгайлаштырыңыз
- Каалаган виджет стилин, валюталарды жана теманы тандаңыз
- Жаратылган орнотуу кодун көчүрүңүз (Скрипт же Iframe)
- Кодду веб-сайтыңыздын HTML бөлүгүнө, виджетти көрсөтүүнү каалаган жерге коюңуз
Кеңеш: Виджет түзүүчүдөгү тез баштоо шаблондорун колдонуп, алдын ала конфигурацияланган виджет менен тез баштасаңыз болот.
2 Орнотуу ыкмалары
Скрипт орнотуу (Сунушталат)
Скрипт орнотуу ыкмасы виджетти түз баракчаңызга киргизет. Валюта тандоо менюлары айланасындагы мазмундун үстүндө көрсөтүлөт.
<div id="currency-wiki-widget"></div>
<script src="https://widget.currency.wiki/v3/script.js?style=compact&theme=light&from=USD&to=EUR"></script>
- Тандоо менюлары виджет контейнеринен тышкары көрсөтүлөт
- Интерактивдүү валюта тандоо үчүн эң жакшы
- Баракчаңыз менен үзгүлтүксүз интеграция
Iframe орнотуу
Iframe орнотуу ыкмасы виджет үчүн изоляцияланган контейнер түзөт. Бул ыкма коопсуз жана катуу мазмун саясаты бар чөйрөлөрдө иштейт.
<iframe src="https://widget.currency.wiki/v3/embed?style=compact&theme=light&from=USD&to=EUR"
width="300" height="180" frameborder="0"></iframe>
- Баракчаңыздын стилдеринен толук изоляцияланган
- Катуу мазмун саясаты менен иштейт
- Жөнөкөй жана коопсуз ишке ашыруу
Эскертүү: Толук интерактивдүүлүк үчүн Скрипт орнотууну колдонуңуз (менюлар мазмундун үстүндө көрсөтүлөт). Изоляция же CSP чектөөлөрү керек болсо, Iframe орнотууну тандаңыз.
3 Виджет стилдери
Веб-сайтыңыздын дизайнына дал келген 11 ар кандай виджет стилин тандаңыз. Ар бир стиль ар кандай колдонуу учурлары жана дисплей өлчөмдөрү үчүн оптималдаштырылган.
mini
250x140px
Ыкчам бир саптуу конвертер. Башкы беттер же тар мейкиндиктер үчүн идеалдуу.
square
250x250px
1:1 катышы бар виджет, алмаштыруу баскычы менен. Каптал тилкелер үчүн сонун.
compact
300x180px
Бардык негизги функциялары бар кичинекей конвертер.
inline
480x56px
Горизонталдык макет. Мазмундун же навигациянын ичинде орнотуу үчүн ылайыктуу.
tall
200x280px
Вертикалдык каптал тилке макети, классикалык белгилер менен.
mini-chart
250x260px
Ыкчам конвертер, курс тарыхын көрсөткөн мини-график менен.
multi-expandable
300x320px
Көп валюталуу конвертер. Колдонуучулар валюталарды кошуп/алып сала алышат.
multi-fixed
300x300px
Туруктуу курстар тизмеси. Белгилүү бир курстарды көрсөтүү үчүн ылайыктуу.
rates-compact
250x320px
Кыскача курстар тизмеси, акыркы жаңыланган убакыт менен.
rates-viewer
300x500px
Толук график көрүнүшү, деталдуу курс маалыматы менен.
rates-viewer-compact
300x400px
Графиктери бар курстар көрүүчүнүн ыкчам версиясы.
4 URL параметрлери
Виджетиңизди URL параметрлери аркылуу ыңгайлаштырыңыз. Бул параметрлер Скрипт жана Iframe орнотуу ыкмалары менен иштейт.
| Параметр | Демейки | Сүрөттөмө |
|---|---|---|
| style | compact | Виджет стили (mini, square, compact, inline, tall, mini-chart, multi-expandable, multi-fixed, rates-compact, rates-viewer, rates-viewer-compact) |
| theme | light | Тема түсү (light, dark, же auto) |
| from | USD | Баштапкы валюта коду (мис., USD, EUR, GBP) |
| to | EUR | Максаттуу валюта коду (мис., EUR, USD, JPY) |
| amount | 1000 | Котормо үчүн демейки сумма |
| accent | #2563eb | Акцент түсү (hex форматта, # белгисиз) |
| lang | en | Виджет тил коду (мис., en, es, fr, de) |
| flags | 1 | Мамлекеттик желектерди көрсөтүү (1=көрсөтүү, 0=жашыруу) |
| display | iso | Валюта көрсөтүү форматы (iso=USD, symbol=$) |
| lock | 0 | Валюталарды бекитүү (1=бекитилген, 0=ачык) |
| currencies | EUR,GBP,JPY | Көп валюталуу виджеттер үчүн валюталардын тизмеси (үтүк менен бөлүнгөн) |
| dropdown | all | Менюдагы валюталар (all, top10, top20 же үтүр менен бөлүнгөн тизмеси) |
| branding | 1 | Брендингди көрсөтүү (1=көрсөтүү, 0=жашыруу) |
| brandinglink | 1 | Брендингди басылуучу кылуу (1=шилтеме, 0=текст гана) |
| format | auto | Сан форматы (auto, us, eu, french, indian) |
| decimals | 2 | Ондук орундардын саны (0-6) |
| chart | 0 | Графикти күйгүзүү (1=иштетилген, 0=өчүрүлгөн) |
| chartperiod | 7d | График периоду (7d, 14d, 30d, 90d) |
Мисалдар
Караңгы тема, ыкчам конвертер:
?style=compact&theme=dark&from=USD&to=EUR
Көп валюталуу курстар:
?style=multi-fixed&from=USD¤cies=EUR,GBP,JPY,CAD
30 күндүк график менен мини-конвертер:
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
Валюта кодунун ордуна символдорду көрсөтүү:
?style=compact&display=symbol&from=USD&to=EUR
Ыңгайлаштырылган сумма менен бекитилген валюталар:
?style=compact&from=GBP&to=USD&lock=1&amount=100
5 Ыңгайлаштыруу параметрлери
Тема параметрлери
- light - Ачык фон, кара текст
- dark - Кара фон, ачык текст
- auto - Колдонуучунун системалык жөндөөлөрүнө автоматтык түрдө дал келет
Валюта көрсөтүү форматы
- iso - ISO коддорун көрсөтөт (USD, EUR, GBP)
- symbol - Валюта символдорун көрсөтөт ($, €, £)
Сан форматтары
- auto - Коноктун браузер жөндөөлөрүн автоматтык аныктайт
- us - АКШ форматы: 1,234.56
- eu - Европа форматы: 1.234,56
- french - Француз форматы: 1 234,56
- indian - Индиялык формат: 1,23,456.78
Менюдагы валюта параметрлери
- all - 170+ бардык колдоого алынган валюталар
- top10 - Эң популярдуу 10 валюта
- top20 - Соода көлөмү боюнча алдыңкы 20 валюта
- USD,EUR,GBP,... - Белгилүү бир валюталардын ыңгайлаштырылган тизмеси
Кеңеш: Виджет түзүүчүнү колдонуп, бардык бул параметрлерди визуалдуу түрдө конфигурациялап, орнотуу кодун автоматтык түрдө алыңыз.
6 Маселелерди чечүү
Виджет көрүнбөй жатат
Орнотуу кодуңуз HTML'де туура жайгашканын текшериңиз. Скрипт орнотуу үчүн, контейнер div туура ID менен бар экенин текшериңиз. Браузердин консолунан JavaScript каталарын караңыз.
Меню иштебей жатат
Iframe орнотуу колдонулса, менюлар виджеттин ичинде жылат. Толук меню функциялары үчүн скрипт орнотууну колдонуңуз.
Стиль конфликттери
Веб-сайтыңыздын CSS виджеттин көрүнүшүнө таасир этсе, виджет стилдерин изоляциялоо үчүн iframe орнотууну колдонуп көрүңүз.
Мазмун саясаты маселелери
Эгерде катуу CSP колдонсоңуз, currency.wiki'ни script-src жана frame-src директиваларына кошушуңуз керек. Мисал: script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
Жардам керекпи?
Издеп жаткан нерсеңизди таба албадыңызбы? Биздин колдоо тобу жардам берүүгө даяр.
