6 exemplos de conteúdo interativo em e-mails

Os e-mails interativos são a tendência de design número 1 no marketing de e-mail para 2019.

Agora que os e-mails do Google AMP 4 são amplamente discutidos, quase todos esquecemos que essa não é a única maneira de criar e-mails interativos.

Neste guia, mostraremos como incorporar os elementos interativos mais populares em e-mails com o Stripo.

Tipos e uso de interatividade em e-mails

Os elementos interativos que apresentaremos aqui são renderizados perfeitamente em todos os clientes de e-mail - se a interatividade não for suportada por um cliente de e-mail, ela será substituída por um fallback totalmente seguro para a Web.

• Botão animado em CSS para e-mails promocionais;

• formulários para e-mails e questionários acionados por eventos;

• carrossel de imagens para exibir alguns itens do produto em uma tela em e-mails promocionais;

• efeito rollover para exibir itens de produtos de diferentes ângulos e seus recursos em e-mails promocionais;

• acordeão para todos os tipos de campanhas para tornar os newsletters interativos por e-mail mais compactos;

• vídeos para apresentar melhor novos produtos, parabenizar os clientes em férias e explicar aos iniciantes como usar nossa ferramenta.

Não mencionamos cronômetros de contagem regressiva, personalização e outros elementos que ajudam a atualizar nossos assinantes com as últimas notícias do Instagram e gráficos integrados, pois são elementos de contexto em e-mails. O conteúdo é dinâmico, mas as alterações são feitas automaticamente - nenhuma interação é necessária.

Vamos mostrar como criar um e-mail interativo e depois testar cada um deles.

Importante notar:

É sabido que o e-mail on Acid e o Litmus são as melhores ferramentas para testar e-mails. Mas eles não vão nos ajudar agora, pois fornecem apenas capturas de tela. No entanto, ainda é razoável usá-los, pois eles mostram se os blocos foram removidos ou não.

A única solução para verificar se um controle deslizante funciona, por assim dizer, ou se os destinatários apenas veem uma imagem estática, é testar seu e-mail interativo enviando-o a todos os clientes de e-mail com os quais você e seus amigos / colegas têm contas, para todos os computadores e dispositivos móveis possíveis dispositivos. Quanto mais dispositivos melhor.

Aqui está a lista dos clientes de e-mail mais usados em março de 2019, de acordo com o Litmus.

Nota: você também deve considerar a combinação de dispositivos e clientes de e-mail.

1. Botão animado com CSS

Botões animados com CSS. Todos nós usamos botões CTA em e-mails, por que não animar um quando os destinatários passam o mouse ou clicam nele? Isso chama a atenção deles, adiciona um tom de gamificação e ajuda a cumprir o design da sua marca se os botões do seu site tiverem animações com CSS.

Anteriormente, nossos usuários precisavam adicionar um elemento do código CSS por meio do editor de código HTML para animar botões. O que não foi fácil.

Em 15 de abril, lançamos um novo recurso - botão Interativo, que muda de cor quando você passa o cursor do mouse sobre ele.

Do jeito que é feito:

• Arraste um bloco de botão básico para o template de e-mail em HTML com o qual você está trabalhando;

• Toque no bloco de botões do seu template para ativar o painel de configurações;

• Defina o estilo do texto, como fonte, seu tipo e tamanho da fonte;

• Defina a cor do botão, cor da fonte;

Nesta captura de tela, a “cor do botão” representa a cor principal, a cor do botão selecionado representa a cor que os usuários veem quando você passa o mouse sobre ela e a cor do texto representa a cor da fonte. Se você não deseja o efeito de foco nos seus e-mails, basta aplicar ao botão destacado a mesma cor que você definiu como a principal;

• pronto.

2. Formulários de pesquisa e questionários

Em nosso blog, já mencionamos que a compra de um cliente deve ser seguida por um convite para responder uma pesquisa.

Tipos de convites para pesquisas:

    a) Uma pesquisa com uma única pergunta - não é interativa, mas é totalmente segura na Web

Apesar de não ser um design interativo de e-mail, coloquei ele aqui, pois ainda requer algumas ações dos destinatários.

Para uma pesquisa de uma única pergunta em newsletters, a melhor solução é colocar o próprio questionário no corpo do e-mail.

A maneira como é feito:

• a empresa inseriu 5 imagens horizontalmente;

