Документация на уиджета
Пълно ръководство за вграждане и персонализиране на уиджета за валутен конвертор 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>
- Напълно изолиран от стиловете на вашата страница
- Работи със строги Content Security Policies
- Опростена и сигурна имплементация
Забележка: Използвайте скрипт за пълна интерактивност (падащите менюта се показват върху съдържанието). Използвайте iframe, когато ви трябва изолация или имате CSP ограничения.
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, който изолира стиловете на уиджета от вашата страница.
Проблеми с Content Security Policy
Ако имате строга CSP, може да се наложи да добавите currency.wiki към разрешените си script-src и frame-src директиви. Пример: script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
Нуждаете се от помощ?
Не намирате това, което търсите? Нашият екип за поддръжка е тук, за да помогне.
