Editor de código HTML

Se você é proficiente em HTML e prefere escrever seu próprio código, pode criar e-mails usando o editor de código HTML da Pushwoosh.

Criar conteúdo de e-mail

Para começar a criar o conteúdo do e-mail, cole seu código HTML na aba HTML. O editor fornece visualizações do e-mail em tempo real enquanto você trabalha neles.

Alternativamente, você pode carregar um arquivo HTML clicando em Carregar Arquivo HTML localizado no painel inferior.

Para adicionar um toque personalizado aos seus e-mails, use tags personalizadas. Para isso:

Clique no ícone Tag localizado na parte inferior do editor.
Selecione a Tag desejada e seu modificador, e forneça um valor padrão se necessário.
Clique em Inserir para incluir a tag personalizada no conteúdo do seu e-mail.

Interface de inserção de tag personalizada mostrando seleção de tag e opções de valor padrão

Para incluir um emoji em seu e-mail, clique no ícone Emoji localizado na parte inferior do editor.

Adicionar imagens

Para adicionar uma imagem ao seu e-mail, inclua uma tag <img> em seu HTML e defina o atributo src para o URL da imagem.

Para reutilizar uma imagem da sua Loja de Mídia, copie o URL dela e cole-o no atributo src. Consulte Copiar um URL de imagem para ver os passos.

<img src="SEU-URL-DA-LOJA-DE-MIDIA" alt="Banner de liquidação de verão" width="600" style="display:block;max-width:100%;height:auto;" />

Substitua SEU-URL-DA-LOJA-DE-MIDIA pelo URL que você copiou da Loja de Mídia.

Usar localização

A localização permite que você ofereça experiências personalizadas para usuários em diferentes idiomas.

No editor de código HTML, você pode usar a localização definindo um idioma padrão e adicionando várias opções de idioma. Por exemplo, você pode definir uma mensagem padrão em inglês e, em seguida, incluir traduções em alemão e espanhol. Isso garante que o conteúdo do seu e-mail se adapte às preferências de idioma de cada usuário.

Abaixo está um exemplo de como estruturar seus dados de localização. Este exemplo usa o inglês como idioma padrão e traduções para alemão e espanhol.

{
  "default": {
    "button": "Shop now",
    "description": "For a limited time, you can enjoy a 20% discount on all our premium coffee blends",
    "subtitle": "Don't miss it",
    "title": "☕ Coffee Promotion Alert!"
  },
  "de": {
    "button": "Jetzt einkaufen",
    "description": "Für kurze Zeit erhalten Sie einen Rabatt von 20% auf alle unsere Premium-Kaffeemischungen",
    "subtitle": "Verpassen Sie es nicht",
    "title": "☕ Kaffee-Promotion Benachrichtigung!"
  },
  "es": {
    "button": "Comprar ahora",
    "description": "Por tiempo limitado, puedes disfrutar de un descuento del 20% en todas nuestras mezclas de café premium",
    "subtitle": "No te lo pierdas",
    "title": "☕ ¡Alerta de Promoción de Café!"
  }
}

Depois que seus dados de localização estiverem estruturados e adicionados na Aba de Localização do editor, incorpore-os ao seu conteúdo HTML usando placeholders. Os placeholders inserem dinamicamente o texto localizado em seu conteúdo, com base na preferência de idioma do usuário. Veja como implementá-lo em seu HTML

{{title|text|}}
{{subtitle|text|}}
{{description|text|}}
{{button|text|}}

Considere este cenário: você está anunciando um desconto por tempo limitado em misturas de café. Usando a estrutura de localização mencionada acima, você pode comunicar sua mensagem promocional de forma eficaz para usuários que falam idiomas diferentes. Seu código HTML para a promoção pode ser assim:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>☕ Coffee Promotion Alert</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
  }
  .container {
    background-color: #fff;
    padding: 20px;
    margin: 10px auto;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #ff6f61;
    color: white;
    text-decoration: none;
    border-radius: 5px;
  }
  .button:hover {
    background-color: #ff5733;
  }
  .footer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8em;
    color: #888;
  }
</style>
</head>
<body>
  <div class="container">
    <h1>{{title|text|}}</h1>
    <p>{{description|text|}}</p>
    <a href="https://www.example.com/promotion" class="button">{{button|text|}}</a>

  </div>
</body>
</html>

Com esta configuração, se o idioma de um usuário for alemão, ele verá o e-mail em alemão. Usuários que optaram por receber e-mails em inglês o verão em inglês. Aqueles que optaram por recebê-lo em espanhol o receberão em espanhol. Isso garante que todos os destinatários recebam sua mensagem em seu idioma preferido.

Inserir e combinar blocos de conteúdo de e-mail

A Pushwoosh permite que você combine conteúdo de e-mail inserindo um conteúdo de e-mail em outro. Isso facilita a reutilização de elementos como cabeçalhos, rodapés ou blocos de conteúdo específicos em diferentes e-mails.

Por exemplo, se você tem o Conteúdo de e-mail A (um cabeçalho) e o Conteúdo de e-mail B (uma newsletter), você pode inserir o Conteúdo de e-mail A no Conteúdo de e-mail B sem copiar manualmente o conteúdo a cada vez.

