Tutorial: como criar uma imagem personalizada no e-mail

Os e-mails personalizados de hoje estão repletos de conteúdo dinâmico. Basta dar uma olhada em quantos e-mails em sua caixa de entrada incluem conteúdo personalizado feito sob medida para você. Isso pode ser tão simples quanto ver seu primeiro nome até as recomendações de produtos, anúncios e até imagens completas mais avançadas!

Este artigo apareceu originalmente em nosso blog irmão Workshop de design de email

Graças a uma série de ferramentas online, adicionar conteúdo dinâmico às nossas campanhas de email está se tornando mais fácil e acessível, como veremos neste workshop de design de email. Você pode realmente pegar qualquer imagem de suas campanhas de e-mail e transformá-la em uma imagem dinâmica e personalizada. Seus assinantes verão seu próprio nome mostrado, conforme mostrado abaixo com esta imagem de feliz aniversário da NiftyImages:

Exemplo prático: um e-mail de feliz aniversário

Vamos receber este e-mail de feliz aniversário da Stitch Fix , uma marca de estilo online.

Os aniversários são uma grande oportunidade de se conectar a um nível pessoal com seus assinantes. Eles vão adorar saber que você está pensando neles e ficarão felizes em ver uma oferta pessoal em seu dia especial. Se você ainda não está enviando um e-mail de aniversário personalizado , agora é a hora de começar, já que e-mails de aniversário personalizados alcançam uma taxa de cliques 179% maior em comparação com e-mails promocionais regulares.

Vamos pegar a imagem estática do bolo de aniversário do e-mail do Stitch Fix e transformá-la em uma imagem dinâmica e personalizada que mostrará o primeiro nome do seu assinante. Esta é a aparência do e-mail concluído em minha caixa de entrada com meu nome, Kelly:

Vamos começar com o workshop e acompanhar nosso tutorial em vídeo:

[post_video_embed url = ”https://www.youtube.com/embed/gYooNhQX57c” height = ”” largura = ””]

Etapa 1: Projete seu e-mail no editor de arrastar e soltar

Vamos recriar o layout do e-mail de feliz aniversário do Stitch Fix no editor de arrastar e soltar. Comece com um layout de coluna única e adicione o cabeçalho, o bloco de imagem e os blocos de texto abaixo.

Em seguida, adicione o texto e personalize o botão CTA. Vamos também adicionar um preenchimento de cor turquesa HTML à imagem, como no e-mail original. Por enquanto, vamos deixar o espaço reservado para a imagem em branco .

Nosso layout está praticamente completo. Agora precisamos criar a imagem dinâmica e personalizada do NiftyImages e, em seguida, carregá-la em nosso bloco de imagens no editor:

Etapa 2: Crie e personalize sua imagem personalizada com NiftyImages

Crie uma conta gratuita do NiftyImages para começar imediatamente, caso ainda não tenha feito isso!

Etapa 2.1: Projete sua imagem personalizada

Na tela de boas-vindas, selecione Nova imagem personalizada .

1. Carregue sua própria imagem
2. Escolha um modelo da biblioteca NiftyImages

Aqui está uma olhada nos ótimos modelos de imagens de aniversário disponíveis:

Como já temos nossa imagem de aniversário do exemplo Stitch Fix, vamos fazer o upload para o NiftyImages. Clique no botão [Upload Image] no canto superior direito para importar a imagem Stitch Fix. O texto de personalização padrão “Ótimas ofertas para nossos clientes” será exibido para editarmos em seguida.

Usando o menu à esquerda, podemos personalizar o tamanho e o estilo da fonte e o próprio texto. Vamos atualizar a mensagem para refletir o tema do aniversário:

Por enquanto, usaremos FIRSTNAME como um espaço reservado para nosso texto dinâmico; você verá como personalizá-lo para seu provedor de serviços de e-mail (ESP) na próxima etapa.

Em seguida, forneça um texto de backup , para que qualquer destinatário cujo nome não esteja no banco de dados da lista de e-mails ainda receba uma mensagem completa.

Vamos agora visualizar a aparência de nossa imagem de aniversário, clicando no botão [Visualizar] no canto superior direito:

Etapa nº 2.2: Crie o URL de sua imagem dinâmica

Vamos ser um pouco técnicos. A imagem personalizada de feliz aniversário que criamos tem um URL dinâmico especial . Observe que a URL da imagem tem o campo do nome do destinatário como parâmetro no final , que é específico para a plataforma de e-mail que você usará para enviar este e-mail. Portanto, você precisa escolher seu provedor de serviço de e-mail (ESP) no menu suspenso. Aqui está um exemplo para MailUp, nossa plataforma de marketing por e-mail.

Esta etapa é muito importante: se a sintaxe da tag de mesclagem do primeiro nome estiver errada, a imagem não funcionará . Cada ESP tem uma sintaxe diferente para tags de mesclagem (alguns usam chaves, por exemplo). A lista suspensa no NiftyImages gera a URL para seu provedor de serviço de e-mail (ESP). Assim, depois de escolher o ESP, copie o URL da imagem e vamos voltar ao editor. Estamos quase terminando!

Aqui está um rápido tutorial em vídeo da NiftyImages sobre como gerar o URL da imagem dinâmica:

[post_video_embed url = ”https://www.youtube.com/embed/uwUxinJaklM” height = ”” largura = ””]

Etapa # 3: adicione a imagem personalizada ao seu e-mail

No editor MailUp, clique no marcador de posição da imagem para visualizar o menu à direita. Ative o botão Imagem dinâmica em Propriedades de conteúdo . Para saber mais sobre o recurso de imagem dinâmica do editor, consulte nosso artigo de ajuda sobre Como usar imagens dinâmicas para contadores regressivos e conteúdo personalizado.

Cole o URL da imagem do NiftyImages e a imagem personalizada do feliz aniversário agora aparecerá no editor.

Por fim, vamos ver como fica o e-mail recriado de feliz aniversário do Stitch Fix com a imagem dinâmica personalizada que criamos. Parece ótimo, não acha?

Conclusão: crie seu próximo e-mail personalizado

Voila! Criamos um incrível e - mail personalizado de feliz aniversário com apenas duas ferramentas de design e em três etapas simples. Portanto, não há desculpa para não experimentar mais personalização em suas campanhas de e-mail ! Se você ainda não estiver usando o MailUp, inscreva-se para uma avaliação gratuita e tenha acesso a modelos adicionais e recursos de design.