Documentação do Widget
Guia completo para incorporar e personalizar o widget conversor de moedas Currency.Wiki em seu site.
Índice
1 Primeiros Passos
Adicionar um widget 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 seu estilo de widget, moedas e tema preferidos
- 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 Script (Recomendado)
O método de incorporação por script insere o widget diretamente na sua página. Os menus suspensos de moedas aparecerão 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
- Melhor para seleção interativa de moedas
- Integração perfeita com sua página
Incorporação Iframe
O método de incorporação por 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>
- Completamente 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 houver restrições de 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 usos 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 inversão. Ó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. Estes 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 hexadecimal (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 separada por vírgulas de moedas para widgets multi-moeda |
| dropdown | all | Moedas no menu suspenso (all, top10, top20 ou lista separada por vírgulas) |
| 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
Mini conversor com gráfico de 30 dias:
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
Exibir símbolos de moeda em vez 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 do Menu Suspenso
- all - Todas as 170+ moedas suportadas
- top10 - Top 10 moedas mais populares
- top20 - Top 20 moedas por volume de negociação
- 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 inserido 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 rolarão dentro da área do widget. Para funcionalidade total 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 iframe, que isola os estilos do widget da sua página.
Problemas com Política de Segurança de Conteúdo
Se você possui CSP restrita, pode ser necessário adicionar currency.wiki às diretivas permitidas de 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.
