Email

Modelos de e-mail responsivos para usar a criatividade

Essa novidade permite adicionar, editar e armazenar seus modelos de e-mail no Mailgun sem complicação.
Imagem para Modelos de e-mail responsivos para usar a criatividade

O concurso foi encerrado. Agradecemos a todas as pessoas que participaram!

Lançamos um monte de recursos novos nas últimas semanas, e as novidades não param de chegar com os nossos novos modelos de e-mail! Essa novidade permite adicionar, editar e armazenar seus modelos de e-mail no Mailgun, para que você não precise procurar no código na próxima vez que for fazer uma pequena alteração. E isso já está disponível na nossa nova UI.

Poder reverter para versões anteriores de um modelo após a edição, facilitar a colaboração entre diferentes equipes de uma organização, simplificar chamadas de API e renderizações ao vivo são apenas algumas das formas como o novo recurso de modelos de e-mail facilita o seu dia a dia. E não teríamos esse recurso sem antes fazer uma pergunta:

Por que trabalhar com modelos de e-mail?

Na maioria dos casos, a sua empresa cria alguns modelos de e-mail para usar em diferentes tipos de e-mails, e você continua usando esses modelos por um bom tempo, atualizando ocasionalmente o logotipo, o endereço no rodapé ou pequenos elementos de design.

Há dois grandes desafios nisso. Quando você começa a criar modelos de e-mail, é uma grande dor de cabeça. Você tem que programar como se estivéssemos em 1999 e lidar com tabelas, CSS inline, CSS não suportado, além de pedir ajuda à equipe de desenvolvimento de aplicativos… e a lista não para por aí. E, mesmo assim, as peculiaridades de diferentes clientes de e-mail (Outlook, é com você mesmo!) podem acabar quebrando tudo.

Vamos voltar um minuto a 2014: a última vez em que fizemos um grande anúncio sobre modelos. Lançamos um conjunto de três modelos de e-mail responsivos de código aberto disponibilizado via repositório no Github, na esperança de tornar a criação de um modelo de e-mail do zero um pouco menos dolorosa.

Hoje, já não mexemos mais naqueles modelos de e-mail porque eles cumprem o seu papel, as pessoas gostam deles, os usam e eles não são nada feios. Porém, eles eram difíceis de encontrar se você não soubesse que existiam, e não resolviam o segundo grande desafio inerente aos modelos de e-mail, que é…

Como manter e atualizar seus modelos de e-mail ao longo do tempo e colaborar com outros departamentos, se necessário, sem precisar vasculhar sua base de código para encontrar exatamente o que você procura?

Quando começamos a construir a nova UI, sabíamos que esse seria o momento ideal para começar a resolver a questão dos modelos. Só precisávamos criar um repositório dentro do próprio Mailgun, para que você possa chamar facilmente um modelo sempre que quiser enviar um e-mail com um deles. Primeiro problema: resolvido.

Agora, será que conseguiríamos facilitar um pouco mais a edição de modelos existentes e adicionar mais alguns ao longo do caminho?

Expandindo nossos modelos de e-mail

O Mailgun já contava com modelos para alguns e-mails transacionais de uso geral, incluindo e-mails de ação, alertas por e-mail e e-mails de faturamento. Embora eles cobrissem o básico dos e-mails que a maioria dos remetentes usa, queríamos oferecer mais. O problema é que não somos exatamente especialistas em design de e-mail. Essa não é muito a nossa praia e, sinceramente, deveria ficar nas mãos de pessoas que amam fazer esses designs.

Então, decidimos nos unir à Email Uplers para preparar alguns novos designs mais ou menos na mesma época do lançamento da nossa UI. Já escreveram sobre acessibilidade em e-mails conosco antes, e ficamos muito felizes quando aceitaram criar o design desses novos modelos.

Com a parceria da Email Uplers, avançamos na criação de três novos modelos: recuperação de senha, confirmação de pedido e um modelo de newsletter.

Além disso, a equipe do Mailgun queria incluir gatos de alguma forma, só pela diversão. E foi assim que nasceram nossos mais recentes modelos.

Os novos modelos

Forgot password window for Meowgun

O e-mail de recuperação de senha, embora seja tecnicamente um e-mail de ação, é usado por quase todos os aplicativos e empresas. Com o design de um modelo criado pela Email Uplers especificamente para esse fim, você pode personalizar facilmente algumas cores, adicionar seu logotipo e pronto: agora é possível criar um e-mail para redefinir a senha com algumas alterações simples no modelo.

Cat themed example receipt

A criação do e-mail de confirmação de pedido funcionou de forma semelhante à do modelo de recuperação de senha. Um modelo de confirmação de pedido pode ser considerado uma ramificação de um e-mail de faturamento, mas você precisa ajustar um pouco o texto e o layout para ficar mais parecido com um recibo e uma confirmação de pedido em vez de uma fatura.

Newsletter called "The Weekly Purr" from Meowgun with cat image

Por fim, pedimos que a Email Uplers criasse o design de um modelo de newsletter. O Mailgun não tinha nenhum modelo focado em marketing antes, mas grande parte da nossa clientela já havia demonstrado interesse.

Esse modelo oferece um layout no formato de cartões para destacar publicações de blog ou outros conteúdos, permitindo montar uma newsletter completa e começar a enviar e-mails promocionais de um jeito fácil.

Como usar as APIs de modelo de e-mail

É bem provável que, em algum momento, você precise atualizar os modelos que criou. A vantagem é que você pode atualizar esses modelos no repositório, alterar qual versão está ativa ou criar várias versões para testes A/B.

Além disso, o Mailgun tem algumas chamadas de API diferentes para modelos que você pode usar:

  • GET para extrair todos os modelos existentes em um domínio – {{BASE_URL}}/{{mydomain}}/templates
  • GET para usar um único modelo – {{BASE_URL}}/{{mydomain}}/templates/{{template_name}}
  • GET para extrair todas as versões de um único modelo – {{BASE_URL}}/{{mydomain}}/templates/{{template_name}}/versions
  • PUT para atualizar um modelo – {{BASE_URL}}/{{mydomain}}/templates/{{template_name}}
  • POST para armazenar um modelo – {{BASE_URL}}/{{mydomain}}/templates
  • PUT para criar uma nova versão – {{BASE_URL}}/{{mydomain}}/templates/{{template_name}}

Editar qualquer um dos modelos em HTML é muito fácil na UI e, caso queira ver como o modelo vai ficar visualmente — é só renderizar uma amostra! Você pode fazer isso na própria UI ou enviar um e-mail de teste para você mesmo, se preferir esse método. No geral, a experiência permite que você crie modelos com toda a facilidade.

Pronto para começar?