• adicionou 5 links individuais a cada imagem.

Os clientes clicaram na imagem que correspondia à sua opinião.

Um bom serviço de envio de e-mails deve fornecer um relatório detalhado sobre quantas vezes cada imagem foi clicada.

A maneira como é feito:

• a empresa inseriu 4 imagens verticalmente;

• adicionou 4 links de URL para cada imagem.

Mais uma vez, os clientes clicaram na imagem que correspondia à sua opinião.

    b) uma pesquisa com várias perguntas - incorporada a um template de e-mail interativo

Se você precisar fazer várias perguntas, crie um formulário de questionário e incorpore-o ao newsletter interativo por e-mail, para que seus clientes não precisem realizar ações supérfluas - eles podem votar diretamente nos e-mails.

A maneira como é feito:

• você precisa criar um formulário de questionário

Minha opção preferida é o Google Forms;

• envie para o seu endereço de e-mail

ao enviar o formulário do Google à sua maneira, escolha "enviar por e-mail", digite seu endereço de e-mail, altere o assunto e a mensagem, se necessário, pois todos os destinatários o verão e marque a opção "incluir formulário no e-mail";

• copie o código de incorporação

abra o formulário na sua caixa de entrada, clique com o botão direito do mouse no formulário e selecione "inspecionar". Procure a tabela linha de preenchimento de célula align = ”center”. Uma vez selecionada, pressione “CTRL + C” (não clique com o botão direito do mouse e copie);

• adicione o novo bloco HTML ao seu template de newsletter;

• insira o código de incorporação no editor de código;

você verá “Insira seu código HTML no editor”, clique nele e o editor de código será aberto. Em vez de "Inserir seu ..." entre as tags <p> e </p> , você deve colocar seu código de incorporação;

• pronto.

Por favor, assista ao GIF para ver todo o processo de "incorporar pesquisa".

Nota: os formulários de pesquisa incorporados em nossos templates de newsletter são exibidos corretamente em todos os tipos de dispositivos. MAS! As caixas de seleção são clicáveis apenas nos computadores e nos dispositivos móveis, não.

Portanto, ao abrir e-mails de pesquisas em celulares e tablets, seus usuários terão o link para o próprio Formulário do Google (lembre-se, o assunto do formulário que você especificou? Este é o nome do link. - Ele é adicionado automaticamente. Os destinatários podem clicar sem medo no link para enviar suas respostas).

No meu caso, diz "Promoções de Natal".

Clientes de e-mail que passaram no teste com sucesso:

•  Gmail, AOL, Yahoo! Mail, and Rambler.ru in Google Chrome, Mozilla Firefox, Safari, Opera. Funciona apenas na área de trabalho

Essa maneira de incorporar formulários de pesquisa é totalmente segura para a Web.

Nota: atualmente, o Stripo.email é o único criador de templates de e-mail que permite incorporar o Google Forms dessa maneira.

Alguns criadores de templates de e-mail não permitem que você trabalhe com código HTML aberto, outros permitem que você faça isso, mas o código de incorporação é alterado no editor e os formulários de pesquisa têm uma aparência estranha, mesmo em dispositivos desktop.

A maneira como alguns ESPs transferem o Google Forms incorporado:

1. eSputnik - as caixas de seleção são clicáveis nos desktops, e nos celulares, os destinatários têm o link;

2. MailChimp - não mostra as caixas de seleção;

3. O Campaign Monitor oferece seu próprio bloco básico de "pesquisa".

A alternativa

Se, por algum motivo, o formulário de pesquisa, incorporado a um boletim informativo interativo por e-mail não funcionar no seu serviço de envio ou o seu criador de e-mails não permitir a inserção de formulários do Google, tente este método:

Insira um botão de CTA com o link que leva seus clientes à página de destino do seu site quando você já tiver preenchido um formulário de pesquisa.

A maneira como é feito:

• crie uma página de quiz ou incorpore um formulário do Google ao seu site;

• adicione um botão de CTA no seu e-mail;

• Insira o link no botão.

Nota: para testar se os links estão funcionando corretamente, basta enviar um e-mail de teste para si mesmo. Os links nunca funcionam em editores de templates.

3. Efeito rollover de imagens em e-mails

