Criação de um e-mail com o recurso de arrastar e soltar

Usando o editor de arrastar e soltar, você pode criar mensagens de e-mail totalmente personalizadas para campanhas ou Canvas, tudo sem usar HTML para criar o corpo do e-mail.

Sobre o editor

O editor de arrastar e soltar usa Content e Rows como os dois principais componentes para simplificar seu fluxo de trabalho, sem uso adicional de HTML.

Conteúdo	Linhas

Conteúdo

O conteúdo inclui uma série de blocos que representam diferentes tipos de conteúdo que podem ser usados em sua mensagem. Elas são organizadas em três categorias: básica, mídia e avançada.

• básico
• mídia
• avançado

Linhas

As linhas são unidades estruturais que definem a composição horizontal de uma seção da mensagem por meio de colunas. Você pode esvaziar as linhas ou os blocos de conteúdo. O uso de mais de uma coluna permite que você coloque diferentes elementos de conteúdo lado a lado. Dessa forma, você pode adicionar todos os elementos estruturais necessários à sua mensagem, independentemente do modelo selecionado no início.

Usando o editor de arrastar e soltar

Não tem certeza se sua mensagem de e-mail deve ser enviada usando uma campanha ou um Canva? As campanhas são melhores para campanhas de mensagens únicas e simples, enquanto as canvas são melhores para jornadas de usuários em várias etapas.

Depois de selecionar onde construir sua mensagem, vamos nos aprofundar nas etapas para criar um e-mail do tipo arrastar e soltar.

Etapa 1: Selecione seu modelo

Depois de selecionar o editor de arrastar e soltar como sua experiência de edição, você pode optar por:

• Comece com um modelo em branco.
• Use um modelo de e-mail pré-desenhado do Braze para arrastar e soltar.
• Use um modelo de e-mail salvo do tipo arrastar e soltar.

Também é possível acessar todos os modelos na seção Modelos.

Depois de selecionar o modelo, você verá uma visão geral do e-mail em Variantes de e-mail, que inclui as informações de envio e o corpo do e-mail.

Em seguida, selecione Edit Email Body (Editar corpo do e-mail ) para começar a projetar a estrutura do e-mail no editor de arrastar e soltar.

Etapa 2: Crie seu e-mail

A experiência de edição de arrastar e soltar é dividida em três seções: Configurações de envio, Conteúdo e Prévia e teste. A mágica de criar o corpo do e-mail acontece na seção Conteúdo. Antes de criar seu e-mail, é importante entender os principais componentes que orientam sua experiência de criação de e-mail. Se você precisar revisar, consulte Sobre o editor.

Quando estiver pronto, use os blocos de conteúdo do tipo arrastar e soltar para criar seu e-mail.

1. Selecione o painel Rows. Arraste e solte as configurações de linha no editor principal. Isso mapeará o layout do conteúdo de seu e-mail.
   • Note que as novas configurações devem ser arrastadas para a parte superior ou inferior de uma seção existente.
   • Quando você seleciona uma configuração de linha, as configurações de Propriedades de linha são exibidas para personalização adicional de cores de fundo de linha, imagens e tamanhos de coluna personalizados.
2. Selecione o painel Content (Conteúdo ). Arraste e solte os blocos de conteúdo desejados nos componentes da linha.
   • Você também pode arrastar qualquer um dos blocos de conteúdo para o editor principal. Isso cria uma linha para o bloco.
   • Você pode refinar ainda mais o bloco selecionando-o e ajustando os campos em Propriedades do conteúdo e Opções do bloco. Isso inclui a edição do espaçamento entre letras, preenchimento, altura da linha e muito mais.

Consulte Outras personalizações para ver outras maneiras de personalizar ainda mais seu e-mail de arrastar e soltar.

Ao criar seu e-mail, é possível alternar entre a visualização para desktop e para dispositivos móveis para fazer uma prévia de como será o envio de mensagens por e-mail para seus grupos de usuários. Isso verificará se o seu conteúdo é responsivo e você poderá fazer os ajustes necessários ao longo do processo.

Etapa 3: Adicione suas informações de envio

Depois de terminar de projetar e criar sua mensagem de e-mail, é hora de adicionar as informações de envio na seção Configurações de envio.

1. Em Informações de envio, selecione um e-mail como Nome de exibição + Endereço de origem. Você também pode personalizar isso selecionando Personalizar a partir do nome de exibição + endereço.
2. Selecione um e-mail como endereço de resposta. Você também pode personalizar essa opção selecionando Personalizar endereço de resposta.
3. Em seguida, selecione um e-mail como endereço BCC para tornar seu e-mail visível para esse endereço.
4. Adicione uma linha de assunto ao seu e-mail. Opcionalmente, você também pode adicionar um pré-cabeçalho e um espaço em branco após o pré-cabeçalho.

Uma prévia no painel direito será preenchida com as informações de envio que você adicionou. Essas informações também podem ser atualizadas em Configurações > Preferências de e-mail > Configuração de envio de e-mail.

Personalização do cabeçalho de seu e-mail (avançado)

Em Configurações de envio, é possível adicionar personalização para cabeçalhos de e-mail e extras de e-mail, o que permite enviar dados adicionais de volta a outros prestadores de serviço de e-mail. A personalização de um cabeçalho de e-mail, como a inclusão do nome do destinatário, também pode contribuir para a probabilidade de seu e-mail ser aberto.

Etapa 4: Teste seu e-mail

Depois de adicionar suas informações de envio, é hora de finalmente testar seu e-mail.

