Como formatar a aparência dos links no HTML do email marketing

Formatar links num arquivo HTML é algo muito simples de fazer. Agora, formatar links de um email marketing é algo mais trabalhoso. Isso, claro, devido às inúmeras diferenças de renderização apresentadas pelos diversos programas de email que existem por aí.

Vamos começar, então, pelo básico.

Alterando a cor do link

Para não usar aquela cor azul padrão de links, você pode formatar seus textos usando CSS, que é suportado pelos principais programas de email. No exemplo a seguir, temos um texto com link que está dentro de uma célula de tabela:

Perceba que a cor foi definida tanto na tag a de link quanto na tag td onde ela está inserida. Em email marketing, infelizmente, precisamos trabalhar com esse tipo de redundância devido às diferenças de renderização de HTML apresentadas pelos programas de email. O Outlook.com, por exemplo, não mostra a cor correta do link quando ela está definida apenas na tag a, e não no seu elemento pai – aquele onde ela está imediatamente dentro.

Alterando o sublinhado do link

Além da cor, a tag de link também deixa o texto sublinhado por padrão. Se você quiser removê-lo, use o código apresentado neste exemplo:

O valor none para a propriedade CSS text-decoration remove o sublinhado do link. O valor underline para esta mesma propriedade deixa o link com o sublinhado. Além destes dois valores, você pode testar outros efeitos visuais usando os valores blink, linethrough e overline da propriedade text-decoration.

Links em datas, endereços e telefones nos tablets e smartphones

Se você costuma conferir a visualização de seus templates de email marketing nos programas de email antes de enviar – e se você inclui as aplicações mobile nessa rotina de testes -, deve ter percebido que alguns trechos de texto aparecem com link, mesmo que você não os tenha criado.

Esses links aparecem em textos escritos no formato de data, endereço e telefone para mostrar ao leitor que ele pode interagir com essas informações dentro do email.

Se o leitor tocar no link de uma data, por exemplo, o app padrão de calendário será aberto para que ele crie um evento no dia em questão. Se o link tocado for de um endereço, o app padrão de mapas será aberto para que o leitor localize a região no mapa ou trace uma rota. Já o link de telefone permite uma ligação imediata para aquele número.

Não se pode negar que são recursos de usabilidade muito práticos, mas é compreensível que você queira remover esses links ou, ao menos, deixá-los com a mesma aparência dos demais links de seu email marketing.

Na verdade, modificar a aparência desses novos links é a única coisa que podemos fazer, já que os textos continuarão a ser clicáveis para que o leitor interaja com outras aplicações de seu tablet ou smartphone.

Como os programas de email mobile automaticamente colocam link nesses trechos de texto que podem interagir com outros apps, o que precisamos fazer é redefinir a aparência desse link. Como já sabemos que haverá uma tag de link ao redor desses textos, nós criaremos uma classe para aplicar ao elemento pai desse texto, ou seja, a tag que irá conter o link.

Se seu texto que vai virar link estiver dentro de uma tag td, vamos criar, no head do HTML, uma classe para esse elemento td e indicar que todo link que estiver dentro desse elemento deve ter uma determinada aparência. Assim:

Esse trecho de código deve ser incluído dentro de head no HTML. Faça isso sem medo porque todas as aplicações de email mobile suportam CSS incorporadas no cabeçalho do HTML.

Depois, formate com esta classe os textos do seu email marketing que, muito provavelmente, se tornarão links nos programas de email mobile (telefones, endereços e datas):

Caso você tenha links de cores diferentes em seu email marketing, basta criar quantas classes forem necessárias, uma para cada aparência que o texto precisar ter. Então pode ter as classes .specialColor2, .specialColor3 etc. Você não precisa usar o nome specialColor que exemplifiquei aqui, pode nomear a sua classe da forma que quiser! O importante é que, na definição dela no head do HTML, você indique a tag a logo depois, para indicar que todo link que estiver dentro do elemento nomeado com a classe deve ter aquela aparência específica.

Recomendo que você SEMPRE faça testes nos programas de email mobile antes de enviar o email marketing ao mailing real, porque alguns programas de email podem reconhecer algum trecho alfanumérico qualquer como link de endereço ou telefone. Isso pode acontecer com números de CPF e CNPJ, por exemplo.

Se seu email marketing tiver um trecho de texto assim e você notar que ele foi transformado em link em algum programa de email, recomendo que já o envolva, no seu HTML, dentro de uma tag de link a, mas com destino falso no href. E, claro, aplique a classe ao elemento pai onde estiver esse texto para camuflar sua aparência de link.

