Ir para conteúdo principal

O que são botões de e‑mail e como adicioná‑los às suas campanhas

Saiba o que é necessário para criar botões de e‑mail eficazes. Desde o tamanho da fonte e CTAs até a programação HTML, veja a seguir o que você precisa para criar botões de e‑mail para suas campanhas.

O marketing por e-mail oferece um alto ROI e permite que você envolva seu público nos momentos certos. Assim você pode aumentar as vendas e expandir seu negócio com uma estratégia robusta de marketing por e-mail. Mas como saber se as campanhas estão funcionando?

Quando mede a eficácia dos seus e-mails, você provavelmente analisa vários indicadores-chave de desempenho (KPIs), incluindo taxa de abertura e taxa de cliques (CTRs). A taxa de abertura informa quantas pessoas abriram seus e-mails, enquanto a taxa de cliques (CTR) ajuda a determinar se os clientes estão agindo no seu e-mail.

Sem uma chamada para ação (CTA) eficaz, os clientes não sabem o que fazer depois de abrir o seu e-mail. Os botões de e-mail podem incentivar os assinantes a agir, trazendo-os de volta ao seu site, onde podem converter.

Mas o que são botões de e-mail e como você pode adicioná-los aos e-mails para torná-los mais eficazes?

O que é um botão de e-mail?

Um botão de e-mail é um botão de CTA no seu e-mail que informa aos usuários o que fazer em seguida. Quando alguém abre o e-mail, recebe vários conteúdos.

No entanto, o principal objetivo da sua campanha de marketing por e-mail é trazer os clientes de volta ao seu site para agir. Por exemplo, uma empresa de e-commerce pode promover um determinado produto para aumentar as vendas por meio de uma campanha de e-mail segmentada.

Existem algumas maneiras diferentes de criar um botão de e-mail, incluindo aqueles com imagens de fundo e tamanhos e pesos de fonte diferentes. Um dos tipos mais populares de botões de e-mail é o botão à prova de balas.

Ao contrário dos botões criados com imagens, eles são desenvolvidos com código HTML e CSS, possibilitando que o botão seja exibido em vários clientes de e-mail.

A vantagem mais significativa dos botões à prova de falhas é que eles aparecem nos e-mails mesmo quando as imagens estão desativadas. Os botões à prova de falhas são cruciais para criar e-mails à prova de falhas que podem aumentar os cliques e o envolvimento em suas campanhas de marketing por e-mail.

Embora esses botões sejam programados, você pode editar o modelo HTML para atualizar o tamanho ou a espessura da fonte, a imagem de fundo e as cores para criar botões de e-mail em HTML verdadeiramente únicos e à prova de falhas.

Além de serem exibidos em todos os clientes, mesmo quando as imagens estão desativadas, botões HTML carregam mais rápido, tornando seu e-mail mais eficaz, pois os usuários verão seu CTA e saberão o que fazer em seguida. Mas, claro, os botões de e-mail HTML são menos únicos do que os botões baseados em imagens, porque você não pode criar seu botão em ferramentas de design como o Photoshop ou o Canva.

Benefícios de usar botões de e-mail em suas campanhas

Seja usando botões de e-mail HTML baseados em imagens ou à prova de balas, a vantagem mais significativa é aumentar o ROI e a CTR. Os botões de e-mail incentivam os assinantes a agir, permitindo que você destaque seu CTA para atrair mais atenção.

Os usuários não farão nada se o seu e-mail não contiver uma CTA forte. A alternativa a um botão de e-mail é o texto com hiperlink, que pode confundir os assinantes porque o texto pode não transmitir o que devem esperar.

Os botões de e-mail são extremamente visuais. Quando alguém abre o e-mail, é provável que seja uma das primeiras coisas que chamem a atenção, levando o usuário a agir, fazer uma compra, acessar seu site ou receber uma oferta. Um botão bem projetado pode aumentar a probabilidade de os clientes executarem uma ação em seus e-mails, tornando-os mais eficazes no geral.

Infelizmente, se os CTAs contiverem imagens de fundo ou forem eles mesmos imagens, muitos usuários poderão nunca vê-los se os clientes de e-mail estiverem com as imagens desativadas. Portanto os botões de e-mail são cruciais para o sucesso das suas campanhas e para aumentar os cliques.

Considere como a maioria das pessoas lê e-mails. Como quando leem blogs, a maioria das pessoas procura informações pertinentes em vez de ler cada palavra e examinar todas as imagens. Seu botão de e-mail se destaca do restante do conteúdo por vários motivos, incluindo o tamanho e o peso da fonte.

Normalmente os botões são maiores, com fontes mais fortes para chamar a atenção do usuário. Além disso, apresentam elementos de design que os destacam de textos e imagens. Consequentemente, os CTAs de botões de e-mail são muito mais eficazes para chamar a atenção dos usuários, facilitando a compreensão do que você quer que eles façam.

Como adicionar um botão de e-mail em HTML e CSS

Há várias maneiras de adicionar um botão de e-mail em HTML e CSS e você não precisa ser um desenvolvedor de sites ou programador experiente para garantir que seus botões de e-mail sejam à prova de falhas. Lembre-se: as duas maneiras mais populares de adicionar botões de e-mail são com imagens com links ou HTML.

