← Voltar para os guiasUtilidades e consumo

Incorporar uma calculadora no seu site: a linha de código, a altura do quadro, a privacidade e a licença

Incorporar uma calculadora é colar uma linha de código, e o que dá trabalho vem depois: a altura do quadro, o que ele faz com os dados de quem visita a sua página e em que condições o uso é livre. Este guia percorre esses pontos com o código do iCalculadora aberto.

Este guia é para quem mantém um blog, o site de uma imobiliária ou o portal de uma contabilidade e quer a calculadora dentro da própria página, em vez de um link para fora. Ele explica a ferramenta Incorporar no seu site, que reúne as 14 calculadoras liberadas e o código pronto de cada uma.

O caso trabalhado usa a calculadora de salário líquido, a mesma que o quadro mostra, e as medidas do quadro são lidas do código. Um teste confere que o arquivo do widget diz o mesmo que o guia, então o texto não fica velho sem que alguém seja avisado.

A linha de código e o que ela cria

A incorporação é uma linha: <script src="https://icalculadora.com.br/embed.js" data-icalculadora="salario-liquido"></script>. Ela vai no ponto da página em que a calculadora deve aparecer. O identificador, no atributo data-icalculadora, aceita letras minúsculas, números e hífen, de 2 a 60 caracteres. Qualquer outro valor faz o script não fazer nada, sem mensagem de erro na tela.

Ao rodar, o script cria um quadro logo depois dele, apontando para a página de incorporação da calculadora, no mesmo domínio de onde o próprio script veio. Esse detalhe impede copiar o arquivo para o seu servidor: o endereço do quadro sai do endereço do script, e uma cópia hospedada em outro domínio procuraria a calculadora no lugar errado. O script não tem dependência e não faz pedido de rede além do próprio quadro.

Dentro do quadro entram o formulário e o resultado, com um título só para leitor de tela e, embaixo, o link de crédito para a página completa. Ficam de fora o cabeçalho, o rodapé, o anúncio e o aviso de cookies do site. As fontes e a data de revisão da regra também ficam na página completa, e é para lá que o crédito leva.

Calculadoras que podem ser incorporadas
IdentificadorCalculadora
salario-liquidoCalculadora de salário líquido 2026
salario-brutoCalculadora de salário bruto 2026
inssCalculadora de INSS 2026
feriasCalculadora de férias 2026
horas-extrasCalculadora de horas extras
vale-transporteCalculadora de desconto do vale-transporte
juros-compostosCalculadora de juros compostos
financiamento-priceCalculadora de financiamento Price
das-meiCalculadora do DAS-MEI
preco-de-vendaCalculadora de preço de venda
porcentagemCalculadora de porcentagem online
regra-de-tresCalculadora de regra de 3
imcCalculadora de IMC
dias-uteisCalculadora de dias úteis

A página Incorporar no seu site traz o código pronto de cada uma. Rescisão, FGTS, imposto de renda, 13º e seguro-desemprego têm tela própria e não estão na lista.

Por que o quadro muda de altura

Um quadro de outro domínio não deixa a sua página ler o tamanho do conteúdo dele, e por isso a altura precisa ser avisada de dentro. O quadro nasce com 520 px. Depois, a calculadora manda à página uma mensagem com um único número, a altura do documento, sempre que o conteúdo muda de tamanho, e o script ajusta o quadro.

O script só dá ouvidos à mensagem que vem do domínio de onde ele foi carregado e da janela do quadro que ele mesmo criou. O resto é ignorado. A altura também só vale entre 200 px e 4000 px, para que um número absurdo não estique a sua página.

O resultado de um cálculo ocupa bem mais espaço que o formulário vazio, e num quadro estreito o formulário já fica mais alto. Por isso não vale fixar a altura por conta própria. O script grava a altura direto no quadro, e uma regra sua com !important na folha de estilo vence essa gravação: o resultado fica cortado, ou sobra um vazio embaixo. Deixe o quadro ocupar a largura da coluna e cuide só do espaço em volta.

Um caso: o salário líquido num blog de contabilidade

Um blog de contabilidade quer a calculadora no fim de um texto sobre holerite. Cola <script src="https://icalculadora.com.br/embed.js" data-icalculadora="salario-liquido"></script> no lugar certo. A visita abre a página, e o quadro entra com 520 px, ainda vazio. Ela digita um salário bruto de R$ 3.500,00, sem adicionais nem dependentes, e toca em calcular.

A conta acontece no navegador, dentro do quadro: INSS de R$ 308,60, IRRF de R$ 0,00 e salário líquido estimado de R$ 3.191,40. São os números da calculadora do site, porque o quadro é a própria calculadora, e não uma cópia da fórmula. Quando a regra mudar, o quadro muda junto, e o blog não troca nada.

A ordem dos acontecimentos é esta.

  1. A página do blog carrega, e o script cria o quadro com 520 px de altura.
  2. O quadro pede ao iCalculadora a página de incorporação, com as folhas de estilo e os scripts dela.
  3. O quadro informa a altura do próprio conteúdo, e o script ajusta o espaço na página.
  4. A visita digita e calcula: o resultado aparece no quadro e a altura cresce.
  5. A visita fecha a página, e nada do que ela digitou foi enviado ou guardado.

O que o quadro coleta e o que a sua página precisa dizer

O cálculo roda no navegador de quem visita, e os valores digitados não saem dele. O quadro não carrega anúncio nem o Google Analytics e não grava cookie nem guarda dado no aparelho. Isso vale em qualquer navegador, e não depende de a pessoa ter recusado o aviso de cookies do iCalculadora: o código simplesmente não carrega essas peças na rota de incorporação.