Sintaxe

Para inserir um conteúdo em outro, use a seguinte sintaxe:

{% email_content "AAAAA-BBBBB" %}

Onde “AAAAA-BBBBB” é o ID do conteúdo do e-mail que você deseja inserir. Você pode encontrar o ID localizado abaixo do nome do conteúdo na sua lista de conteúdos de e-mail.

Exibição do ID do conteúdo do e-mail mostrando o nome do conteúdo e o identificador único

Exemplo

Digamos que você tenha dois conteúdos:

Conteúdo do cabeçalho (ID: “AAAAA-BBBBB”) com um design de cabeçalho predefinido.
Conteúdo da newsletter, onde você deseja incluir o cabeçalho.

Para inserir o cabeçalho na newsletter, você usaria o seguinte:

{% email_content "AAAAA-BBBBB" %}

Isso permite que você reutilize facilmente um cabeçalho predefinido em várias campanhas de e-mail. Economiza tempo e garante consistência em seus e-mails.

Adicionar um link de cancelamento de inscrição

Inclua um link de cancelamento de inscrição em seu e-mail para que os destinatários possam optar por não receber mais mensagens, de acordo com os regulamentos e suas preferências. A Pushwoosh fornece três variáveis que você pode usar em seu HTML.

Link de cancelamento de inscrição

Adicione este link para que os usuários possam cancelar a inscrição da mensagem que receberam:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%> Cancelar inscrição </a>

A variável é substituída pelo URL de cancelamento de inscrição da Pushwoosh quando você envia o e-mail.

Quando a central de preferências de inscrição está ativada, os destinatários cancelam a inscrição apenas da categoria atribuída a esse e-mail (por exemplo, Newsletter). Uma tela de confirmação aparece onde eles podem Reinscrever-se nessa categoria ou Gerenciar preferências para ajustar todas as categorias de e-mail. Saiba mais
Quando a central de preferências de inscrição não está ativada, os destinatários cancelam a inscrição de todos os e-mails de marketing.

Os cliques são contados na taxa de cancelamento de inscrição para essa mensagem no Histórico de Mensagens.

Cancelar inscrição de todas as categorias

Adicione um link que cancela a inscrição do usuário de todas as categorias de e-mail de uma só vez:

<a href=%%PW_EMAIL_UNSUBSCRIBE_ALL%%> Cancelar inscrição de todos os e-mails </a>

Link da central de preferências

Adicione um link direto para a central de preferências onde os usuários gerenciam quais categorias eles recebem:

<a href=%%PW_EMAIL_PREFERENCE_CENTER_LINK%%> Gerenciar preferências </a>

Saiba como a central de preferências funciona

A captura de tela abaixo mostra um rodapé que usa todos os três tipos de link.

Exemplo de rodapé de e-mail com os três links de cancelamento de inscrição: Cancelar inscrição, Gerenciar preferências, Cancelar inscrição de todos os e-mails

Salvar conteúdo do e-mail

Depois de terminar de criar seu e-mail, clique no botão Salvar localizado na parte superior do editor.

Caixa de diálogo para salvar conteúdo de e-mail mostrando campos de nome e rótulo

Na nova janela que aparece, dê um nome claro ao seu e-mail, que pode ser o mesmo da sua linha de Assunto. Além disso, crie um rótulo para ajudá-lo a encontrá-lo facilmente em sua lista de e-mails.

Se você ainda não configurou os detalhes do remetente, certifique-se de fazer isso também. Em seguida, clique em Salvar.

Agora que o conteúdo do seu e-mail está pronto, ele pode ser usado em campanhas de e-mail. Saiba mais

Enviar um e-mail de teste

Antes de enviar sua campanha de e-mail, você pode enviar um e-mail de teste para visualizar como o conteúdo aparecerá nas caixas de entrada dos destinatários. Isso permite que você revise o layout, o conteúdo e quaisquer elementos personalizados para garantir a precisão antes de finalizar a campanha. Se necessário, ajuste o conteúdo com base nos resultados do teste.

Para enviar um e-mail de teste, clique em E-mail de teste no editor de e-mail.

Botão de e-mail de teste na interface do editor de e-mail

Na janela que se abre:

No campo Endereço de e-mail, insira o endereço de e-mail onde você deseja receber o e-mail de teste.

Se o KYC não foi concluído, você precisará selecionar um endereço de e-mail verificado da lista de endereços de teste em vez de inserir um e-mail.

Menu suspenso de seleção de endereço de e-mail de teste verificado

Se o seu e-mail contiver conteúdo dinâmico (placeholders para dados personalizados), adicione valores de amostra para fins de teste.

Por exemplo:

Idade (inteiro): Insira um número para representar o placeholder de idade (por exemplo, 21).
PrimeiroNome (string): Insira um nome de exemplo (por exemplo, David).

Esses valores substituirão os dados reais do destinatário no e-mail de teste, permitindo que você verifique como o conteúdo dinâmico aparece.

Depois de preencher os detalhes necessários, clique em Enviar e-mail de teste para enviar a mensagem de teste para o endereço de e-mail fornecido.