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.
| Identificador | Calculadora |
|---|---|
| salario-liquido | Calculadora de salário líquido 2026 |
| salario-bruto | Calculadora de salário bruto 2026 |
| inss | Calculadora de INSS 2026 |
| ferias | Calculadora de férias 2026 |
| horas-extras | Calculadora de horas extras |
| vale-transporte | Calculadora de desconto do vale-transporte |
| juros-compostos | Calculadora de juros compostos |
| financiamento-price | Calculadora de financiamento Price |
| das-mei | Calculadora do DAS-MEI |
| preco-de-venda | Calculadora de preço de venda |
| porcentagem | Calculadora de porcentagem online |
| regra-de-tres | Calculadora de regra de 3 |
| imc | Calculadora de IMC |
| dias-uteis | Calculadora 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.
- A página do blog carrega, e o script cria o quadro com 520 px de altura.
- O quadro pede ao iCalculadora a página de incorporação, com as folhas de estilo e os scripts dela.
- O quadro informa a altura do próprio conteúdo, e o script ajusta o espaço na página.
- A visita digita e calcula: o resultado aparece no quadro e a altura cresce.
- 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ão | Situação | Motivo |
|---|---|---|
| allow-scripts | Concedida | O cálculo roda em JavaScript. |
| allow-same-origin | Concedida | Sem ela a mensagem de altura chegaria sem origem que se possa conferir. |
| allow-forms | Concedida | O cálculo passa pelo envio de um formulário. |
| allow-popups | Concedida | O link de crédito abre a página completa em outra aba. |
| allow-popups-to-escape-sandbox | Concedida | A aba aberta pelo crédito não herda as restrições do quadro. |
| allow-top-navigation | Negada | O quadro não troca a sua página por outra. |
| allow-modals | Negada | O quadro não abre caixa de diálogo sobre a sua página. |
| allow-pointer-lock | Negada | O quadro não prende o ponteiro do mouse. |
| allow-downloads | Negada | O 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
Incorporar no seu site
Coloque uma calculadora do site no seu blog com uma linha de código.
Ver como incorporarSalário líquido
Entenda os descontos e estime quanto pode receber no mês.
Calcular salário líquidoPorcentagem
Calcule uma porcentagem, uma proporção percentual ou a variação entre valores.
Calcular porcentagem