Índice

1. Plano

2. Configurações

3. Planilhas

4. Segmentação

5. Contatos

6. Relatórios

7. Disparos

8. Observações gerais

9. Templates

10. Formulário para o website

O que é preciso para efetuar disparos?

1) Precisa de um plano

Somente clientes com planos de disparos conosco podem utilizar a ferramenta, ou seja, não é aberta para todos que possuem website.

- Não é possível navegar entre as abas sem ter a configuração preenchida.

2) Precisa de uma conta em CRM > Configurações

Os clientes precisam de uma identidade autorizada no Amazon SES para poder utilizar essa funcionalidade, assim ele terá o e-mail e os dados de SMTP para realizar seus disparos.

- Não é possível navegar entre as abas sem ter a configuração preenchida.

🚨 Alguns clientes podem utilizar o disparador do Interago, entretanto, não é uma prática que poderemos praticar em escalas maiores.

3) Planilhas

Este funcionalidade está em testes. Leia as informações úteis para utilizá-la de forma correta:

• Os dados aproveitados na planilha são nome e e-mail;
• Não é possível alterar contatos pela planilha;
• A segmentação na planilha não funciona. Para segmentar os contatos é necessário escolher entre as segmentações no campo de select;
• Os dados não são atualizados, somente inseridos. Então se o usuário é inserido e você quer trocar sua segmentação, precisa fazê-lo manualmente ou excluir os contatos e subir novamente;
• Deletar os contatos também deleta todo o seu histórico no sistema;
• Baixar os contatos e alterá-los para subir novamente não funcionará;
• O sistema não vai subir e-mails duplicados, vai ser exibido um aviso. Se você está subindo um contato para um segmento específico e ele está duplicado, você precisará inserir a segmentação manualmente; 

4) Segmentação

A segmentação é a separação dos contatos. Ao disparar, escolhe-se para quais segmentações será enviado. A função getSegmentedData ainda não funciona, mas ela está aí para futuramente personalizar os templates de e-mails de acordo com as segmentações.

5) Contatos 

É possível buscar por e-mail, nome e segmentação. 

6) Relatórios

Essa funcionalidade ainda está indisponível

7) Disparos

Os disparos são criados com as características:

Nome do disparo: Uso para controle interno;

Assunto A: Título no e-mail e que é exibido antes de abrí-lo. 

Assunto B: Idêntico a A;

Por que tem dois títulos? Porque o sistema enviará o assunto A para um grupo e o B para outro. O que tiver mais aberturas será disparado para os demais. 💡 Isso se chama Teste A/B e é uma grande vantagem da ferramenta.

Elementos do e-mail: Os elementos do e-mail são parágrafo, imagem e links. 🚨 Os links só funcionam para páginas que são artigos e possuem o rich snippet de artigo.

Destinatários: Para quem o e-mail será enviado. Os e-mails não são enviados duplicados, ou seja, se o mesmo contato estiver presente em vários segmentos, ele não receberá várias vezes.

Template: Precisa escolher 1 entre os templates. O conteúdo do e-mail será inserido dentro do template.

Enviar: Precisa que todos os itens anteriores estejam ok. Sempre faça envios de teste antes de enviar definitivamente. Todo teste utiliza TESTE A/B, então é necessário preencher quantos porcentos receberá o assunto A e B e depois de quantas horas o sistema coletará o vencedor para enviar à % restante.

✉️ Os disparos são checados pelo sistema a cada meia hora, então, mesmo que o agendamento seja por exemplo 9h43, ele será enviado 10h. O mesmo para o envio após os testes. Outro exemplo: configurado para enviar 14h03 e 3h para o teste - será enviado 14h30 os testes e 17h30 o sistema verá o assunto vencedor e começará enviar para os demais.

📈 É possível saber os e-mails enviados, abertos e clicados pois usamos serviços da AWS para isso como Amazon SES (Simple e-mail sender) e Amazon SNS (simple notification system). Então mesmo sem os relatórios, é possível consultar a performance específica por disparo.

8) Observações gerais