Usando o efeito rollover, você pode fornecer aos destinatários um close de alguns produtos, exibi-los de diferentes ângulos, ocultar detalhes do produto por trás de seu snippet e brincar com os destinatários quando for razoável.

Stripo.email oferece um efeito rollover de imagens totalmente seguro para a Web, exibido corretamente na maioria dos clientes de e-mail, e nosso código exclusivo é suportado por todos os ESPs , incluindo o MailChimp.

Importante notar:

O efeito rollover destina-se apenas a dispositivos desktop. Nos dispositivos móveis, os destinatários verão apenas o primeiro quadro.

Do jeito que é feito:

• adicione uma imagem ao seu template;

• no painel de configurações, ative o botão "efeito rollover";

• adicione a segunda imagem;

• pronto!

Clientes de e-mail que passaram no teste com sucesso:

• Yahoo! Mail;

• AOL;

• Thunderbird;

• Mail.ru;

• Gmail;

• Apple Mail;

• Outlook 2003;

• Outlook Web;

• Outlook para Mac.

Veja ideias, recomendações e requisitos para as imagens nesta postagem do blog.

4. Carrossel de imagens em e-mails

O carrossel de imagens é uma maneira muito interessante de exibir algumas fotos dos itens do produto em uma tela.

Deseja promover os itens com preços e descrições? Prepare-os antes com qualquer editor de fotos (o Stripo oferece o seu incorporado) - coloque essas informações diretamente nas imagens. Assim, todos os snippets de seu produto nos carrosséis / controle deslizante de imagem / rollover serão únicos e informativos. Dessa forma, você definitivamente pode atrair usuários inativos e pelo menos convencê-los a clicar nos botões ou até mesmo convertê-los em clientes.

A maneira como é feito:

• Construa o carrossel com uma ferramenta adequada. Eu usei Freshinbox;

• Copie o código de incorporação;

• No Stripo, arraste o bloco básico HTML e solte-o no seu template de e-mail;

• Clique duas vezes nele para ativar o painel de configurações;

• Insira o código de incorporação.

Portanto, se você decidir criar um e-mail interativo com carrossel de imagens, precisará de uma ferramenta de terceiros para criar esse conteúdo interativo ou usar nossos templates prontos de newsletter interativo com carrossel de imagens já construídos - você só precisará substituir as imagens e colar suas URLs.

Infelizmente, apenas alguns ESPs suportam esse tipo de interatividade em e-ails: por exemplo, o MailChimp não suporta interatividade em e-mails.

Clientes de e-mail que passaram no teste com sucesso:

• Apple Mail;

• Apple iPhone;

• Apple iPad;

• Yahoo! Mail.

Outros usuários veem a primeira imagem que você definiu.

5. Acordeão

Esse tipo de interatividade nos e-mails está se tornando popular entre os profissionais de marketing. Por que nós amamos isso? Porque eles servem para ocultar textos longos atrás de marcadores, ou seja, para economizar espaço precioso em seus e-mails em celulares.

Você dificilmente pode encontrar exemplos de e-mail interativos, porque apenas algumas empresas são corajosas o suficiente para usar (leia, o editor de e-mail está tecnicamente pronto para fornecer) acordeões em e-mails.

Não encontrei o código de incorporação on-line que se encaixaria bem em nosso editor, mas esse template de e-mail Stripo já possui acordeão incorporado. Tudo o que você precisa fazer é substituir os links, alterar os nomes das guias e trabalhar no design de e-mail interativo.

Do jeito que é feito:

• Abra este template de e-mail interativo no editor;

• Clique duas vezes em qualquer item do acordeão que você precisa editar;

• Você pode fazer todas as alterações no texto, fonte, tamanho da fonte etc. no painel de configurações ou no código, como mostrado abaixo:

Para informações mais detalhadas sobre as duas alternativas, leia essa postagem do blog.

6. Vídeos incorporados em e-mails

Vídeos em e-mails podem aumentar o CTR em até 85%. E 65% dos destinatários têm maior probabilidade de comprar de você quando tiverem a oportunidade de assistir a um vídeo sobre os produtos que você promove em e-mails.

Existem quatro maneiras de adicionar vídeos em e-mails:

• usando um vídeo do Youtube

O cliente de e-mail mostra apenas a imagem em miniatura - no Stripo, você pode substituí-la por qualquer imagem que desejar;

• carregando seu vídeo no formato mp4