O que sai da visita é o pedido comum a qualquer servidor. O quadro é carregado do iCalculadora, que recebe o endereço IP e o navegador de quem abriu a sua página, como recebe de quem abre o site direto. A LGPD define dado pessoal como a informação relacionada a pessoa identificada ou identificável (art. 5º, inciso I), e se o endereço entra nessa conta depende do uso que se faz dele. Para a sua página o ponto é outro: ela passa a carregar conteúdo de outro domínio.

O guia de cookies da ANPD define cookie de terceiros como o criado por um domínio diferente do que a pessoa está visitando, a exemplo da exibição de anúncios. O guia lembra também que o titular deve ser informado sobre o eventual compartilhamento de dados com terceiros (art. 9º da LGPD). O quadro não cria cookie, e a sua lista de cookies não ganha item por causa dele. Convém, mesmo assim, dizer na política da sua página que a calculadora vem de outro endereço e apontar para a política de privacidade do iCalculadora, que tem um parágrafo próprio sobre a calculadora incorporada.

O ambiente restrito do quadro

O quadro roda num sandbox, o ambiente restrito do navegador para conteúdo de fora. O script concede o que a calculadora precisa para funcionar e nega o que um widget nunca deve fazer: trocar a página que o hospeda, abrir caixa de diálogo, travar o ponteiro e baixar arquivo. Um teste reprova qualquer mudança que conceda uma das quatro negadas.

Permissões do sandbox do quadro
PermissãoSituaçãoMotivo
allow-scriptsConcedidaO cálculo roda em JavaScript.
allow-same-originConcedidaSem ela a mensagem de altura chegaria sem origem que se possa conferir.
allow-formsConcedidaO cálculo passa pelo envio de um formulário.
allow-popupsConcedidaO link de crédito abre a página completa em outra aba.
allow-popups-to-escape-sandboxConcedidaA aba aberta pelo crédito não herda as restrições do quadro.
allow-top-navigationNegadaO quadro não troca a sua página por outra.
allow-modalsNegadaO quadro não abre caixa de diálogo sobre a sua página.
allow-pointer-lockNegadaO quadro não prende o ponteiro do mouse.
allow-downloadsNegadaO quadro não baixa arquivo sem que a pessoa tenha pedido na sua página.

Licença e crédito

O uso é livre e gratuito, inclusive em site comercial, com duas condições da página de incorporação: manter o link de crédito que aparece sob a calculadora e não alterar o conteúdo do quadro. Não é preciso pedir autorização nem avisar. Os termos de uso acrescentam que o resultado não pode ser apresentado aos seus visitantes como valor oficial, porque é uma estimativa, com os limites descritos na página de cada calculadora.

A razão das condições está na lei. A utilização de uma obra, a reprodução e a adaptação incluídas, depende de autorização prévia e expressa do autor (art. 29 da Lei 9.610/1998). A página de incorporação faz o papel dessa autorização, dada de antemão a quem cumpre as duas condições. A Lei 9.609/1998, sobre programa de computador, diz que o uso de software é objeto de contrato de licença (art. 9º), e é isso que as condições fazem para o script. Nada disso é parecer jurídico: é a leitura dos artigos citados.

A licença cobre o quadro, e não o texto das páginas. Citar um trecho com crédito e link é permitido, e republicar a página inteira, não, segundo os termos de uso. Do outro lado, o seu site continua responsável pelo que mostra em volta do quadro.

Acessibilidade e busca: o que o quadro resolve e o que fica com você

O quadro sai com o título “Calculadora do iCalculadora”, que é o nome que o leitor de tela anuncia ao chegar nele, e o documento de dentro tem um título de primeiro nível só para esse leitor. Isso não substitui o título da sua página. A Lei Brasileira de Inclusão manda que os sítios da internet mantidos por empresas com sede ou representação comercial no País sejam acessíveis (art. 63), e o quadro é parte do sítio que o mostra.

Para a busca, o quadro é neutro: a página de incorporação sai do índice e fora do mapa do site, porque seria a mesma calculadora da página completa, sem texto nenhum. O texto que explica a conta, e que faz a sua página ser encontrada, precisa ser seu. Ponha o quadro depois da explicação, e não no lugar dela.

Um erro frequente é colocar o endereço da calculadora comum, o de /calculadoras/salario-liquido, num iframe escrito à mão. O navegador recusa: só a rota de incorporação libera o enquadramento, e o resto do site manda o cabeçalho que o proíbe. Use sempre a linha de código.

O que este guia não cobre

Ficam de fora a configuração do seu site e a contagem de uso. Se o seu site tem uma política de segurança de conteúdo que bloqueia scripts de outros domínios, a linha de código não roda, e a liberação é feita do seu lado. Plugins de WordPress e de outros gerenciadores de conteúdo têm a própria forma de aceitar um script.

Também não há contagem: o quadro não avisa o iCalculadora de quantas pessoas usaram a calculadora na sua página, e por isso não existe relatório de uso por site. Se você precisa desse número, a medição tem de estar na sua página, fora do quadro.

Calculadoras deste guia

Disponível
Utilidades e consumo

Incorporar no seu site

Coloque uma calculadora do site no seu blog com uma linha de código.

Ver como incorporar
Disponível
Matemática e educação

Porcentagem

Calcule uma porcentagem, uma proporção percentual ou a variação entre valores.

Calcular porcentagem