Colocar uma calculadora no site é copiar e colar, e ainda assim é onde muita gente desiste. O motivo quase nunca é o código: é que cada plataforma esconde o campo de HTML num lugar diferente e chama esse campo por um nome diferente. Esta guia mostra o caminho completo, com o nome do menu certo em onze plataformas e o que fazer quando o widget não aparece.
Resposta rápida
- Escolha a calculadora nas calculadoras para site e clique em copiar código.
- Cole num campo de HTML, nunca num editor visual.
- No WordPress o campo é o bloco de HTML personalizado; no Wix é Incorporar um código; no Webflow é o elemento Embed.
- Se não aparecer, confira https, o campo usado e plugin de segurança.
O que você vai colar, em uma frase
Um iframe. O iframe é um elemento do HTML que abre uma página dentro da sua página, isolada do resto: o CSS do seu site não afeta a calculadora, e o JavaScript da calculadora não alcança o seu site. Essa separação é a razão de o método ser seguro e de funcionar igual em qualquer plataforma. Junto vai um parágrafo de crédito, que é texto comum e você pode apagar, e um script curto que ajusta a altura do iframe quando o resultado aparece.
Nada disso precisa de instalação, conta ou chave. O endereço dentro do iframe aponta para o ValorFinal, e o cálculo roda lá. É por isso que a calculadora não desatualiza no seu site quando a tabela do INSS muda em janeiro: você colou um endereço, não uma fórmula.
Os seis passos, na ordem
- Escolha a calculadora. Pense na dúvida que o seu visitante já tem, não na calculadora que parece mais impressionante. Site de contabilidade ganha mais com salário líquido do que com calculadora científica.
- Ajuste a aparência. Tema claro ou escuro, cor de destaque, largura e título. Escolha o tema pelo fundo da sua página.
- Clique em copiar código. Confira que o texto copiado começa com a sequência de abertura do iframe. Se começar com outra coisa, a cópia não pegou.
- Ache o campo de HTML da sua plataforma. É o passo que trava. A tabela abaixo tem o nome do menu em cada uma.
- Cole e publique. Em algumas plataformas o iframe só executa depois de publicar; no editor ele aparece como um retângulo vazio, e isso é normal.
- Abra no celular. Metade dos problemas de altura só aparece em tela estreita, e é lá que está a maior parte do seu público.
Teste aqui antes de colar no seu site
Mexa no tema e na largura, veja o código mudar junto e copie quando estiver do jeito que você quer.
Calculadora de porcentagem
Pré-visualização
Código para incorporar
Onde fica o campo de HTML em cada plataforma
A coluna da direita é a parte que economiza tempo: cada plataforma tem uma armadilha conhecida, e quase sempre é ela que faz o widget sumir.
| Plataforma | Caminho até o campo | A armadilha |
|---|---|---|
| HTML puro | Cole o código no arquivo .html, dentro do body, onde a calculadora deve aparecer. | Se a página estiver em http e não em https, o navegador bloqueia o iframe por conteúdo misto. O widget não aparece e o erro só fica visível no console. |
| WordPress (editor de blocos) | Adicione um bloco HTML personalizado e cole dentro dele. | O bloco certo é o HTML personalizado. No bloco de parágrafo o WordPress escapa as tags e a página mostra o código como texto. |
| WordPress (editor clássico) | Troque a aba Visual pela aba Texto antes de colar. | Se colar na aba Visual, o editor converte os sinais de menor e maior em entidades e o iframe morre ao salvar. |
| Elementor | Arraste o widget HTML para a seção e cole o código no painel de conteúdo. | O widget de Texto do Elementor também aceita HTML, mas limpa parte das tags. Use o widget chamado HTML, que não limpa nada. |
| Wix | Adicionar, Incorporar, Incorporar um código, e cole no campo que abre. | O Wix desenha uma caixa de tamanho fixo em volta do que você incorpora. Aumente a altura da caixa até o botão de calcular aparecer inteiro, senão ele fica cortado no celular. |
| Shopify | Na página ou no produto, abra o editor de conteúdo e clique no botão de mostrar HTML. | Para colocar a calculadora em todas as páginas de produto de uma vez, o lugar é a seção de conteúdo do tema, não a descrição de cada produto. |
| Blogger | No editor do post, troque de Modo de exibição para Visualização de HTML. | O Blogger reformata o HTML ao alternar de volta para o modo visual. Cole por último, salve e não volte para a aba visual. |
| Google Sites | Inserir, Incorporar, aba Código de incorporação. | O Google Sites não redimensiona sozinho. Puxe a alça da caixa até a calculadora caber, e confira na visualização de celular, que tem largura menor. |
| Webflow | Arraste o elemento Embed para a página e cole o código dentro dele. | O Embed do Webflow só executa depois de publicar. No editor ele aparece como um retângulo vazio, e isso é normal. |
| Framer | Insira o componente Embed e escolha a opção de HTML em vez de URL. | Se escolher a opção de URL, o Framer cria um iframe próprio em volta do nosso e a altura para de se ajustar. Use a opção de HTML. |
| Notion | Digite barra, escolha Embed, e cole a URL do widget (não o código inteiro). | O Notion não aceita tag HTML, só link. Cole apenas o endereço que está dentro do atributo src do iframe. |
Não apareceu nada: o diagnóstico em ordem
Faça na ordem, porque a primeira causa é de longe a mais comum e leva dez segundos para descartar.
- A página mostra o código como texto? Você colou num editor visual. Troque para o campo de HTML e cole de novo. No WordPress clássico é a aba Texto; no editor de blocos é o bloco HTML personalizado.
- O espaço ficou em branco, do tamanho certo? O iframe existe e não carregou. Quase sempre é conteúdo misto: a sua página está em http e o widget em https. Instale um certificado ou force https no site.
- O espaço sumiu por completo? Algo removeu a tag. Desative temporariamente plugins de segurança e de otimização de HTML e recarregue. Em WordPress, os suspeitos habituais são plugins que minificam HTML e os que sanitizam conteúdo.
- Aparece mas fica cortado? É altura. Aumente o valor no atributo de altura ou escolha uma largura menor, que empilha os campos e reduz a necessidade de espaço horizontal.
- Funciona no seu computador e não no do cliente? Extensão de bloqueio de anúncio agressiva pode bloquear iframes de terceiro. Teste numa janela anônima com as extensões desligadas antes de concluir que o problema é do widget.
Onde colocar dentro da página
Depois que funciona, a pergunta vira outra: em que ponto do texto. A regra que funciona é colocar a calculadora logo depois do parágrafo que cria a dúvida, e não no fim do artigo. Quem lê sobre rescisão quer calcular a rescisão dele naquele momento, não depois de mais dois mil caracteres.
Numa página de produto ou de serviço, o lugar é perto do botão de ação. Numa landing page, o assunto é mais delicado e tem página própria: veja calculadora para landing page.
Onde continuar
Esta guia faz parte da família de calculadoras para site. A página principal reúne o catálogo inteiro, o passo a passo de instalação em onze plataformas e a comparação com construtor pago e plugin.
- Calculadora para WordPress: Bloco de HTML, plugin oficial ou plugin de terceiro: qual escolher.
- Calculadora HTML para site: O código de uma calculadora feita à mão, e por que ele envelhece sozinho.
- Calculadora para blog: Onde colocar dentro do post para o leitor usar e não passar direto.
Se o que você quer é dado que se atualiza sozinho (cotação, índice, resultado de loteria, tabela do Brasileirão) e não uma calculadora, o lugar é o catálogo de widgets gratuitos, e a lista comentada está em widgets grátis para site. Para WordPress, o plugin oficial fica em /embed/wordpress.
Fontes e referências
- MDN Web Docs: elemento iframe: atributos, isolamento de contexto e comportamento do carregamento.
- web.dev: carregamento adiado nativo do navegador: como o atributo loading igual a lazy funciona em iframe e imagem.
- WordPress Developer Resources: blocos nativos do editor: o que o bloco de HTML personalizado aceita e o que os demais escapam.
- MDN Web Docs: conteúdo misto: por que o navegador bloqueia recurso https dentro de página http.