O Mailchimp facilita o design do seu botão de e-mail, inclusive com alteração da fonte com blocos de conteúdo, possibilitando que você arraste e solte para criar botões com facilidade.

Botões de e-mail em HTML

Os botões de e-mail HTML podem ser completos ou de largura fixa, dependendo de como você deseja que o botão fique próximo ao restante do layout do e-mail.

Para criar botões de e-mail em HTML, você precisará codificar seu modelo de e-mail de forma personalizada usando o seguinte código:

'''< table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#505050; border:1px solid #353535; border-radius:5px;">

Como você pode ver, neste caso o seu botão diria "Leia mais". Você pode também alterar a fonte para combinar com a identidade visual da sua marca e as fontes do site conforme desejar. Claro, a melhor fonte para e-mail dependerá da identidade da sua marca, mas recomendamos mantê-la simples.

Botões de e-mail adaptativos

Os botões de e-mail adaptativos se ajustarão à largura do e-mail, dependendo do texto dentro da mesma célula. Esses botões não têm largura definida no código porque seguirão a mesma largura do texto. O código para botões de e-mail adaptativos é algo como:

'''

<td align="center" valign="middle" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-.5px; line-height:150%; padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px;">
  <a href="http://www.mailchimp.com/blog/" target="_blank" style="color:#FFFFFF; text-decoration:none;">Leia mais histórias no nosso blog</a>
</td>

