Documentação do Widget
Guia completo para incorporar e personalizar o widget de conversor de moedas Currency.Wiki em seu site.
Índice
1 Primeiros Passos
Adicionar um widget de conversor de moedas ao seu site é fácil. Siga estes passos simples:
- Acesse a página do Construtor de Widget e personalize a aparência do seu widget
- Selecione o estilo, moedas e tema desejados
- Copie o código de incorporação gerado (Script ou Iframe)
- Cole o código no HTML do seu site onde deseja que o widget apareça
Dica: Use as Predefinições Rápidas no Construtor de Widget para começar rapidamente com um widget pré-configurado.
2 Métodos de Incorporação
Incorporação via Script (Recomendado)
O método de incorporação via script insere o widget diretamente na sua página. Os menus suspensos de moeda aparecem sobre o conteúdo ao redor para fácil seleção.
<div id="currency-wiki-widget"></div>
<script src="https://widget.currency.wiki/v3/script.js?style=compact&theme=light&from=USD&to=EUR"></script>
- Menus suspensos aparecem fora do contêiner do widget
- Ideal para seleção interativa de moedas
- Integração perfeita com sua página
Incorporação via Iframe
O método de incorporação via iframe cria um contêiner isolado para o widget. Este método é seguro e funciona em ambientes com políticas de conteúdo restritas.
<iframe src="https://widget.currency.wiki/v3/embed?style=compact&theme=light&from=USD&to=EUR"
width="300" height="180" frameborder="0"></iframe>
- Totalmente isolado dos estilos da sua página
- Funciona com políticas de segurança de conteúdo restritas
- Implementação simples e segura
Nota: Use Script para interatividade total (menus suspensos sobre o conteúdo). Use Iframe quando precisar de isolamento ou restrições CSP.
3 Estilos do Widget
Escolha entre 11 estilos diferentes de widget para combinar com o design do seu site. Cada estilo é otimizado para diferentes casos de uso e tamanhos de exibição.
mini
250x140px
Conversor compacto de linha única. Perfeito para cabeçalhos ou espaços pequenos.
square
250x250px
Widget 1:1 com botão de inverter. Ótimo para barras laterais.
compact
300x180px
Conversor compacto com todos os recursos essenciais.
inline
480x56px
Layout horizontal. Ideal para incorporar em conteúdos ou navegação.
tall
200x280px
Layout vertical de barra lateral com rótulos clássicos.
mini-chart
250x260px
Conversor compacto com gráfico de linha mostrando histórico de taxas.
multi-expandable
300x320px
Conversor multi-moeda. Usuários podem adicionar/remover moedas.
multi-fixed
300x300px
Lista fixa de taxas de câmbio. Ideal para exibir taxas específicas.
rates-compact
250x320px
Lista condensada de taxas de câmbio com horário da última atualização.
rates-viewer
300x500px
Visualização completa de gráfico com informações detalhadas de taxas.
rates-viewer-compact
300x400px
Versão compacta do visualizador de taxas com gráficos.
4 Parâmetros de URL
Personalize seu widget usando parâmetros de URL. Esses parâmetros funcionam tanto para Script quanto para Iframe.
| Parâmetro | Padrão | Descrição |
|---|---|---|
| style | compact | Estilo do widget (mini, square, compact, inline, tall, mini-chart, multi-expandable, multi-fixed, rates-compact, rates-viewer, rates-viewer-compact) |
| theme | light | Tema de cor (claro, escuro ou automático) |
| from | USD | Código da moeda de origem (ex: USD, EUR, GBP) |
| to | EUR | Código da moeda de destino (ex: EUR, USD, JPY) |
| amount | 1000 | Valor padrão para conversão |
| accent | #2563eb | Cor de destaque em formato hex (sem #) |
| lang | en | Código do idioma do widget (ex: en, es, fr, de) |
| flags | 1 | Mostrar bandeiras dos países (1=mostrar, 0=ocultar) |
| display | iso | Formato de exibição da moeda (iso=USD, symbol=$) |
| lock | 0 | Bloquear moedas (1=bloqueado, 0=desbloqueado) |
| currencies | EUR,GBP,JPY | Lista de moedas separadas por vírgula para widgets multi-moeda |
| dropdown | all | Moedas no menu suspenso (all, top10, top20 ou lista personalizada separada por vírgula) |
| branding | 1 | Mostrar marca (1=mostrar, 0=ocultar) |
| brandinglink | 1 | Marca clicável (1=link, 0=apenas texto) |
| format | auto | Formato numérico (auto, us, eu, french, indian) |
| decimals | 2 | Número de casas decimais (0-6) |
| chart | 0 | Ativar gráfico (1=ativado, 0=desativado) |
| chartperiod | 7d | Período do gráfico (7d, 14d, 30d, 90d) |
Exemplos
Conversor compacto tema escuro:
?style=compact&theme=dark&from=USD&to=EUR
Taxas de câmbio multi-moeda:
?style=multi-fixed&from=USD¤cies=EUR,GBP,JPY,CAD
Conversor mini com gráfico de 30 dias:
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
Exibir símbolos de moeda ao invés de códigos:
?style=compact&display=symbol&from=USD&to=EUR
Moedas bloqueadas com valor personalizado:
?style=compact&from=GBP&to=USD&lock=1&amount=100
5 Opções de Personalização
Opções de Tema
- light - Fundo claro com texto escuro
- dark - Fundo escuro com texto claro
- auto - Acompanha automaticamente a preferência do sistema do usuário
Formato de Exibição da Moeda
- iso - Exibe códigos ISO como USD, EUR, GBP
- symbol - Exibe símbolos de moeda como $, €, £
Formatos Numéricos
- auto - Detecta automaticamente as configurações do navegador do visitante
- us - Formato EUA: 1,234.56
- eu - Formato Europeu: 1.234,56
- french - Formato Francês: 1 234,56
- indian - Formato Indiano: 1,23,456.78
Opções de Moeda no Menu Suspenso
- all - Todas as 170+ moedas suportadas
- top10 - Top 10 moedas mais populares
- top20 - Top 20 moedas por volume negociado
- USD,EUR,GBP,... - Lista personalizada de moedas específicas
Dica: Use o Construtor de Widget para configurar visualmente todas essas opções e gerar o código automaticamente.
6 Solução de Problemas
Widget Não Aparece
Certifique-se de que o código de incorporação está corretamente no seu HTML. Para script, verifique se o div contêiner existe com o ID correto. Veja o console do navegador para erros de JavaScript.
Menu Suspenso Não Funciona
Se usar iframe, os menus suspensos rolam dentro da área do widget. Para funcionalidade completa com sobreposição, use o método de script.
Conflitos de Estilo
Se o CSS do seu site estiver afetando a aparência do widget, tente usar o método de incorporação via iframe, que isola os estilos do widget da sua página.
Problemas de Política de Segurança de Conteúdo
Se você possui CSP restrita, pode ser necessário adicionar currency.wiki às diretivas permitidas em script-src e frame-src. Exemplo: script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
Precisa de Ajuda?
Não encontrou o que procura? Nossa equipe de suporte está pronta para ajudar.