• as páginas dos e-mails são salvos em sua pasta no Interago, App/Site/ID_DO_SITE/mailingCRM/ID_CAMPANHA-ASSUNTO[A-B]-URL_COM_NOME-DD_MM_YYYY
• Se adicionar o script de visitas do Interago no template, funciona para coletar os dados das páginas;
• ❌ Todos os e-mails por lei precisam ter o link de cancelar inscrição, todos os sites possuem o mesmo link no Interago para remover sua inscrição;
• Não é possível ainda personalizar a inscrição, o cancelamento cancela tudo.
• 🚨Se o e-mail não é enviado por motivos diversos, o e-mail é inativado e não é possível enviar mais para ele. Essa norma de segurança é rígida para manter a integridade e reputação do domínio;

9) Templates

Cada template tem duas versões: versão e-mail e versão web. Todo e-mail ganha também uma página HTML com seu conteúdo.

O conteúdo é editado via código e é necessário conhecimentos técnicos para construí-los. Todos os elementos do editor de conteúdo precisam estar presentes no editor para estilizá-los. Conforme o exemplo:

Todo elemento precisa estar descrito no layout 01 vez, o parágrafo

[[P]]<p>[[PCONTENT]]</p>[[P]]

Onde PCONTENT é o conteúdo que será inserido vindo do conteúdo.

O elemento de imagem

[[IMG]]<a href="[[IMGLINK]]" alt="Link de [[IMGALT]]" style="max-width:100%;"><img src="[[IMGSRC]]" alt="[[IMGALT]]" /></a>[[IMG]]

Onde IMGLINK é o link para o qual o click na Imagem enviará; o IMGALT é o texto de legenda e IMGSRC é o caminho para o arquivo da imagem.

O elemento link, por sua vez:

[[LINK]]<a href="[[LINKHREF]]" alt="[[LINKTITLE]]" style="display:inline-flex; align-items:center; text-decoration:none;"><img src="[[LINKIMGSRC]]" alt="Imagem de [[LINKTITLE]]" style="max-width:120px; border-radius: 10px; margin: auto 20px auto 0;"/><div><h3>[[LINKTITLE]]</h3><p>[[LINKDESCRIPTION]]</p></div></a>[[LINK]]

Onde LINKHREF é o link para o qual o click enviará, LINKTITLE é o título do artigo, LINKDESCRIPTION é a descrição do artigo e LINKIMGSRC é a imagem do artigo. 

🚨 Os links só funcionam para artigos, especificamente que contém o rich snippet de artigo com title, description e imagem. Os dados são obtidos por data-scrappring automaticamente.

O Interago irá entende as [[ ]], tudo além dela é o estilo.

Abaixo, os layouts usados na Eco, a versão e-mail:

<!doctype html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>[[TITLE]]</title>  <style> /* ------------------------------------- GLOBAL RESETS ------------------------------------- */ img { border: none; -ms-interpolation-mode: bicubic; max-width: 100%;  /*height: fit-content;*/ } body { background-color: #f9f9f9; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 15px; line-height: 1.5; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } table { border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; } table td { font-family: sans-serif; font-size: 16px; vertical-align: top;  color: #333; text-align: left;  } /* ------------------------------------- BODY & CONTAINER ------------------------------------- */ .body { background-color: #f6f6f6; width: 100%; } /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */ .container { display: block; Margin: 0 auto !important; /* makes it centered */ max-width: 580px; padding: 10px; width: 580px;  background: white;  } /* This should also be a block element, so that it will fill 100% of the .container */ .content { box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 10px; } /* ------------------------------------- HEADER, FOOTER, MAIN ------------------------------------- */ .main { background: #ffffff; border-radius: 3px; width: 100%; } .wrapper { box-sizing: border-box; padding: 20px;  background-color: white;  } .content-block { padding-bottom: 10px; padding-top: 10px; } .footer { clear: both; margin-top: 10px; line-height:13px; text-align: center; width: 100%; } .footer td, .footer p, .footer span, .footer a { color: #666;  font-size: 10px; text-align: left;  } /* ------------------------------------- TYPOGRAPHY ------------------------------------- */ h1, h2, h3, h4 { color: #1398da; font-family: sans-serif; font-weight: 600; line-height: 1.5; font-size:17px; margin: 0; Margin-bottom: 10px;  font-weight:normal; }  h1 { font-size: 20px; text-align: left; font-weight: bold; line-height: 25px; } p, ul, ol { font-family: sans-serif; font-size: 15px; font-weight: normal; margin: 0; margin-bottom: 20px; margin-top: 20px; color:#6b6b6b;  } p li, ul li, ol li { list-style-position: inside; margin-left: 5px; }  /* ------------------------------------- BUTTONS ------------------------------------- */ .btn { box-sizing: border-box; width: 100%; } .btn > tbody > tr > td { padding-bottom: 15px; } .btn table { width: auto; } .btn table td { background-color: #ffffff; border-radius: 5px; text-align: left; } .btn a { background-color: #3797f1; border: solid 1px #3797f1; border-radius: 5px; box-sizing: border-box; color: white; cursor: pointer; display: inline-block; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-decoration: none; text-transform: capitalize; } .btn-primary table td { background-color: #3498db; } .btn-primary a { background-color: #3498db; border-color: #3498db; color: #0e9c19; } /* ------------------------------------- OTHER STYLES THAT MIGHT BE USEFUL ------------------------------------- */ .last { margin-bottom: 0; } .first { margin-top: 0; } .align-center { text-align: center; } .align-right { text-align: right; } .align-left { text-align: left; } .clear { clear: both; } .mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; } .preheader { color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0; } .powered-by a { text-decoration: none; } hr { border: 0; border-bottom: 1px solid #f6f6f6; Margin: 20px 0; } /* ------------------------------------- RESPONSIVE AND MOBILE FRIENDLY STYLES ------------------------------------- */ @media only screen and (max-width: 620px) { table[class=body] h1 { font-size: 28px !important; margin-bottom: 10px !important; } table[class=body] p, table[class=body] ul, table[class=body] ol, table[class=body] td, table[class=body] span, table[class=body] a { font-size: 16px !important; } table[class=body] .wrapper, table[class=body] .article { padding: 10px !important; } table[class=body] .content { padding: 0 !important; } table[class=body] .container { padding: 0 !important; width: 100% !important; } table[class=body] .main { border-left-width: 0 !important; border-radius: 0 !important; border-right-width: 0 !important; } table[class=body] .btn table { width: 100% !important; } table[class=body] .btn a { width: 100% !important; } table[class=body] .img-responsive { height: auto !important; max-width: 100% !important; width: auto !important; }} /* ------------------------------------- PRESERVE THESE STYLES IN THE HEAD ------------------------------------- */ @media all { .ExternalClass { width: 100%; } .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; } .apple-link a { color: inherit !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; text-decoration: none !important; } .btn-primary table td:hover { background-color: #34495e !important; } .btn-primary a:hover { background-color: #34495e !important; border-color: #34495e !important; } } </style> </head> <body class=""> <table border="0" cellpadding="0" cellspacing="0" class="body" style="padding-top:30px; padding-bottom:30px;"> <tr> <td></td> <td class="container" style="background: white; border-radius:5px; box-shadow: 0 5px 5px #eaeaea;"> <div class="content">

 <!-- START CENTERED WHITE CONTAINER --> <span class="preheader"></span> <table class="main">

 <!-- START MAIN CONTENT AREA --> <tr> <td class="wrapper"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="https://www.interago.com.br/App/Sites/40/mc/identidade%20visual%20-%20eco%20e%20interago.png" style="max-width:150px;"/><br /><br /> <h1>[[TITLE]]</h1> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td align="left"> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td>

 <p>Olá, este é um lembrete para avisá-lo que hoje é o dia de vencimento da mensalidade de seu website.</p>

 <p>Caso tenha alguma dúvida ou precise de ajuda em relação a seu carnê digital, por favor, fale conosco pelo <a href="mailto:junior@ecowebdesign.com.br">e-mail do depto financeiro</a> ou diretamente pelo Whatsapp, pelo link abaixo:</p>

 <center><a href="https://web.whatsapp.com/send?phone=5517992545634"><img src="https://cdn.interago.com.br/img/png/w_0_q_8/40/mc//Entre em contato e ganhe seu desconto" style="max-width:250px;"/></a></center>

 <p>Este é apenas um lembrete automático, obrigado e ótimos resultados. </p>

 <p></small>Por favor, desconsidere essa mensagem caso o pagamento já foi realizado.</small></p>

 [[P]] <p>[[PCONTENT]]</p> [[P]] [[IMG]] <a href="[[IMGLINK]]" alt="Link de [[IMGALT]]" style="max-width:100%;"> <img src="[[IMGSRC]]" alt="[[IMGALT]]" /> </a> [[IMG]] [[LINK]] <a href="[[LINKHREF]]" alt="[[LINKTITLE]]" style="display:inline-flex; align-items:center; text-decoration:none;"> <img src="[[LINKIMGSRC]]" alt="Imagem de [[LINKTITLE]]" style="max-width:120px; border-radius: 10px; margin: auto 20px auto 0;"/> <div> <h3>[[LINKTITLE]]</h3> <p>[[LINKDESCRIPTION]]</p> </div> </a> [[LINK]] </td> </tr> </tbody> </table> </td>  </tr> </tbody> </table>  </td> </tr> </table> </td> </tr>

 <!-- END MAIN CONTENT AREA --> </table>

 <!-- START FOOTER --> <div class="footer"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td class="content-block"> <center>Você está recebendo este e-mail por ter concedido e consentido por nosso website ou ao adquirir nossos serviços como cliente, parceiro ou equipe.<br /><strong>Eco Webdesign . </strong> Av. México 688 Jd Paulista . CNPJ 12.768.802/0001-25<br /><br /><img src="https://www.interago.com.br/App/Templates/default/img/interago_logo_mail.png?v=logo" style="width:100px;"/><br /> Interago . A plataforma que disparou este e-mail. <a href="https://www.interago.com.br/site" target="_blank">Saiba mais</a>.<br /><br />

 <a href="[[WEBVERSION]]" target="_blank">Versão web</a> · <a href="{{UNSUBSCRIBELINK}}" target="_blank">Cancelar inscrição</a></center> </td> </tr> </table> </div> <!-- END FOOTER --> <!-- END CENTERED WHITE CONTAINER --> </div>  </td> <td></td> </tr> </table> </body></html>

e a versão web

<!doctype html> <html> <head> <meta name="viewport" content="width=device-width" /> <meta charset="UTF-8"> <title>[[TITLE]]</title>  <style> /* ------------------------------------- GLOBAL RESETS ------------------------------------- */ img { border: none; -ms-interpolation-mode: bicubic; max-width: 100%;  /*height: fit-content;*/ } body { background-color: #f9f9f9; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 15px; line-height: 1.5; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } table { border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; } table td { font-family: sans-serif; font-size: 16px; vertical-align: top;  color: #333; text-align: left;  } /* ------------------------------------- BODY & CONTAINER ------------------------------------- */ .body { background-color: #f6f6f6; width: 100%; } /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */ .container { display: block; Margin: 0 auto !important; /* makes it centered */ max-width: 580px; padding: 10px; width: 580px;  background: white;  } /* This should also be a block element, so that it will fill 100% of the .container */ .content { box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 10px; } /* ------------------------------------- HEADER, FOOTER, MAIN ------------------------------------- */ .main { background: #ffffff; border-radius: 3px; width: 100%; } .wrapper { box-sizing: border-box; padding: 20px;  background-color: white;  } .content-block { padding-bottom: 10px; padding-top: 10px; } .footer { clear: both; margin-top: 10px; line-height:13px; text-align: center; width: 100%; } .footer td, .footer p, .footer span, .footer a { color: #666;  font-size: 10px; text-align: left;  } /* ------------------------------------- TYPOGRAPHY ------------------------------------- */ h1, h2, h3, h4 { color: #1398da; font-family: sans-serif; font-weight: 600; line-height: 1.5; font-size:17px; margin: 0; Margin-bottom: 10px;  font-weight:normal; }  h1 { font-size: 20px; text-align: left; font-weight: bold; line-height: 25px; } p, ul, ol { font-family: sans-serif; font-size: 15px; font-weight: normal; margin: 0; margin-bottom: 20px; margin-top: 20px; color:#6b6b6b;  } p li, ul li, ol li { list-style-position: inside; margin-left: 5px; }  /* ------------------------------------- BUTTONS ------------------------------------- */ .btn { box-sizing: border-box; width: 100%; } .btn > tbody > tr > td { padding-bottom: 15px; } .btn table { width: auto; } .btn table td { background-color: #ffffff; border-radius: 5px; text-align: left; } .btn a { background-color: #3797f1; border: solid 1px #3797f1; border-radius: 5px; box-sizing: border-box; color: white; cursor: pointer; display: inline-block; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-decoration: none; text-transform: capitalize; } .btn-primary table td { background-color: #3498db; } .btn-primary a { background-color: #3498db; border-color: #3498db; color: #0e9c19; } /* ------------------------------------- OTHER STYLES THAT MIGHT BE USEFUL ------------------------------------- */ .last { margin-bottom: 0; } .first { margin-top: 0; } .align-center { text-align: center; } .align-right { text-align: right; } .align-left { text-align: left; } .clear { clear: both; } .mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; } .preheader { color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0; } .powered-by a { text-decoration: none; } hr { border: 0; border-bottom: 1px solid #f6f6f6; Margin: 20px 0; } /* ------------------------------------- RESPONSIVE AND MOBILE FRIENDLY STYLES ------------------------------------- */ @media only screen and (max-width: 620px) { table[class=body] h1 { font-size: 28px !important; margin-bottom: 10px !important; } table[class=body] p, table[class=body] ul, table[class=body] ol, table[class=body] td, table[class=body] span, table[class=body] a { font-size: 16px !important; } table[class=body] .wrapper, table[class=body] .article { padding: 10px !important; } table[class=body] .content { padding: 0 !important; } table[class=body] .container { padding: 0 !important; width: 100% !important; } table[class=body] .main { border-left-width: 0 !important; border-radius: 0 !important; border-right-width: 0 !important; } table[class=body] .btn table { width: 100% !important; } table[class=body] .btn a { width: 100% !important; } table[class=body] .img-responsive { height: auto !important; max-width: 100% !important; width: auto !important; }} /* ------------------------------------- PRESERVE THESE STYLES IN THE HEAD ------------------------------------- */ @media all { .ExternalClass { width: 100%; } .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; } .apple-link a { color: inherit !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; text-decoration: none !important; } .btn-primary table td:hover { background-color: #34495e !important; } .btn-primary a:hover { background-color: #34495e !important; border-color: #34495e !important; } } </style> </head> <body class=""> <table border="0" cellpadding="0" cellspacing="0" class="body" style="padding-top:30px; padding-bottom:30px;"> <tr> <td></td> <td class="container" style="background: white; border-radius:5px; box-shadow: 0 5px 5px #eaeaea;"> <div class="content">

 <!-- START CENTERED WHITE CONTAINER --> <span class="preheader"></span> <table class="main">

 <!-- START MAIN CONTENT AREA --> <tr> <td class="wrapper"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="https://www.interago.com.br/App/Sites/40/mc/identidade%20visual%20-%20eco%20e%20interago.png" style="max-width:150px;"/><br /><br /> <h1>[[TITLE]]</h1> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td align="left"> <table border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td>

 <p>Olá, este é um lembrete para avisá-lo que hoje é o dia de vencimento da mensalidade de seu website.</p>

 <p>Caso tenha alguma dúvida ou precise de ajuda em relação a seu carnê digital, por favor, fale conosco pelo <a href="mailto:junior@ecowebdesign.com.br">e-mail do depto financeiro</a> ou diretamente pelo Whatsapp, pelo link abaixo:</p>

 <center><a href="https://web.whatsapp.com/send?phone=5517992545634"><img src="https://cdn.interago.com.br/img/png/w_0_q_8/40/mc//Entre em contato e ganhe seu desconto" style="max-width:250px;"/></a></center>

 <p>Este é apenas um lembrete automático, obrigado e ótimos resultados. </p>

 <p></small>Por favor, desconsidere essa mensagem caso o pagamento já foi realizado.</small></p>

 [[P]] <p>[[PCONTENT]]</p> [[P]] [[IMG]] <a href="[[IMGLINK]]" alt="Link de [[IMGALT]]" style="max-width:100%;"> <img src="[[IMGSRC]]" alt="[[IMGALT]]" /> </a> [[IMG]] [[LINK]] <a href="[[LINKHREF]]" alt="[[LINKTITLE]]" style="display:inline-flex; align-items:center; text-decoration:none;"> <img src="[[LINKIMGSRC]]" alt="Imagem de [[LINKTITLE]]" style="max-width:120px; border-radius: 10px; margin: auto 20px auto 0;"/> <div> <h3>[[LINKTITLE]]</h3> <p>[[LINKDESCRIPTION]]</p> </div> </a> [[LINK]] </td> </tr> </tbody> </table> </td>  </tr> </tbody> </table>  </td> </tr> </table> </td> </tr>

 <!-- END MAIN CONTENT AREA --> </table>

 <!-- START FOOTER --> <div class="footer"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td class="content-block"> <center>Você está recebendo este e-mail por ter concedido e consentido por nosso website ou ao adquirir nossos serviços como cliente, parceiro ou equipe.<br /><strong>Eco Webdesign . </strong> Av. México 688 Jd Paulista . CNPJ 12.768.802/0001-25<br /><br /><img src="https://www.interago.com.br/App/Templates/default/img/interago_logo_mail.png?v=logo" style="width:100px;"/><br /> Interago . A plataforma que disparou este e-mail. <a href="https://www.interago.com.br/site" target="_blank">Saiba mais</a>.<br /><br />

  </td> </tr> </table> </div> <!-- END FOOTER --> <!-- END CENTERED WHITE CONTAINER --> </div>  </td> <td></td> </tr> </table> </body></html>

✍🏼Variáveis personalizadas

Por enquanto, só o link de cancelamento é uma variável que se altera de e-mail para e-mail. Ela precisa ser chamado em um <a href="AQUI" da seguinte forma:

<a href="{{UNSUBSCRIBELINK}}" target="_blank">Cancelar inscrição</a>

10) Formulário inserido no website

O formulário a ser inserido no website é gerado via script, conforme o exemplo abaixo que está contido no Interago, entretanto, é muito importante entender alguns itens, como:

• 🚨 Não pode em nenhuma circunstância ser um formulário normal usando <form>, <button> ou submit, precisa ser seguro e, preferencialmente, com várias etapas. O exemplo do site da Eco contém uma conta que precisa resolver e um campo anti-spam, por exemplo;
• O formulário só capta o e-mail, então não é possível adicionar outros campos;
• Novamente, adicione etapas para evitar spam, como apertar para confirmar o envio em um click em algo que não é um botão;
• 🏷️ o contato é inserido em uma segmentação, sempre. Por isso para o formulário funcionar é necessário ir em CRM > Segmentação > Editar a segmentação desejada > Copiar o token em verde;
• O formulário não envia nenhuma mensagem de bem-vindo.

Exemplo de código usado no site da Eco, está no bloco do footer 🚨 ; NÃO MUDE ESTE CÓDIGO POR QUESTÕES DE PRATICIDADE OU PARA RESOLVER UM PROBLEMA PONTUAL - me envie necessidades de alteração para otimizar o mesmo código.

<div class="row"><div class="col-12 newsletterInteragoForm" data-info="cDlqbHZzVERZN0R2UmlnQzk1OW9lcUFYMWQySVdGK3c1SjZQYmMwK2YxQklzcStpcm9aMksvcFlmLytwRW91Tg==" style="margin-bottom:50px;"> <script> //get first element of .newsletterInteragoForm var newsletterInteragoForm = document.querySelector('.newsletterInteragoForm'); //create input with id newsletterInteragoFormInput var input = document.createElement('input'); input.setAttribute('type', 'email'); input.setAttribute('id', 'newsletterInteragoFormInput'); //add .formInput class input.classList.add('formInput'); //set placeholder to "Digite seu e-mail" input.setAttribute('placeholder', 'Digite seu e-mail'); //add display inline-flex input.style.display = 'inline-flex'; //add padding top and bottom 10px; input.style.margin = '10px 0';

 //create a spam protection input var inputSpam = document.createElement('input'); inputSpam.setAttribute('type', 'text'); inputSpam.setAttribute('id', 'newsletterInteragoFormInputSpam'); inputSpam.setAttribute('name', 'newsletterInteragoFormInputSpam'); inputSpam.setAttribute('style', 'display:none');  //create a span to show the message var spanMsg = document.createElement('span'); spanMsg.setAttribute('id', 'newsletterInteragoFormReturnMessage'); //display block spanMsg.style.display = 'block'; //margin bottom 5px spanMsg.style.marginBottom = '5px';

 //create a button var button = document.createElement('div'); button.setAttribute('id', 'newsletterInteragoFormButton'); //add class btnDefault button.classList.add('btnDefault'); //set style width 100px button.setAttribute('style', 'width:100px'); //add display inline-flex button.style.display = 'inline-flex'; //add cursor pointer button.style.cursor = 'pointer';

 //create a label var label = document.createElement('label'); label.setAttribute('for', 'newsletterInteragoFormInput'); label.innerHTML = '👋🏻 Que tal receber nossas novidades e promoções por e-mail?'; //add .cFontWhite class label.classList.add('cFontWhite'); 

 //create a span var span = document.createElement('span'); span.innerHTML = 'Cadastrar';

 //append input, button, label and span to the form newsletterInteragoForm.appendChild(label); newsletterInteragoForm.appendChild(input); newsletterInteragoForm.appendChild(inputSpam); newsletterInteragoForm.appendChild(spanMsg); newsletterInteragoForm.appendChild(button); button.appendChild(span);

 //remove enter key submit newsletterInteragoForm.addEventListener('keypress', function (e) { if (e.key === 'Enter') { e.preventDefault(); } });

 //add event listener to the form newsletterInteragoFormButton.addEventListener('click', function (e) {

 spanMsg.innerHTML = '<span style="color:white;">Ok... dando uma olhadinha...</span>';

 console.log('trying to submit'); e.preventDefault(); //get the input value var email = document.getElementById('newsletterInteragoFormInput').value; //get the spam input value var spam = document.getElementById('newsletterInteragoFormInputSpam').value; //get the button var button = document.getElementById('newsletterInteragoFormButton'); //get the span var span = document.querySelector('.newsletterInteragoForm span');

 //if the spam input is empty if (spam === '') { //if the email is not empty if (email !== '') {

 //check if email is a valid email var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/; //if not return if (!emailRegex.test(email)) { //hide Cadastrar button.style.display = 'none'; console.log('E-mail inválido'); //show message in red and put a red border on input that desapear after 3 seconds spanMsg.innerHTML = 'E-mail inválido'; spanMsg.style.color = 'red'; input.style.border = '1px solid red'; setTimeout(function () { //show cadastrar button.style.display = 'inline-flex'; spanMsg.innerHTML = ''; spanMsg.style.color = 'black'; input.style.border = '1px solid #000'; }, 3000); return; }

 //insert a math simple question to prevent spam var math = Math.floor(Math.random() * 10) + 1; var math2 = Math.floor(Math.random() * 10) + 1; var mathResult = math + math2; var mathQuestion = prompt('Para sua segurança, responda quanto é ' + math + ' + ' + math2 + '?'); //if the answer is not the same as the result return if (mathResult !== parseInt(mathQuestion)) { console.log('Erro ao cadastrar'); return; }

 //send the email to the server var xhr = new XMLHttpRequest(); xhr.open('POST', 'https://www.interago.com.br/Backend/Crm/tag/proccessFormContact.php', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //semd e-mail and newsletterInteragoForm data-info xhr.send('email=' + email + '&newsletterInteragoForm=' + newsletterInteragoForm.getAttribute('data-info')); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); let data = xhr.responseText; if(data == '') { console.log('error'); } else if(data == 0) { console.log('erro ao cadastrar'); spanMsg.innerHTML = '<span style="color:red;">❌ Erro ao cadastrar</span>'; //after 3s remove the message setTimeout(function () { spanMsg.innerHTML = ''; }, 3000); } else if(data == 1) { console.log('cadastro feito com sucesso'); spanMsg.innerHTML = '<span style="color:white;">✅ Cadastro feito com sucesso! Obrigado pela confiança e esperamos que goste de nossos recados.</span>'; //remove button document.getElementById('newsletterInteragoFormButton').style.display = 'none'; } else if(data == 2) { console.log('e-mail já cadastrado'); spanMsg.innerHTML = '<span style="color:white;">Seu e-mail já está em nossa base, obrigado por isso 😄</span>'; //after 3s remove the message setTimeout(function () { spanMsg.innerHTML = ''; }, 3000); } } } } else { spanMsg.innerHTML = '<span style="color:white;">Ops! Preencha o campo de e-mail</span>'; //show butotn newsletterInteragoFormButton.display = 'block'; setTimeout(function () { spanMsg.innerHTML = ''; }, 3000); } } }); </script>