'''

Felizmente você não precisa saber programar para criar botões de e-mail perfeitos para suas campanhas de marketing por e-mail. Em vez disso, basta arrastar e soltar um bloco de conteúdo em um modelo existente e editar o HTML como achar melhor.

Estratégias de posicionamento de botões de e-mail

A localização da sua chamada para ação determina se os assinantes vão notá-la e agir, portanto o posicionamento estratégico é crucial para maximizar Cliques e conversões. Acertar isso significa pensar em como as pessoas realmente leem e-mails e o que procuram quando abrem sua mensagem.

Acima da dobra vs. abaixo da dobra

Acima da dobra refere-se ao conteúdo visível sem rolagem, enquanto abaixo da dobra exige que os usuários rolem para baixo para vê-lo. Colocar o botão principal do seu e-mail acima da dobra garante visibilidade máxima, pois muitos assinantes não percorrerão todo o e-mail.

No entanto, não ignore totalmente o posicionamento abaixo da dobra. Se você tem conteúdo mais longo que gera valor e interesse, um botão bem posicionado na parte inferior pode capturar assinantes que leram sua mensagem completa.

Repetição de CTAs ao longo do e-mail

O uso de vários botões ao longo do e-mail oferece aos assinantes mais oportunidades de agir sem serem insistentes. Essa estratégia funciona particularmente bem para e-mails mais longos, onde você pode perder leitores pelo caminho.

Distribua os seus botões naturalmente pelo conteúdo, garantindo que cada um pareça relevante para o texto ao redor, em vez posicioná-los aleatoriamente. Lembre-se de manter a mesma decoração de texto e estilo uniformes em todos os botões para terem aparência coesa e profissional.

Adequação do posicionamento do botão para a intenção do usuário

O posicionamento do seu botão deve corresponder ao que os assinantes esperam com base no conteúdo e na finalidade do seu e-mail. Se você estiver anunciando uma promoção, coloque o botão "Compre agora" imediatamente após destacar os detalhes do desconto.

Para conteúdo informativo, posicione sua chamada para ação depois de fornecer informações valiosas e os assinantes estiverem prontos para a próxima etapa. Pense na jornada do cliente: onde em seu e-mail faz mais sentido alguém querer clicar no seu site ou na página de destino?

Erros e acertos nos botões de e-mail

Para criar botões de e-mail eficazes não basta apenas torná-los bonitos; eles precisam funcionar perfeitamente em diferentes clientes de e-mail e dispositivos e levar seus assinantes à ação desejada.

Um bom botão pode ser a diferença entre fazer um assinante clicar no seu site e excluir seu e-mail. Veja a seguir o que você precisa saber para acertar nos botões de e-mail sempre.

Não use imagens

Como mencionamos, nem todas as imagens são exibidas em todos os clientes de e-mail. Portanto muitos dos seus assinantes podem não ver os botões de CTA do seu e-mail se as imagens estiverem desativadas.

Embora o uso de imagens como botões possa tornar seus botões únicos e destacados, é mais importante que eles apareçam para todos os seus assinantes se você quiser que eles executem uma ação.

Escolha as fontes certas

Assim como as imagens, nem todas as fontes são exibidas corretamente em todos os clientes de e-mail. Portanto você deve escolher fontes universalmente reconhecidas. Você pode usar um gerador de fonte para ajudá-lo a encontrar a fonte certa para suas campanhas de marketing por e-mail, garantindo que se destaquem e sejam exibidas corretamente.

Além disso, você deve considerar o tamanho e o peso da fonte, o que afetará a possibilidade de o botão se destacar do resto do conteúdo do e-mail.

Considere o destino

Quando utiliza botões de e-mail, você tem um objetivo específico em mente. Por exemplo, empresas de e-commerce que promovem um produto para aumentar as vendas provavelmente terão um botão de e-mail que diz "Compre agora" após destacar o produto no restante do conteúdo.

Se o seu botão não levar à página do produto, os assinantes ficarão confusos e sairão do site. Portanto você deve sempre definir as expectativas corretas para onde os clientes irão quando clicarem no seu botão.

Escreva uma CTA forte

Os elementos de design do seu botão de e-mail são cruciais para ajudar a se destacar, mas a CTA é essencial para definir expectativas e incentivar os assinantes a tomarem uma ação.

Sua CTA deve ter apenas algumas palavras para indicar aos clientes o que fazer. Algo simples como "Compre agora" ou "Conheça a coleção" pode efetivamente informar aos clientes o que devem esperar quando clicarem no botão.

Atenção ao estilo dos botões

O projeto visual do botão afeta a aparência e o convite ao clique. Use cores contrastantes que se destaquem do fundo do e-mail e faça com que os botões tenham bordas, preenchimento e efeitos adequados de pouso de mouse.

Ao configurar o CSS, procure usar propriedades de exibição de bloco em linha para garantir que seus botões mantenham o formato em clientes de e-mail variados. Sua propriedade text-align deve centralizar o texto do botão para criar uma aparência limpa e profissional.

Teste os botões de e-mail antes de enviar

Mesmo o botão de e-mail mais bem projetado não trará resultados se não funcionar corretamente quando os assinantes tentarem clicar.

Os testes são sua proteção de segurança contra erros embaraçosos, como links quebrados, botões que não são exibidos corretamente ou CTAs que ficam ótimos em desktops, mas são impossíveis de tocar em dispositivos móveis.

Profissionais de marketing por e-mail inteligentes nunca enviam campanhas sem testes completos, pois uma falha técnica pode comprometer o desempenho de toda a campanha.

Prévia em dispositivos e clientes

O botão de e-mail pode parecer perfeito no seu criador de e-mails, mas isso não garante que ele funcionará em todos os lugares onde seus assinantes o verão. Teste os e-mails nos principais clientes de e-mail, como Gmail, Outlook, Apple Mail e Yahoo Mail, para detectar quaisquer problemas de exibição antes de chegarem ao público.

Não se esqueça dos dispositivos móveis. Use ferramentas como o Mailchimp para ver exatamente como seus botões são apresentados em diversas plataformas ou simplesmente envie e-mails de teste para você mesmo em vários dispositivos e aplicativos de e-mail.

Use testes A/B para posicionamento e texto do CTA

O teste A/B mostra o que realmente funciona com seu público específico. Experimente testar com posicionamentos variados de botões.

Você também pode testar textos variados nos botões para ver se "Compre agora" tem melhor desempenho do que "Conheça a coleção" com seus assinantes. Mantenha os testes focados alterando somente um elemento de cada vez e confirme se você tem dados suficientes para tirar conclusões significativas antes de declarar um vencedor.

Verifique o rastreamento de links e a acessibilidade

Antes de clicar em enviar, clique em todos os botões do seu e-mail para garantir que os links realmente funcionem e levem ao destino certo. Configure parâmetros de rastreamento adequados para medir quais botões estão sendo clicados e gerando conversões.

Não se esqueça da acessibilidade. Seus botões devem ser utilizáveis por pessoas com deficiência, o que significa incluir texto alternativo, garantir contraste de cores suficiente e garantir que eles possam ser navegados com os controles do teclado.

Esses pequenos detalhes podem parecer insignificantes, mas podem ter impacto considerável tanto na sua entregabilidade quanto na reputação da sua marca.

Aproveite o poder de uma forte chamada para ação (CTA)

Uma CTA forte de marketing por e-mail envolve mais do que apenas as palavras que você usa para incentivar a ação os usuários. A simples inclusão de um botão pode chamar a atenção para sua CTA, estabelecer expectativas e ajudá-los a entender as etapas seguintes.

Os botões são a melhor maneira de mostrar aos assinantes o que fazer em seguida, pois se destacam do restante do conteúdo do e-mail. O Mailchimp facilita o design de botões de e-mail que incentivem cliques e vendas. Com o design certo, você pode melhorar a eficácia das suas campanhas.


Principais conclusões

  • Botões de e-mail bem projetados aumentam as taxas de cliques e conversões, deixando claro o que você deseja que os assinantes façam em seguida.
  • Os botões em HTML são exibidos em todos os clientes de e-mail, mesmo quando as imagens estão desativadas, garantindo que seus CTAs fiquem sempre visíveis para os assinantes.
  • Posicione o botão principal acima da dobra para obter visibilidade máxima, mas repita os CTAs ao longo dos e-mails mais longos para capturar os leitores em estágios variados.
  • Sempre faça uma prévia dos botões em dispositivos e clientes de e-mail diferentes e, em seguida, use testes A/B para otimizar o posicionamento, o texto e o design para ter melhor desempenho.

Compartilhar este artigo