Dessa forma, o máximo que vai acontecer é algum destinatário passar o mouse sobre esse trecho de texto e perceber que ali tem um link porque o seu cursor irá mudar para o ícone da “mãozinha” característico, mas ao clicar nada acontecerá.

O link falso a que me refiro é colocar o valor # dentro da propriedade href da tag de link. Assim:

O sublinhado que continua azul mesmo com o texto em outra cor

Talvez você já tenha visto links em emails em HTML que se apresentam dessa forma:

Trecho de texto de um email marketing que apresenta um link com texto em uma cor e o sublinhado azul

A cor do texto é vermelha, mas o traço do sublinhado continua com aquela cor azul característica de links. Isso pode acontecer em qualquer aplicação de email, seja ela mobile, web ou desktop. É uma falha do mecanismo de renderização do programa de email e pode ser corrigida apenas repetindo a declaração de cor em um elemento span dentro da tag de link a.

No lugar da tag span, também pode ser utilizada a tag font. Apenas atente para a versão de HTML que você estiver usando no Doctype, pois o elemento font já não faz parte das versões mais modernas da linguagem HTML.

Link para opt-out automático do email marketing

Se você contratou uma plataforma de envios para realizar suas ações de email marketing, ela já deve inserir automaticamente no seu template, no momento do envio, os links de preview e de opt-out. Porém, como é uma inserção automática, ela tem um aparência padrão definida pela plataforma de envios, que pode não estar de acordo com o layout do seu email marketing.

Em algumas plataformas, você pode alterar a aparência desses links e até mesmo o texto proposto pelo sistema, de forma que fiquem totalmente de acordo com o seu design.
Para isso, você precisa conhecer quais são os parâmetros dos links de preview e de opt-out utilizados pela plataforma para poder inseri-los e formatá-los manualmente no HTML do email marketing.

Esses parâmetros são informados pela área técnica ou de suporte da plataforma de envios em questão. Eles podem ser uma tag própria, similar a uma tag do HTML, ou um parâmetro da tag link do HTML mesmo, dessa forma:

Esse padrão de link de preview da mensagem na web é da plataforma de envios Zenmail.

No momento do envio do email marketing, esse endereço estranho dentro do href será substituído por um link normal e funcional, pois a plataforma de envios substitui o parâmetro pelo link correspondente. Cada pessoa recebe um link único de preview e de opt-out.

Links no email marketing para endereço de email

Quando você tem um endereço de email escrito no seu email marketing, ele vai ser transformado em link por qualquer programa de email que o destinatário usar para abrir a mensagem. Porém, o link terá aquela aparência padrão, em azul escuro e sublinhado.

Se você não quiser essa aparência para seu link de email, melhor já preparar a formatação correta no HTML do seu email marketing, antes de enviá-lo ao mailing. Para isso, usa-se a mesma tag de link a da linguagem HTML, mas em vez do endereço no href começar com https:, vamos usar o URL scheme mailto:, dessa forma:

Este endereço de email contém um link para uma tela de composição de uma nova mensagem no programa de email padrão do aparelho do destinatário (computador, tablet, notebook etc), já com este endereço preenchido no campo de destinatário.

Link de telefone

Anteriormente, comentei que os textos contidos no email marketing que podem interagir com apps do tablet ou do smartphone do destinatário, são automaticamente transformados em link, como é o caso de endereços, datas e telefones.

Se você quiser deixar o seu HTML já com o link de telefone formatado na aparência que preferir, pode fazer isso direto na tag de link.

Note que aqui também nós mudamos o URL scheme de https: para tel:.

Existe uma lista dos principais URL schemes existentes, mas qualquer desenvolvedor pode criar o seu também. Isso é útil para quem tem um aplicativo de smartphone ou tablet, por exemplo, poder criar links que abrem esses apps em suas áreas específicas. O email marketing desses aplicativos pode conter links que abrem não apenas páginas web, mas o próprio app instalado no aparelho, em alguma seção como Configurações, Plano, Dashboard etc.

Claro que existe um ponto negativo, que é a maneira como alguns servidores de email podem lidar com esses URL schemes personalizados, que não são convencionais. Alguns servidores com configurações antispam mais conservadoras podem classificar a mensagem como spam ou suspeita de phishing só pela presença desse link “estranho”.

Links no email marketing para abrir o WhatsApp

Existem duas maneiras de integrar o email marketing com o WhatsApp.

Uma é quando o remetente do email marketing oferece atendimento ao público por WhatsApp, e deseja oferecer, no email, uma forma de as pessoas entrem em contato direto pelo WhatsApp. Outra é quando o remetente quer permitir que seus destinatários compartilhem, com seus amigos, certos conteúdos que foram enviados no email marketing, como um artigo de uma newsletter, por exemplo.