Ao fazer isso, você cria um e-mail interativo; consequentemente, o vídeo é reproduzido diretamente nas caixas de entrada dos destinatários;

• usando nossa combinação de código

Se um cliente de e-mail suportar interatividade, os usuários assistirão ao vídeo na caixa de entrada. Se a interatividade não for suportada pelo cliente de e-mail, os clientes serão direcionados ao Youtube para ver o vídeo;

• usando uma ferramenta de terceiros

Ferramentas como Viwomail.com ou Liveclicker fornecem o código de incorporação.

Eles, de fato, permitem incorporar vídeos em tempo real.

Nota: para evitar violações de direitos autorais, é altamente recomendável usar apenas os vídeos que você tem o direito de compartilhar.

Upload de vídeo MP4

Enviei um vídeo MP4 para um site de terceiros e inseri esse link no bloco HTML. Isto é o que eu planejava ver:

Nosso próprio vídeo no formato mp4 foi exibido e até reproduzido no Outlook 2011 e 2016.

Já os clientes do Gmail e da Apple não o mostraram. Que pena...

Não é a melhor solução para engajar seus clientes.

Usando nossa combinação de código

Nossos desenvolvedores nos ajudaram e escreveram a seguinte combinação de código:

<video poster="https://tlr.stripocdn.email/content/guids/CABINET_f98886e36d3d2f7b2dc5420f03cfb022/images/20091519918813053.png" controls="controls" width="100%" height="176"><source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"><a href="https://www.youtube.com/watch?v=8gqqANVWdjU"><img src="https://tlr.stripocdn.email/content/guids/CABINET_f98886e36d3d2f7b2dc5420f03cfb022/images/20091519918813053.png" width="320" height="176"></a></video>

Os dois primeiros links são os principais. E os dois últimos, que começam com <a href>, são os links alternativos.</a> Aqui usamos dois vídeos - um do Youtube, e outro foi enviado para outro site porque precisávamos de um link extra - e uma imagem, como a principal e a alternativa. Basta tirar uma captura de tela do seu vídeo no Youtube.

Quando os links principais não funcionam, nossos clientes verão a opção de fallback.

Para a pureza do experimento, usamos propositalmente duas imagens diferentes para podermos distinguir qual link e imagem funcionavam.

Clientes de e-mail que passaram no teste com sucesso:

• o iPhone 7 reproduziu nossos vídeos;

• O Gmail mostrou a imagem de visualização. Somente quando cliquei nela, o cliente de e-mail mostrou o link que me levou ao Youtube;

• O Outlook 2011 reproduziu meu vídeo.

Nota: ao adicionar uma imagem de visualização alternativa, coloque o botão de reprodução sobre ela. Caso contrário, como seus leitores saberiam que há um vídeo incorporado e que deveriam clicar na imagem?

Alternativo

• Você pode usar esse código seguro como uma alternativa;

• Modifique nosso template que já contém esse código. Você só precisará substituir os links:

• Ou adicione o bloco de vídeo no seu template e insira o link nele. O sistema adicionará automaticamente o nome alternativo, o botão de reprodução e a imagem de visualização. No Stripo, você pode até substituir a miniatura por uma personalizada - e ainda localizamos o botão de reprodução sobre ela. Por que recomendamos fazer isso quando o link leva ao Youtube ou Vimeo? Como todos os clientes de e-mail a exibem corretamente, não há nenhuma proibição e ou surpresa.

Resumo

Newsletter interativos por e-mail dependem de cada cliente de e-mail. A maioria dos clientes ainda vê os elementos interativos como imagens estáticas ou não os vê.

Com Stripo, fazemos o possível para fornecer aos nossos usuários fiéis alternativas seguras da Web para elementos interativos devido ao nosso método de layout exclusivo - agora os e-mails interativos funcionam nas caixas de entrada de seus destinatários.

Breves dicas e truques

• O design interativo de e-mail deve ser simples, pois o foco está no elemento interativo;

• Sempre(!) envie um e-mail de teste para todos os seus endereços e dispositivos de e-mail, pois essa é a única maneira de verificar se os elementos interativos realmente funcionam ou são apenas imagens estáticas.

Sinceramente, desejo que você crie apenas newsletters eficazes e funcionais com nossos templates de e-mail interativos.

Se você tiver alguma dúvida, não hesite em perguntar via Facebook ou e-mail.