🖥️ Como Incorporar Formulários da Trackmob no Seu Site

📌 Introdução

Incorporar (embedar) um formulário da Trackmob diretamente no site da ONG permite uma experiência mais fluida para os doadores, sem necessidade de redirecionamento para outra página.

Abaixo está o guia completo para configurar corretamente o formulário dentro do Fichas e no site.

🛠️ 1. Configurar Redimensionamento no Fichas

Para garantir que o formulário se ajuste dinamicamente ao tamanho da página onde será inserido, é necessário adicionar o seguinte código no campo "Script Genérico" do Fichas:

<script src="https://trackmob.colabore.org/scripts/embed-page.js"></script>

📌 Passos para adicionar o código no Fichas:
✔ Acesse o Fichas.
✔ Vá até Códigos Javascript > Script Genérico.

✔ Cole o código acima e salve as alterações.

🌍 2. Incorporar o Formulário no Site

Após configurar o Script Genérico no Fichas, use o código abaixo para adicionar o formulário no site da ONG:

<iframe id="trackmob-iframe-embed" src="https://ong.colabore.org/campanhaexemplo" 
width="600" height="400" border="none"></iframe>
<script src="https://trackmob.colabore.org/scripts/embed-client.js"></script>

📌 Atenção!
✔ Substitua https://ong.colabore.org/campanhaexemplo pela URL da sua campanha.
✔ Ajuste os valores de width e height conforme necessário.
✔ O script embed-client.js é essencial para a responsividade.

🎨 3. Customização para o Modelo de Página de 3 Passos

Caso a campanha utilize o modelo de página de 3 passos, é possível remover a imagem de fundo e exibir apenas o formulário, sem qualquer outro conteúdo.

Para isso, adicione este código no campo "Script Genérico" do Fichas:

<script>

$(document).ready(function() {
   var done = document.location.pathname.match(/\/done/)
    if(done) {
      var leftContent = $('body>div.row>div.left')
      var backgroundImageUrl = leftContent.css('background-image').slice(4, -1).replace(/"/g, "");
      leftContent.css('background-image', 'unset')
      var imgElement = $('<img src="'+backgroundImageUrl+'" style="width: 100%; height: 100%;">')
      $('div.content-text', leftContent).append(imgElement)
      leftContent.removeClass()
      leftContent.addClass('left')
      leftContent.prependTo('.right')
      leftContent.css('height', 'unset')
     $('div.content', leftContent).css('min-height', 'unset')
    }else{
     $('body>div.row>div.left').remove()
    }
    $('footer').remove()
    $('#form_title').remove()
});

</script>

📌 O que esse script faz?
✔ Remove qualquer outro conteúdo, deixando apenas o formulário.
✔ Remove a imagem de fundo da página.
✔ Mantém a imagem na Página de Obrigado após a doação.

✔ Oculta elementos desnecessários, como rodapé e título do formulário.

⚠️ Importante:
Este código funciona apenas para campanhas configuradas no modelo de página de 3 passos. Se sua campanha usa um modelo diferente, esse script pode não funcionar corretamente.

🚀 Conclusão

Com essa configuração, o formulário fica completamente integrado ao site da ONG, proporcionando:

✅ Melhor experiência do usuário, sem redirecionamento.
✅ Layout responsivo e ajustável ao design do site.
✅ Maior taxa de conversão por facilitar o processo de doação.

Caso precise de suporte na configuração, entre em contato com nossa equipe! 💙