Link para entrar em contato com um número específico do WhatsApp

Quem oferece atendimento ao consumidor ou cliente por WhatsApp pode colocar, no email marketing, um link para as pessoas entrarem em contato direto pelo app.

Se o leitor do email marketing estiver no smartphone, o app do WhatsApp é aberto com uma mensagem já preenchida (que você pode pré-definir), com tudo pronto só para a pessoa apertar o botão de enviar a mensagem. Já se o destinatário visualizar o email marketing pelo computador ou pelo tablet, o WhatsApp Web será aberto.

Para isso, insira esse endereço no href da tag de link a:

https://api.whatsapp.com/send?phone=5511975184849&text=Quero%20saber%20sobre%20mais%20sobre%20isso

Nessa URL, apenas troque “DDD” pelo DDD correto do seu número de WhatsApp (11 se for de São Paulo, 21 se for do Rio de Janeiro etc) e o “Telefone” pelo seu número de celular que tem o atendimento via WhatsApp.

Todos os números (DDD e telefone) precisam estar juntos, sem espaço e sem caracteres especiais entre eles, e o o DDI do Brasil (55) também precisa permanecer, como já deixei pronto no exemplo acima.

O parâmetro text dessa URL contém o texto “Quero saber mais sobre isso”. Essa será a mensagem padrão que aparecerá pronta para o leitor enviar para seu WhatsApp, mas ela é alterável tanto por você, que pode enviar seu email marketing com outra mensagem pronta nesse parâmetro do link, quanto pelo destinatário, que ao abrir o WhatsApp verá essa mensagem na caixa de texto e poderá mudar alguma coisa nela antes de enviar.

Note, porém, que o texto escrito no parâmetro está no formato de URL-encoded. Esse formato muda acentos, espaços e demais caracteres especiais que existam no seu texto padrão, de forma que eles funcionem na URL e sejam exibidos corretamente no WhatsApp.

Link para permitir que os destinatários compartilhem conteúdos do email marketing via WhatsApp

A outra possibilidade é permitir que quem recebe seu email marketing compartilhe algum conteúdo recebido nesse email com um amigo, pelo WhatsApp. Nesse caso, basta não incluir, na URL, o parâmetro que contém o número de telefone. Na ausência desse número, o WhatsApp vai mostrar a mensagem padrão indicada no parâmetro do texto e, em seguida, pedir para a pessoa selecionar o contato para quem deseja enviar o conteúdo.

https://wa.me/?text=Veja%20esse%20artigo%20interessante

Quem clicar na URL acima, terá o WhastApp app ou web aberto – dependendo do que tiver em seu aparelho – numa tela que mostra que a mensagem “Veja esse artigo interessante” está prestes a ser enviada. O próximo passo é a pessoa selecionar, dentre seus contatos, aquele para quem ela quer enviar esse conteúdo.

Mas esse exemplo contém só um texto simples a ser enviado. Se você quiser enviar uma URL junto a esse texto padrão, precisará usar um recurso que transforma o texto e a URL num formato URL-encoded. Como exemplo, vou transformar esse conteúdo em URL-encoded:

Veja esse artigo interessante: https://templateria.com.br/blog/templates/formate-os-links-seu-email-marketing/

O resultado URL-encoded é esse:

Então, esse é o valor que devo colocar no parâmetro text do link do WhatsApp, que ficará assim:

Link em imagem

Colocar link em uma imagem é muito simples. Assim como acontece com o link em texto, a tag de link a do HTML precisa envolver o conteúdo da imagem. Fica dessa maneira:

Os principais cuidados que temos aqui é colocar sempre o atributo border=0 na tag de imagem, pois na falta dele, alguns programas de email podem colocar uma borda azul ao redor da imagem para indicar que ela tem um link. O atributo alt é o texto que explica o conteúdo da imagem, um recurso importantíssimo de acessibilidade, e o style="display:block;" é para evitar que os webmails adicionem um espaço ao redor da imagem.

Entenda mais sobre quando usar display:block nas imagens do email marketing.

Certo? Então, bom email marketing pra você! 🙂

Juliana Padron

QUEM ESCREVEU ESTE CONTEÚDO?

Juliana Padron

Co-fundadora da Templateria e do Portal Email Marketing, Juliana trabalha com email marketing há mais de 15 anos e é especialista na criação e desenvolvimento em HTML de templates de email marketing responsivos (e em resolver os problemas do Outlook para exibir emails em HTML).

Últimos Posts