CRM E-mail Marketing

Guia de uso e atualização de nossa ferramenta de disparos de e-mails

Léo

#Formulários gerais

Postado: 12/03/2024 às 09h06

Í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:


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


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:


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>





Você também pode gostar de ler

Adicionando contatos no Mailing da Eco WD

Em 19/02/2025 às 09h50 - Atualizado em 19/02/2025 às 09h52

Léo

· #forms

Formulário dinâmico do Interago inserido por JS - Atualizado

Em 25/03/2022 às 00h26 - Atualizado em 03/04/2024 às 06h29

Léo

· #forms

Script de conversão de formulário para mensagem de WhatsApp

Em 22/07/2022 às 10h58 - Atualizado em 16/08/2022 às 09h09

Ramon Domenick

· #forms