Formulário embutível e a página de embed da campanha
Como embutir o formulário de doação da Doativa em qualquer site: a página de embed, o código do iframe e o ajuste automático da altura.
Conferido no app em 28 de outubro de 20263 min de leituraAtualizado em 28 de outubro de 2026
Resposta rápida
A página de embed da campanha pode ser embutida em qualquer site com um iframe. O código gerado no painel já traz um script que ajusta a altura do quadro por postMessage. Hoje não existe API pública.
Em resumo
- A página de embed fica em https://www.doativa.com/embed/<endereço-da-organização>/<endereço-da-campanha>, sem parâmetros de URL.
- O quadro tem largura máxima de 448 px e mostra a confirmação dentro dele depois da doação.
- A altura se ajusta por uma mensagem postMessage do tipo doativa:altura.
- Não existe API pública hoje; ela vem depois.
Passo a passo
Copie o código no painel
Em Campanhas, use "Colocar no meu site" e "Copiar o código do formulário". Quem não programa pode seguir doativa.com/ajuda/formulario-no-seu-site.
Cole o código no HTML da página
Troque <endereço-da-organização> e <endereço-da-campanha> pelos nomes reais, se for montar o código à mão.
Confira o formulário dentro do site
O iframe mostra a capa, o nome da campanha e da organização com o logo, a barra de progresso (quando há meta) e o formulário de doação.
A página de embed
O endereço tem dois segmentos: https://www.doativa.com/embed/<endereço-da-organização>/<endereço-da-campanha>. Ele não aceita parâmetros de URL.
A página mostra a capa, o nome da campanha e da organização com o logo, a barra de progresso quando há meta e o formulário de doação. A largura máxima é de 448 px. Depois de doar, a pessoa vê a confirmação dentro do próprio quadro.
O código gerado no painel
Este é o código que o painel gera, com <endereço-da-organização> e <endereço-da-campanha> no lugar dos nomes:
<iframe
id="doativa-<endereço-da-campanha>"
src="https://www.doativa.com/embed/<endereço-da-organização>/<endereço-da-campanha>"
width="100%"
height="720"
frameborder="0"
scrolling="no"
style="border: none; border-radius: 16px; max-width: 480px; display: block;">
</iframe>
<script>
(function () {
var ORIGEM = "https://www.doativa.com";
var quadro = document.getElementById("doativa-<endereço-da-campanha>");
if (!quadro) return;
window.addEventListener("message", function (evento) {
if (evento.origin !== ORIGEM) return;
if (evento.source !== quadro.contentWindow) return;
var dado = evento.data;
if (!dado || dado.tipo !== "doativa:altura") return;
var altura = parseInt(dado.altura, 10);
if (!altura || altura < 120 || altura > 4000) return;
quadro.style.height = altura + "px";
});
})();
</script>Altura automática e segurança
A página de embed manda { tipo: 'doativa:altura', altura } por postMessage sempre que muda de tamanho. O script confere a origem e o quadro e só aceita alturas entre 120 e 4000 px. Sem o script, o quadro fica com 720 px.
A rota /embed pode ser embutida em qualquer site, por causa do cabeçalho Content-Security-Policy: frame-ancestors *. As outras páginas do painel não podem ser embutidas.
Alternativas e o que ainda não existe
Você pode usar o "Botão de doar", um link <a> estilizado que abre https://www.doativa.com/<endereço-da-campanha> em outra aba, ou o link https://www.doativa.com/formulario/<endereço-da-campanha>.
Não existe API pública hoje; ela vem depois. Para identificar quem divulgou um link, veja doativa.com/ajuda/dev-parametros-do-link.
Perguntas
A página de embed aceita parâmetros na URL?
Não. O endereço tem só os dois segmentos: a organização e a campanha.
O que acontece se eu não colocar o script?
O quadro fica com a altura fixa de 720 px, sem se ajustar ao conteúdo.
Posso embutir outras páginas da Doativa?
A rota /embed é a feita para isso, e é a única com a garantia de funcionar em qualquer site. As páginas do painel são bloqueadas para embutir.
Existe API pública?
Hoje não. Ela vem depois.
Leia também
Ainda com dúvida? Fale com o Suporte
Cada passo deste artigo foi seguido no app por um robô antes de publicar.