Виджет құжаттамасы
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 - USD, EUR, GBP сияқты ISO кодтарын көрсетеді
- 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;
Көмек керек пе?
Іздегеніңізді таба алмадыңыз ба? Біздің қолдау тобы көмектесуге дайын.
