Pular para o conteúdo
Documentação do desenvolvedorSuporte Solicitar demonstração Entrar
Pushwoosh.com

Criar conteúdo de e-mail com o editor de código HTML

Vídeo do Youtube: Crie seu conteúdo de e-mail do zero com 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

Anchor link to

Para começar a criar o conteúdo do e-mail, cole seu código HTML na aba HTML. O editor fornece pré-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:

  1. Clique no ícone de Tag localizado na parte inferior do editor.
  2. Selecione a Tag desejada e seu modificador, e forneça um valor padrão se necessário.
  3. Clique em Inserir para incluir a tag personalizada no conteúdo do seu e-mail.
Interface de inserção de tag personalizada mostrando opções de seleção de tag e valor padrão

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

Usar localização

Anchor link to

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. Isso usa o inglês como idioma padrão e traduções em 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é!"
  }
}

Uma vez que seus dados de localização estejam 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 diferentes idiomas. 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, e 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

Anchor link to

A Pushwoosh permite que você combine conteúdo de e-mail inserindo um pedaço de 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

Anchor link to

Para inserir um pedaço de conteúdo em outro, use a seguinte sintaxe:

{% email_content "AAAAA-BBBBB" %}

Onde “AAAAA-BBBBB” é o ID do conteúdo de e-mail que você deseja inserir. Você pode encontrar o ID localizado abaixo do nome do conteúdo em 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 pedaços de conteúdo:

  • 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.

Anchor link to

Certifique-se de incluir um link de cancelamento de inscrição em seu e-mail para fornecer aos destinatários uma opção de optar facilmente por não receber futuras comunicações, em conformidade com as regulamentações e para respeitar suas preferências em relação ao recebimento de e-mails.

Adicione o Link de cancelamento de inscrição ao seu e-mail da seguinte forma:

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

O valor do atributo %%PW_EMAIL_UNSUBSCRIBE%% será substituído pelo link de Cancelamento de inscrição da Pushwoosh no momento em que você enviar a mensagem de e-mail. Quando os destinatários seguem o link, eles optam por não receber seus e-mails e são contabilizados na taxa de cancelamento de inscrição para aquela mensagem de e-mail específica no Histórico de Mensagens.

Salvar conteúdo do e-mail

Anchor link to

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

Anchor link to

Antes de enviar sua campanha de e-mail, você pode enviar um e-mail de teste para pré-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:

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

Se o KYC não tiver sido 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
  1. 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 amostra (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.

  1. 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.
Caixa de diálogo de confirmação de envio de e-mail de teste com campos de dados de amostra