Acesse a seção Pré-visualização e teste. Aqui, você tem a opção de fazer uma prévia do seu e-mail como usuário ou enviar uma mensagem de teste. Essa seção também inclui o Inbox Vision, que permite verificar se o seu e-mail foi renderizado corretamente em diferentes clientes móveis e da Web.

Como você pode visualizar três versões diferentes do mesmo e-mail no editor real, no Inbox Vision e como um e-mail de teste real, é importante alinhar os detalhes em todas as suas plataformas.

Pré-visualização e teste de envio

Na guia Preview as a User (Visualizar como usuário ), é possível selecionar os seguintes tipos de usuários para a prévia da mensagem.

• Usuário aleatório: O Braze selecionará aleatoriamente um usuário do banco de dados e fará a prévia do e-mail com base em suas atribuições ou informações do evento.
• Selecione Usuário: É possível selecionar um usuário específico com base em seu endereço de e-mail ou ID externo. O e-mail será pré-visualizado com base nas atribuições do usuário e nas informações do evento
• Usuário personalizado: Você pode personalizar um usuário. O Braze oferecerá entradas para todas as atribuições e eventos disponíveis. Você pode inserir qualquer informação que gostaria de ver no e-mail de prévia.

Use o Inbox Vision

O Inbox Vision permite que você visualize suas campanhas de e-mail a partir da perspectiva de clientes de e-mail e dispositivos móveis. Para testar sua mensagem de e-mail usando o Inbox Vision, selecione Inbox Vision na seção Preview & Test e selecione Run Inbox Vision.

Depois de usar o editor de arrastar e soltar para projetar e criar sua mensagem de e-mail, continue a construir o restante de sua campanha ou Canvas.

Sobre o mecanismo HTML atualizado

O mecanismo subjacente que produz HTML a partir do editor de arrastar e soltar foi otimizado e atualizado, resultando em benefícios relacionados à compactação e à renderização de arquivos HTML.

Nosso tamanho médio de pegada de dados HTML exportados foi reduzido, levando a um carregamento e renderização mais rápidos, redução do recorte móvel e redução do consumo de largura de banda.

A renderização de HTML foi aprimorada com base nas seguintes atualizações que minimizam o número de comentários condicionais e consultas de mídia CSS. Como resultado, os arquivos HTML são menores e codificados com mais eficiência.

• Migração de um design baseado em elementos do site <div> para uma base de código formatada padrão do site <table>
• [Blocos do editor][7] foram recodificados para maior concisão
• O código HTML final é compactado para remover os espaços em branco entre as tags
• Divisores transparentes são automaticamente convertidos em preenchimento de conteúdo

Outras personalizações

À medida que continuar criando e-mails do tipo arrastar e soltar, você poderá personalizar ainda mais o corpo de cada e-mail usando uma combinação desses detalhes criativos para capturar a atenção e o interesse do público em sua mensagem.

Imagens com largura automática

As imagens adicionadas ao seu e-mail serão automaticamente definidas como largura automática. Para ajustar essa configuração, desative a opção Largura automática e ajuste a porcentagem de largura conforme necessário.

Camadas de cores

Usando camadas de cores, você pode alterar a cor do plano de fundo do e-mail, da área de conteúdo e de diferentes componentes de conteúdo. A ordem de cores da frente para trás é: cor do componente de conteúdo, cor de fundo da área de conteúdo e cor de fundo.

Preenchimento de conteúdo

Para ajustar o preenchimento, role para baixo até Block Options (Opções de bloco ) e selecione More Options (Mais opções). É possível ajustar o preenchimento para que o e-mail tenha a aparência ideal.

Histórico do conteúdo

É possível adicionar uma imagem de fundo à configuração da linha, o que permite incorporar mais design e conteúdo visual à sua campanha de e-mail.

Adicionar personalização

O Liquid básico é compatível com o editor de arrastar e soltar de e-mails. Para adicionar personalização ao seu e-mail:

1. Selecione Personalização na seção Conteúdo.
2. Selecione o tipo de personalização. Isso inclui atributos padrão (standard), atributos de dispositivo, atributos personalizados e muito mais.
3. Pesquise a atribuição a ser adicionada.
4. Copie o snippet do Liquid gerado e cole-o no corpo do e-mail.

A personalização Liquid não é compatível com blocos de imagens e campos do tipo link de botão.

Imagens dinâmicas

Você pode optar por incluir imagens dinâmicas em seu envio de mensagens por e-mail, incluindo Liquid no atributo de origem da imagem. Por exemplo, em vez de uma imagem estática, é possível inserir https://example.com/images/?imageBanner={{first_name}} como URL da imagem para incluir o nome de um usuário na imagem. Isso ajuda a personalizar seus e-mails para cada usuário.

Adicionar atribuições HTML a links

Ao usar links, botões, imagens e vídeos no editor de arrastar e soltar, selecione Adicionar novo atributo em Atributos na seção Conteúdo para anexar informações adicionais às tags de HTML nos e-mails. Isso pode ser especialmente útil para personalização, segmentação e estilização de mensagens.

Um caso de uso comum é inserir uma atribuição em sua tag âncora para desativar o rastreamento de cliques ao enviar pelo Braze.

• SendGrid: clicktracking = "off"
• SparkPost: data-msys-clicktrack = "0"

Outro caso de uso comum é sinalizar links específicos como links universais. Os links universais são links que redirecionam para o seu app, proporcionando aos seus usuários uma experiência integrada.

• SendGrid: universal = "true"
• SparkPost: data-msys-sublink = "open-in-app" (uma subcamada personalizada deve ser configurada)

Para configurar links universais, consulte Links universais e links de apps.

Como alternativa, você pode fazer a integração com um de nossos parceiros de atribuição, como a Branch ou a AppsFlyer, para gerenciar links universais.