Referência de blocos de conteúdo de e-mail

Referência para cada bloco que você pode adicionar na tela de edição do editor Arrastar e soltar, e para os tipos de link disponíveis em botões e texto. Para controlar quais destinatários veem um bloco, defina uma condição de exibição.

Adicionar blocos de conteúdo

Abra a aba Blocos e arraste um bloco para a tela de edição, ou clique em um bloco para adicioná-lo no final do e-mail. Blocos disponíveis:

• Cabeçalho: títulos e manchetes curtas no e-mail
• Texto: corpo do texto e descrições mais longas
• Botão: uma chamada para ação clicável
• Imagem: imagens do Repositório de mídia, upload ou URL
• Vídeo: um pôster de vídeo clicável que leva a um vídeo do YouTube ou Vimeo
• Cartão: uma imagem combinada com um cabeçalho, texto e botão em um único layout
• Divisor: uma linha que separa seções visualmente
• 2 colunas: duas colunas iguais lado a lado
• 3 colunas: três colunas iguais lado a lado
• 4 colunas: quatro colunas iguais lado a lado
• 33 / 67: duas colunas onde a esquerda ocupa cerca de 33% da largura e a direita cerca de 67%
• 67 / 33: duas colunas onde a esquerda ocupa cerca de 67% da largura e a direita cerca de 33%
• Temporizador: uma contagem regressiva para ofertas e prazos
• Código de barras: um código escaneável Code 128, EAN-13, EAN-8, UPC-A ou QR gerado a partir de um valor de personalização, como um voucher
• Menu: uma linha ou coluna de links, como navegação ou contatos
• Social: ícones que levam aos seus perfis sociais
• HTML: HTML personalizado, como um formulário, pesquisa ou vídeo incorporado
• Produtos: uma grade repetida de cartões de produtos. Insira produtos manualmente ou puxe-os do seu Catálogo de produtos, do carrinho abandonado de um destinatário ou de uma estratégia de recomendação integrada, como mais vendidos ou de volta ao estoque.
• Notícias: uma grade repetida de cartões de artigos. Escolha-os manualmente de um feed RSS ou Atom, ou puxe-os ao vivo de um feed registrado para sua aplicação.
• Espaço de anúncio: um posicionamento pago que exibe uma campanha patrocinada para os destinatários

Cabeçalho e texto

Os blocos de Cabeçalho e Texto contêm o texto que os destinatários leem no e-mail. Use Cabeçalho para títulos e linhas curtas, Texto para o corpo do texto e descrições mais longas.

Clique em um bloco na tela de edição para começar a editar. Selecione o texto para abrir a barra de ferramentas de formatação.

Opções da barra de ferramentas

• Estilo de texto: defina um estilo de parágrafo (Cabeçalho 1, Cabeçalho 2, Normal, etc.) para todo o bloco
• Tamanho da fonte: redimensione o texto selecionado ou aplique um tamanho a todo o parágrafo
• Negrito / Itálico / Sublinhado / Riscado: formatação de caracteres padrão
• Alinhamento: esquerda, centro ou direita
• Link: envolva o texto selecionado em um hiperlink
• Lista com marcadores / Lista numerada: transforme as linhas selecionadas em uma lista. Qualquer marcador ou número com que as linhas já comecem é descartado, para não ser duplicado com o marcador da própria lista.

Selecione o bloco (não um trecho de texto) para abrir suas configurações no painel direito, depois ative Espaçamento entre letras para afrouxar ou apertar o espaçamento entre caracteres para todo o bloco. Aceita valores fracionários e negativos. Para aplicar o espaçamento entre letras em todos os blocos de texto de uma vez, defina-o como um padrão para todo o e-mail em Tipografia. Veja Configurar estilo para todo o e-mail.

Colando de outros documentos

Colar texto do Google Docs, Word ou de uma página da web mantém negrito, itálico, sublinhado, riscado e links. Cor, tamanho da fonte e família da fonte da origem não são transferidos — a tipografia do próprio bloco sempre prevalece. Para ignorar completamente a formatação da origem e assumir o estilo do bloco, cole com Ctrl+Shift+V (Cmd+Shift+V no Mac).

Uma lista com marcadores ou numerada colada mantém seu marcador ou número como texto simples no início de cada linha, no mesmo bloco. Selecione essas linhas e clique em Lista com marcadores / Lista numerada para transformá-las em uma lista real — o botão remove o marcador restante para você.

Em campos de linha única, como o rótulo de um Botão, as quebras de linha coladas se transformam em um único espaço.

Personalização com Merge Tags

Merge Tags são marcadores de posição que inserem um valor de Tag do perfil do destinatário, para que cada assinante veja um texto personalizado. Para adicionar uma, selecione o texto, clique em Merge Tags na barra de ferramentas e escolha uma Tag da sua conta. Clique em uma Merge Tag inserida para abrir um painel com os campos Padrão (o valor mostrado quando a tag está vazia) e Formato (capitalização, número ou formatação de data a ser aplicada ao valor).

Imagem

Um bloco de Imagem exibe uma imagem no e-mail. Selecione-o na tela de edição para abrir as configurações de Imagem no painel direito.

Adicionando uma imagem

Clique em Adicionar imagem quando o bloco estiver vazio, ou em Substituir imagem quando uma imagem já estiver definida. Isso abre a Galeria de Mídia com três abas:

• Biblioteca: seus arquivos enviados, pesquisáveis por nome de arquivo.
• Fotos de banco de imagens: pesquise fotos gratuitas do Pexels sem sair do editor. Clique em uma para copiá-la para sua biblioteca e inseri-la.
• Gerar com IA: descreva a imagem que você deseja e escolha uma proporção. A imagem gerada é salva em sua biblioteca.

Você também pode colar um link hospedado diretamente em URL da imagem para pular a galeria.

Excluindo imagens da Biblioteca

Exclua imagens sem sair do editor: passe o mouse sobre um arquivo e clique em Excluir, ou selecione vários e clique em Excluir selecionados, depois confirme na caixa de diálogo.

Cuidado

Excluir um arquivo o remove completamente do Repositório de mídia, junto com quaisquer variantes criadas a partir dele, e isso não pode ser desfeito. Qualquer conteúdo que faça referência à imagem excluída deixará de carregá-la.

Texto alternativo

Descreva a imagem em Texto alternativo para acessibilidade, ou clique em Gerar alt com IA para que a IA o escreva a partir da imagem no seu idioma de edição atual. Imagens adicionadas de Fotos de banco de imagens ou Gerar com IA recebem texto alternativo automaticamente.

Tamanho e ajuste

• Largura: defina a largura da imagem em px, ou como uma porcentagem do espaço disponível para que ela permaneça fluida. Deixe no padrão para usar a largura natural da imagem.
• Altura (px): defina uma altura de renderização fixa. Deixe em branco para escalar automaticamente — a partir da proporção de corte, se uma for definida, caso contrário, a partir das proporções naturais da imagem.
• Cortar: escolha Original para manter as proporções naturais da imagem, ou uma proporção (Quadrado (1:1), 4:3, 3:2, 16:9) para cortar a imagem para essa caixa.
• Ajuste: escolha Cobrir para preencher a caixa e cortar para ela. Defina o ponto de corte com Ponto focal. Ou escolha Conter para escalar a imagem inteira dentro da caixa sem cortar. Posicione-a com Definir posição.
• Raio do canto (px): arredonde os cantos da imagem. Ative Mais opções para definir cada canto separadamente, ou deixe desativado para aplicar o mesmo raio a todos os quatro.

Nota

O Gmail e o Apple Mail renderizam cantos arredondados no e-mail enviado, incluindo valores por canto. O Outlook Desktop ignora o raio do canto em imagens, da mesma forma que faz em todo o resto do e-mail, então as imagens permanecem com cantos quadrados lá.

Mude a tela de edição para Móvel (veja Editar a visualização móvel) para definir qualquer um desses separadamente para telas de telefone. Marque Largura (móvel), Altura (móvel), Cortar (móvel) ou Ajuste (móvel) para substituir essa configuração específica, começando pelo seu valor de desktop; deixe uma caixa desmarcada para continuar herdando a configuração de desktop. Cortar (móvel) só aparece quando Cortar está definido para uma proporção no desktop, e mudar Cortar de volta para Original no desktop descarta qualquer substituição de Cortar (móvel).

Links e espaçamento

Para abrir um link quando a imagem for clicada, insira-o em URL do link e defina Destino do link para abrir na mesma aba ou em uma nova. Veja Adicionar links para os tipos de link disponíveis.

Em Espaçamento, ative Preenchimento para adicionar espaço ao redor da imagem. Use Todos os lados para um preenchimento uniforme, ou ative Mais opções para definir cada lado separadamente.

Vídeo

Um bloco de Vídeo adiciona um vídeo do YouTube ou Vimeo ao e-mail como uma miniatura clicável. Os clientes de e-mail não podem reproduzir vídeo dentro da mensagem, então o bloco mostra uma imagem estática com uma sobreposição de ▶. Quando o destinatário toca nela, o vídeo abre no YouTube ou Vimeo. Isso funciona em todos os principais clientes, incluindo o Outlook.

Selecione o bloco de Vídeo na tela de edição para abrir suas configurações no painel direito.

• URL do vídeo: cole um link do YouTube ou Vimeo. O editor busca uma miniatura automaticamente.
• Texto alternativo: descreva o vídeo para acessibilidade.
• URL da miniatura: mantenha a miniatura buscada automaticamente, ou clique em Adicionar miniatura / Substituir miniatura para escolher uma da Galeria de Mídia, ou cole um link hospedado diretamente.
• Sobreposição do botão de reprodução: ativada por padrão. Desative para mostrar a miniatura simples sem a sobreposição de ▶. A sobreposição não está disponível para miniaturas em alguns hosts externos. O editor avisa quando isso se aplica, e o e-mail mostra a miniatura simples em vez disso.
• Largura (px), Raio do canto (px) e Alinhamento: controlam a aparência da miniatura e onde ela se posiciona no layout. Você pode definir o alinhamento separadamente para dispositivos móveis.

Cartão

Um bloco de Cartão combina uma imagem com um cabeçalho, texto e botão em um único layout pronto. Selecione-o na tela de edição para abrir suas configurações no painel direito.

• Layout: escolha de que lado a imagem fica em relação ao conteúdo.
• Imagem: substitua a imagem, defina o texto alternativo ou edite o prompt para uma imagem que você criou com Gerar com IA.
• Tamanho e ajuste: os campos de tamanho dependem do Layout. Cortar está disponível para todos os layouts. Ajuste se aplica a todos os layouts:
  • Topo: Altura define a altura da imagem em px ou como uma porcentagem da largura do cartão. Largura (px) estreita a imagem para uma largura fixa em pixels e a centraliza.
  • Fundo: Altura define a altura do cartão em px ou como uma porcentagem de sua largura. Não há campo Largura (px). A imagem é o fundo do cartão. Ajuste também funciona aqui: Cobrir corta a imagem para o cartão — defina o ponto de corte com Ponto focal — e Conter escala a imagem inteira dentro dele, posicionada com Definir posição. O Outlook Desktop aproxima Conter e ignora ambos.
  • Esquerda ou Direita: Largura define a largura da coluna da imagem em px ou como uma porcentagem do cartão. Altura (px) fixa a imagem a uma altura em pixels. Definir uma altura em pixels limpa a proporção de corte abaixo. Escolher uma proporção de corte limpa a altura em pixels. Você não pode usar ambos ao mesmo tempo.
  • Para todos os layouts:
    • Cortar: escolha Original para manter as proporções naturais da imagem, ou uma proporção (Quadrado (1:1), 4:3, 3:2, 16:9) para cortar a imagem para essa caixa.
    • Ajuste: escolha Cobrir para preencher a caixa e cortar para ela. Defina o ponto de corte com Ponto focal. Ou escolha Conter para escalar a imagem inteira dentro da caixa sem cortar. Posicione-a com Definir posição.
    • Raio do canto (px): arredonde os cantos da imagem. Ative Mais opções para definir cada canto separadamente, ou deixe desativado para aplicar o mesmo raio a todos os quatro. O Gmail e o Apple Mail renderizam; o Outlook Desktop ignora, assim como no bloco de Imagem.
• Espaçamento: defina o preenchimento ao redor do conteúdo do cartão.

Botão

Um Botão é uma chamada para ação clicável no e-mail.

Clique em um bloco de Botão para editar seu rótulo na tela de edição. Use a barra de ferramentas para alterar o tamanho da fonte, cor do texto, negrito, itálico, sublinhado, riscado e alinhamento. O rótulo é uma linha única: quebras de linha coladas se transformam em um espaço. Veja Colando de outros documentos para saber o que uma colagem mantém e descarta.

Para definir o que acontece quando o destinatário clica no botão:

• Clique no ícone de link na barra de ferramentas para abrir Inserir/Editar Link.
• Ou use Tipo de ação e URL na seção Link do painel direito.

Veja Adicionar links para os tipos de ação disponíveis.

No painel direito, em Estilos:

• Alinhamento: esquerda, centro ou direita.
• Fundo: ative para substituir a aparência padrão, depois escolha Sólido para uma cor sólida ou Gradiente para um gradiente linear de duas paradas (uma cor inicial, uma cor final e um ângulo em graus, padrão 90°). Com Gradiente selecionado, o botão ainda mostra um preenchimento sólido em clientes de e-mail que não suportam fundos de gradiente, como o Outlook no Windows. Botões que já tinham um fundo sólido o mantêm e abrem com Sólido selecionado.
• Cor do texto, Tamanho da fonte e Família da fonte: ative cada opção para substituir a aparência padrão.
• Raio do canto, Cor da borda e Largura da borda: forma e contorno do botão. O Gmail e o Apple Mail renderizam o raio do canto do botão; o Outlook Desktop o ignora e mostra cantos quadrados, da mesma forma que faz para imagens.
• Largura: defina uma largura fixa para o botão ou deixe-a automática.
• Preenchimento: adicione espaço dentro do botão. Use Todos os lados para um preenchimento uniforme, ou ative Mais opções para definir cada lado separadamente.

Divisor

Um Divisor é uma linha horizontal entre blocos de conteúdo. Use-o para separar seções visualmente no e-mail.

Configure o estilo da linha (Sólido, Tracejado, Pontilhado), cor, espessura e largura no painel de configurações.

HTML

O bloco HTML permite que você cole HTML personalizado em seu e-mail. Use-o para um formulário personalizado, pesquisa ou vídeo incorporado.

Acima do campo de código, clique em Merge tag para pesquisar as Tags da sua conta e inserir uma Merge Tag na posição do cursor — o mesmo recurso de personalização descrito acima — ou clique no ícone de emoji para inserir um emoji da mesma forma. Clique em uma Merge Tag inserida para abrir o mesmo painel Padrão / Formato que em um bloco de Cabeçalho ou Texto.

Exemplos

Formulário de lead

Este formulário de lead coleta um endereço de e-mail para enviar um código promocional para a Venda de Ano Novo.

Código HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
  h2 { font-size: 18px; margin-bottom: 8px; color: #222; }
  p { font-size: 14px; color: #666; margin-bottom: 20px; }
  input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  button {
    width: 100%;
    padding: 14px;
    background: #CC0000;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
</style>
</head>
<body>

<h2>Get your New Year Sale code</h2>
<p>Enter your email and we'll send you an exclusive promo code for up to 50% off.</p>

<div id="form">
  <input type="email" placeholder="Your email address" />
  <button type="button">Get my code</button>
</div>

</body>
</html>

Pesquisa

Esta pesquisa pergunta para qual categoria o destinatário está comprando e vincula cada opção à página de venda relevante.

Código HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; text-align: center; }
  h2 { font-size: 18px; margin-bottom: 6px; color: #222; }
  p { font-size: 13px; color: #888; margin-bottom: 20px; }
  .option {
    display: block;
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    box-sizing: border-box;
    text-decoration: none;
    color: #222;
  }
  .option:hover { border-color: #CC0000; background: #fff5f5; }
</style>
</head>
<body>

<h2>What are you shopping for?</h2>
<p>Pick a category and go straight to your deals</p>

<a class="option" href="https://example.com/sale/clothing">👗 Clothing</a>
<a class="option" href="https://example.com/sale/electronics">📱 Electronics</a>
<a class="option" href="https://example.com/sale/beauty">💄 Beauty</a>
<a class="option" href="https://example.com/sale/home">🏠 Home & Living</a>

</body>
</html>

Vídeo

Este exemplo incorpora um vídeo promocional da Venda de Ano Novo no e-mail.

Código HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>New Year Sale — Up to 50% Off</h1>

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>
</div>

</body>
</html>

Nota

Você também pode adicionar um link de cancelamento de inscrição diretamente no bloco HTML:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%>Unsubscribe</a>

O marcador de posição %%PW_EMAIL_UNSUBSCRIBE%% é substituído pela URL de cancelamento de inscrição da Pushwoosh quando o e-mail é enviado.

Menu

O bloco Menu coloca vários itens clicáveis em uma linha ou coluna. Use-o para uma barra de navegação ou uma lista de contatos da empresa.

Para cada item do menu, defina:

• Rótulo: o texto que os destinatários veem
• URL: para onde o item abre
• Destino: mesma aba ou uma nova aba

Nas configurações do bloco, você também pode definir:

• Direção: Horizontal ou Vertical
• Alinhamento: Esquerda, Centro ou Direita
• Separador: um divisor opcional entre os itens
• Fonte, tamanho, peso, espaçamento entre letras e cores de link/texto

Social

O bloco Social exibe uma linha de ícones de mídia social que levam aos seus perfis. Use-o para enviar os destinatários para o Facebook, Instagram, X e outras plataformas a partir do e-mail.

Adicione entradas de plataforma, depois defina o alinhamento, o tamanho do ícone e o espaço entre os ícones.

Temporizador de contagem regressiva

O bloco Temporizador é uma contagem regressiva no e-mail. Use-o para ofertas por tempo limitado, vendas relâmpago e lembretes de eventos.

Para configurá-lo:

1. Em Contagem regressiva, defina a Data de término e a Hora de término, depois escolha o Fuso horário e o Idioma para os rótulos do temporizador.
2. Ative Rótulos para mostrar legendas “dias / horas / minutos / segundos” sob os dígitos, ou desative para apenas números.
3. Em Aparência, defina Fundo, Cor dos dígitos, Cor dos rótulos e o tamanho da fonte para os dígitos (padrão 40px) e rótulos (padrão 16px).
4. Ajuste o Espaçamento (preenchimento) conforme necessário.

O temporizador é renderizado como uma imagem nítida em qualquer idioma ou tamanho, com um fundo que se estende por toda a linha do e-mail e uma versão renderizada nativamente para a largura móvel, em vez de uma imagem de desktop encolhida.

Código de barras

O bloco Código de barras renderiza um código de barras ou código QR escaneável a partir de um valor de personalização, mais frequentemente um voucher.

Para configurá-lo:

1. Em Código, mantenha {{voucher}} quando o e-mail for enviado com um pool de vouchers ou clique em Merge tag e escolha a tag que armazena o código de cada destinatário. O e-mail resolve a tag no momento do envio para que cada pessoa receba seu próprio valor escaneável.

2. Escolha a Simbologia:
   • QR: um código 2D quadrado que os telefones podem escanear. Aceita qualquer texto, incluindo códigos alfanuméricos como BEMVINDO2025-A1
   • Code 128: um código de barras linear para qualquer texto, incluindo os mesmos códigos alfanuméricos
   • EAN-13: o código de barras de varejo comum na Europa e em muitas outras regiões. Apenas dígitos, 12–13 caracteres
   • EAN-8: um código de barras de varejo mais curto para embalagens pequenas. Apenas dígitos, 7–8 caracteres
   • UPC-A: o código de barras de varejo comum na América do Norte. Apenas dígitos, 11–12 caracteres
3. Se você escolheu QR, defina a Correção de erros. Isso adiciona dados extras para que o código ainda possa ser escaneado quando parte dele estiver coberta, desgastada ou difícil de ver. Escolha L, M, Q ou H (padrão M). Níveis mais altos sobrevivem a mais danos, mas tornam o padrão mais denso, o que pode ser mais difícil de ler em tamanhos pequenos. Pule este campo para outras simbologias.
4. Opcionalmente, ative Imprimir o código em dígitos para mostrar o valor sob o código.

5. Em Aparência, defina Cor das barras, Fundo, Largura (px) e Altura (px). Deixe Zona de silêncio, módulos em Automático para a margem padrão.

Nota

Na tela de edição, o bloco mostra um código de barras de amostra, não o código real do destinatário. {{voucher}} e outros marcadores de posição não podem ser transformados em uma imagem escaneável até o momento do envio. Envie um e-mail de teste para ver o código real antes que a campanha seja enviada. Use EAN-13, EAN-8 ou UPC-A apenas para um valor que seja apenas de dígitos, no comprimento que cada um espera. Para códigos alfanuméricos como BEMVINDO2025-A1, use Code 128 ou QR em vez disso. A Verificação inteligente também avisa se o valor não corresponder à Simbologia que você escolheu.

Colunas

Colunas dividem a tela de edição em seções lado a lado para que você possa colocar conteúdo um ao lado do outro em uma única linha.

Arraste um destes blocos para a tela de edição:

• 2 colunas: duas colunas iguais
• 3 colunas: três colunas iguais
• 4 colunas: quatro colunas iguais
• 33 / 67: coluna esquerda com cerca de 33% de largura, direita com cerca de 67%
• 67 / 33: coluna esquerda com cerca de 67% de largura, direita com cerca de 33%

Em seguida, adicione conteúdo a cada coluna. Para alterar o espaçamento de todas as colunas no e-mail, abra Configurações → Padrões de colunas e ajuste o preenchimento externo, o preenchimento da coluna e o espaço entre as colunas.

Para a imagem própria da coluna (aquela que você adiciona com Adicionar imagem nas configurações da coluna), as configurações mostram uma seção Tamanho e ajuste. Este é o mesmo controle do layout Esquerda / Direita do bloco de Cartão. Um bloco de Imagem arrastado para uma coluna é um elemento de conteúdo separado e mantém seus próprios campos de dimensionamento simples — veja Imagem.

Você também pode colar um link hospedado diretamente em URL da imagem para pular a galeria.

• Largura: defina a largura da imagem em px ou como uma porcentagem da coluna. Deixe sem definir para preencher a coluna.
• Altura (px): fixe a imagem a uma altura em pixels. Definir uma altura em pixels limpa a proporção de corte abaixo. Escolher uma proporção de corte limpa a altura em pixels. Você não pode usar ambos ao mesmo tempo.
• Cortar: escolha Original para manter as proporções naturais da imagem, ou uma proporção (Quadrado (1:1), 4:3, 3:2, 16:9) para cortar a imagem para essa caixa.
• Ajuste: escolha Cobrir para preencher a caixa e cortar para ela. Defina o ponto de corte com Ponto focal. Ou escolha Conter para escalar a imagem inteira dentro da caixa sem cortar. Posicione-a com Definir posição.
• Raio do canto (px): arredonde os cantos da imagem. Ative Mais opções para definir cada canto separadamente, ou deixe desativado para aplicar o mesmo raio a todos os quatro. O Gmail e o Apple Mail renderizam; o Outlook Desktop ignora, assim como no bloco de Imagem.

Nota

Uma imagem de coluna com apenas Altura (px) definida se estica para a largura da coluna e corta para essa altura.

Produtos

Um bloco de Produtos mostra uma grade de cartões de produtos de um modelo compartilhado. Cada cartão pode incluir uma imagem, título, descrição, preço e um botão de compra. O modelo se repete para cada produto.

Clique em um cartão na tela de edição para torná-lo ativo e editá-lo:

• Altere o título, descrição, preço, imagem ou link por produto para atualizar apenas esse cartão.
• Altere o layout do modelo, cores, preenchimento ou quais elementos ele contém para atualizar todos os cartões.

No painel de configurações, em Fonte, escolha de onde vêm os produtos:

• Manual: insira produtos manualmente, escolha-os do seu Catálogo de produtos por ID ou misture ambos.
• Regra de catálogo: puxe produtos automaticamente por categoria e ordem de classificação, resolvidos na hora do envio a partir do catálogo.
• Carrinho: mostre os itens do carrinho abandonado atual de cada destinatário.
• Recomendações: puxe produtos classificados por uma estratégia integrada — mais vendidos, novidades, de volta ao estoque ou queda de preço — resolvidos do seu catálogo no momento do envio.

Nota

Essas fontes precisam de Modelos de Conteúdo no seu plano. Se o seletor de Fonte não mudar para Regra de catálogo, Carrinho ou Recomendações, entre em contato com o Suporte ou seu gerente de conta.

Você também precisa de um token de acesso à API (Configurações → Acesso à API) para salvar o e-mail. A pré-visualização, a execução da Verificação inteligente e tudo mais no editor funcionam sem um. Apenas Salvar falha, com uma notificação informando que o bloco não tem token de acesso à API.

Adicionar produtos manualmente

Preencha a grade você mesmo, seja inserindo produtos manualmente ou escolhendo itens específicos do seu Catálogo de produtos por ID. Você pode misturar ambos no mesmo bloco.

• Número de produtos: defina quantos cartões mostrar (1–24).
• Adicionar produto: adicione um cartão e preencha seu título, descrição, preço, imagem e link você mesmo.
• Escolher do catálogo…: selecione produtos específicos do seu Catálogo de produtos em vez de digitá-los.
• Atualizar do catálogo: puxe o título, descrição, preço e imagem mais recentes para os produtos que você escolheu do catálogo, caso tenham mudado desde que você os adicionou. Não afeta produtos inseridos manualmente.
• Imagens do produto: clique em uma miniatura para substituir a imagem daquele produto.
• Links do produto: insira ou edite a URL para cada produto.

Puxar produtos com uma regra de catálogo

Puxe produtos automaticamente por categoria e ordem de classificação, sem seleção manual.

• Categoria: limite a uma categoria específica do catálogo ou Todas as categorias.
• Ordenar: escolha a ordem em que os produtos são puxados: Mais recentes primeiro, Preço: do menor para o maior, Preço: do maior para o menor ou Título A-Z.
• Número de produtos: defina um limite de quantos cartões mostrar (1–12).
• Atualizar pré-visualização: recalcule a pré-visualização da tela de edição com base no catálogo agora mesmo.

Pré-visualização vs hora do envio

A pré-visualização da tela de edição mostra os produtos que correspondem à regra agora. Se o catálogo mudar antes de você enviar o e-mail, por exemplo, um produto ficar sem estoque ou um novo for adicionado, os destinatários verão a correspondência atualizada no momento do envio, não a pré-visualização.

Mostrar itens do carrinho

Renderize os itens atuais do carrinho abandonado de um destinatário.

• Máximo de produtos mostrados: defina um limite de quantos cartões mostrar (1–12).
• Pré-visualizar o carrinho de um usuário: insira um ID de usuário ou e-mail e clique em Pré-visualizar carrinho para ver como o bloco é renderizado para aquele destinatário específico.

Nota

Cada destinatário recebe seu próprio carrinho abandonado atual no momento do envio. Destinatários sem um simplesmente pulam o bloco, então segmente seu público usando a tag PW_AbandonedCartID. A própria tela de edição mostra cartões de amostra, não dados reais do carrinho. Veja Como configurar uma campanha de carrinho abandonado para a configuração completa.

Obter produtos recomendados

Puxe produtos classificados por uma estratégia integrada em vez de escolhê-los você mesmo ou escrever uma regra de catálogo.

• Estratégia: escolha como os produtos são classificados — Mais vendidos (7 dias), Mais vendidos (30 dias), Novidades, De volta ao estoque, Queda de preço, Comprados juntos ou Com base no que eles viram. Selecionar Recomendações substitui o controle Ordenar de Regra de catálogo por este seletor de Estratégia. Mais vendidos, Comprados juntos e Com base no que eles viram precisam de eventos do seu backend. Veja Como configurar recomendações de produtos em e-mail.

• Categoria: limite a uma categoria específica do catálogo ou Todas as categorias.
• Número de produtos: defina um limite de quantos cartões mostrar (1–12).
• Atualizar pré-visualização: recalcule a pré-visualização da tela de edição com base no catálogo agora mesmo.

Comprados juntos precisa de uma tag de Produto

Selecionar Comprados juntos adiciona um campo Tag de produto — insira o nome da tag de dispositivo que contém o produto âncora, e o bloco mostrará produtos frequentemente comprados junto com ele. Sem uma tag definida, o bloco volta para o catálogo regular.

O nome da tag só aceita letras, dígitos, sublinhados e espaços — qualquer outra coisa é rejeitada com um erro em linha, já que a tag precisa ser endereçável em Liquid.

Nota

Mais vendidos classifica produtos especificamente pelo histórico de pedidos. Comprados juntos constrói a partir do mesmo fluxo amplo de interação que Com base no que eles viram — visualizações, carrinho e compras, não exclusivamente compras. Contas novas, ou contas que ainda não coletaram histórico suficiente para uma determinada estratégia, recebem o catálogo regular em vez disso, até que o suficiente se acumule.

As configurações do bloco de Produtos ainda não estão traduzidas

As configurações do bloco de Produtos, incluindo o nome da fonte Recomendações e seus rótulos de estratégia, são exibidas em inglês, independentemente do idioma da sua conta.

Estilizar a grade

Depois de escolher uma fonte, estas configurações controlam a aparência da grade e de seus cartões. Elas permanecem as mesmas, não importa qual fonte você use:

• Colunas: escolha 1, 2 ou 3 cartões por linha. Em dispositivos móveis, os cartões sempre se empilham em uma coluna.
• Espaço: ative para definir o espaço entre os cartões. Desativado usa o padrão (16px).
• Limite de descrição: o limite de caracteres ao qual o texto da descrição é cortado, para que os cartões mantenham um tamanho consistente.
• Modelo de cartão: escolha um layout, depois defina Fundo do cartão, Raio do canto do cartão e Preenchimento do conteúdo para cada cartão.
• Tamanho e ajuste: mostrado para cada layout que tem uma imagem. Os mesmos controles de Largura, Altura, Cortar e Ajuste do dimensionamento de imagem por layout do bloco de Cartão, dimensionados em relação à largura do cartão em vez de todo o e-mail.

As configurações de Estilo do bloco abaixo estilizam o bloco como um todo, separadamente dos cartões dentro dele:

• Fundo e Imagem de fundo: defina uma cor de fundo ou imagem por trás de toda a grade. Com uma imagem definida, Ajuste escolhe como ela se posiciona no bloco — Cobrir a corta para o bloco, Conter ajusta a imagem inteira dentro dele — e Ponto focal / Definir posição a posiciona. O Outlook Desktop mostra apenas a cor de fundo e ignora a imagem, então mantenha uma cor legível por trás dela.
• Cor da borda, Largura da borda e Raio do canto: adicione um contorno e cantos arredondados ao redor de toda a grade. Ative Mais opções em Raio do canto para definir cada canto separadamente, ou deixe desativado para aplicar o mesmo raio a todos os quatro. O Gmail e o Apple Mail renderizam; o Outlook Desktop ignora e mostra cantos quadrados, da mesma forma que faz para imagens.
• Ocultar no celular e Ocultar no desktop: oculte o bloco inteiro em um dispositivo. Veja Mostrar ou ocultar conteúdo por dispositivo.

Como o preço de venda aparece

Se um produto tiver um preço de venda em seu catálogo, o cartão mostrará o preço com desconto com o original riscado. Isso se aplica a Regra de catálogo, Carrinho e itens de catálogo em Manual. Produtos inseridos manualmente não têm preço de venda.

Notícias

Um bloco de Notícias mostra uma grade de cartões de artigos. Cada cartão pode incluir uma imagem, data, manchete, resumo e um link “Leia mais”. O modelo se repete para cada artigo, da mesma forma que no bloco de Produtos. Um novo bloco de Notícias começa com 2 cartões de amostra.

No painel de configurações, em Fonte, escolha de onde vêm os artigos:

• Escolhidos: carregue artigos de um feed RSS ou Atom uma vez, ou escolha artigos específicos manualmente. Eles são copiados para o e-mail e não mudam mais.
• Feed ao vivo: puxe artigos de um feed registrado para sua aplicação, resolvidos na hora do envio para que cada destinatário receba os mais recentes.

Nota

Feed ao vivo precisa de Modelos de Conteúdo no seu plano. Se Fonte não mudar para Feed ao vivo, a Pushwoosh mostra uma dica de que o conteúdo dinâmico não está habilitado para a conta. Entre em contato com o Suporte ou seu gerente de conta.

Escolher artigos de um feed

Clique em um cartão na tela de edição para torná-lo ativo e editá-lo:

• Altere a data, manchete, resumo, imagem ou link por artigo para atualizar apenas esse cartão.
• Altere o layout do modelo, cores, preenchimento ou quais elementos ele contém para atualizar todos os cartões.

Os artigos são copiados para o conteúdo do e-mail assim que você os carrega; nada é buscado novamente no momento do envio. As imagens dos artigos são copiadas para o seu Repositório de mídia e convertidas de WebP para JPEG, se necessário, já que o Outlook não pode renderizar WebP.

Cole uma URL de feed RSS 2.0 ou Atom, depois:

• Carregar últimos artigos: substitua os cartões atuais pelos artigos mais recentes do feed, o mesmo número de cartões que você já tem (2 por padrão).
• Escolher artigos…: abra uma gaveta listando até 12 dos artigos mais recentes do feed, com miniatura, manchete, data, categoria e autor, e escolha quais adicionar. Os artigos escolhidos são anexados aos cartões existentes, até 12 no total; artigos já na tela de edição não podem ser escolhidos duas vezes.

Nota

Se a URL do feed estiver vazia, inválida ou o feed não tiver artigos, a Pushwoosh mostra um erro e deixa os cartões atuais inalterados.

A gaveta permite que você escolha artigos específicos manualmente em vez de sempre pegar os mais novos.

• Imagens do artigo: clique em uma miniatura para substituir a imagem daquele artigo.
• Links do artigo: mostrado quando o modelo de cartão tem um link vinculado ao artigo (o botão padrão “Leia mais”). Lista cada artigo por manchete para que você possa editar ou substituir sua URL de destino, inicialmente puxada do feed.

Puxar artigos de um feed ao vivo

Os artigos são buscados quando o e-mail é enviado, para que cada destinatário receba os mais recentes. Em vez de escolher os artigos você mesmo, escolha um feed e um limite:

• Feed registrado: escolha um feed já registrado para sua aplicação, ou Todos os feeds da aplicação para puxar de todos eles. Este painel apenas escolhe um feed, não registra um; se ainda não houver nenhum, adicione um na página Feeds de notícias usando Adicionar feed.
• Filtro de categoria: um filtro de texto livre opcional comparado com a categoria do artigo do feed (padrão: qualquer categoria).
• Artigos: quantos cartões mostrar (1–12, 3 por padrão).
• Atualizar pré-visualização: recalcule a pré-visualização da tela de edição com base no feed agora mesmo. Se o feed não retornar artigos, a Pushwoosh deixa os cartões atuais inalterados; se o feed não puder ser alcançado, a Pushwoosh mostra um erro em vez disso.

Pré-visualização vs hora do envio

A pré-visualização da tela de edição mostra os artigos que correspondem agora. Os destinatários recebem a correspondência resolvida na hora do envio, desduplicada pelo GUID de feed de cada artigo e limitada a artigos publicados nos últimos 30 dias.

Nota

Um feed ausente, vazio ou inacessível, incluindo um feed registrado que foi excluído, não falha o envio: a Pushwoosh oculta a grade de cartões para aquele destinatário, enquanto o fundo e a borda do bloco ainda são renderizados. Apenas uma referência de feed mal configurada, por exemplo, uma aplicação ou fonte de feed corrompida, volta para os cartões já na tela de edição.

Estilizar a grade

Depois de escolher uma fonte, estas configurações controlam a aparência da grade e de seus cartões. Elas permanecem as mesmas, não importa qual fonte você use:

• Colunas: escolha 1, 2 ou 3 cartões por linha. Em dispositivos móveis, os cartões sempre se empilham em uma coluna.
• Espaço: ative para definir o espaço entre os cartões. Desativado usa o padrão (16px).
• Limite de resumo: o limite de caracteres ao qual o resumo do artigo é cortado, para que os cartões mantenham um tamanho consistente.
• Modelo de cartão: escolha um layout, depois defina Fundo do cartão, Raio do canto do cartão e Preenchimento do conteúdo para cada cartão. Para o layout Esquerda ou Direita, ative Quebrar texto ao redor da imagem para que a manchete e o resumo fluam ao redor da imagem em vez de mantê-los em uma coluna fixa. Tamanho e ajuste (Largura, Altura, Cortar, Ajuste) funciona da mesma forma que o dimensionamento de imagem por layout do bloco de Cartão, dimensionado em relação à largura do cartão.

As configurações de Estilo do bloco abaixo estilizam o bloco como um todo, separadamente dos cartões dentro dele:

• Fundo e Imagem de fundo: defina uma cor de fundo ou imagem por trás de toda a grade. Com uma imagem definida, Ajuste escolhe como ela se posiciona no bloco — Cobrir a corta para o bloco, Conter ajusta a imagem inteira dentro dele — e Ponto focal / Definir posição a posiciona. O Outlook Desktop mostra apenas a cor de fundo e ignora a imagem, então mantenha uma cor legível por trás dela.
• Cor da borda, Largura da borda e Raio do canto: adicione um contorno e cantos arredondados ao redor de toda a grade. Ative Mais opções em Raio do canto para definir cada canto separadamente, ou deixe desativado para aplicar o mesmo raio a todos os quatro. O Gmail e o Apple Mail renderizam; o Outlook Desktop ignora e mostra cantos quadrados, da mesma forma que faz para imagens.
• Ocultar no celular e Ocultar no desktop: oculte o bloco inteiro em um dispositivo. Veja Mostrar ou ocultar conteúdo por dispositivo.

Nota

Como qualquer outro bloco, um bloco de Notícias suporta condições de exibição para mostrá-lo apenas a um subconjunto de destinatários.

Espaço de anúncio

Um bloco de Espaço de anúncio mostra uma campanha patrocinada para os destinatários do e-mail. É um posicionamento pago que seu gerente de conta vende, não um bloco que você preenche com sua própria criação.

Nota

O Espaço de anúncio precisa ser habilitado para sua conta. Se não estiver na sua aba Blocos, entre em contato com o Suporte ou seu gerente de conta. Uma vez ativado, crie e gerencie as campanhas que ele pode mostrar na tela Inventário de anúncios.

Selecione o bloco na tela de edição para abrir suas configurações no painel direito.

• ID da Campanha: o ID numérico da campanha de anúncio a ser exibida. Deixe em 0 para corresponder a qualquer campanha Ativa. A lista de inventário de anúncios não mostra um ID para uma campanha — copie o número da barra de endereço do navegador na própria página da campanha depois de salvá-la.
• Categoria: limite a correspondência a campanhas marcadas com esta categoria. Defina-a junto com o ID da Campanha para exigir ambos — o anúncio só é exibido se essa campanha exata também tiver esta categoria. Deixe o ID da Campanha em 0 para corresponder a qualquer campanha Ativa na categoria.
• Rótulo acima da criação: uma linha curta mostrada acima do anúncio, por exemplo, “Patrocinado”. Deixe em branco para não mostrar nenhum rótulo.
• Quando nada é vendido: escolha o que o bloco mostra se nenhuma campanha corresponder. Ocultar o espaço (o padrão) não deixa nada em seu lugar. Mostrar meu próprio texto adiciona uma segunda seção dentro do mesmo bloco, marcada como “Mostrado quando nenhuma campanha está em execução”, onde você escreve seu próprio texto substituto e adiciona uma imagem. Essa seção é enviada no e-mail em vez de um anúncio sempre que nenhuma campanha corresponder. Deixá-la vazia salva como Ocultar o espaço — um substituto vazio nunca é enviado como um bloco em branco.

A tela de edição mostra o ID, categoria ou rótulo que você definiu como um marcador de posição — não a criação do anúncio real. A Pushwoosh escolhe a campanha correspondente uma vez, quando o e-mail começa a ser enviado, para que cada destinatário desse envio veja o mesmo anúncio — não há segmentação por destinatário para qual campanha é exibida, e não há limite de frequência nesta versão.

Nota

Como qualquer outro bloco, um bloco de Espaço de anúncio suporta condições de exibição para mostrá-lo apenas a um subconjunto de destinatários. Isso é separado da correspondência de campanha acima. Uma condição de exibição controla quem vê o bloco, não qual campanha ele mostra.

Nota

Se o Espaço de anúncio é renderizado depende da conta que possui o e-mail, não do modelo. Duplicar um modelo não altera isso — uma cópia feita de uma conta onde o Espaço de anúncio não está habilitado nunca mostrará o anúncio. Se o Espaço de anúncio for habilitado ou desabilitado para sua conta depois que você construiu o e-mail, salvá-lo novamente aplica a alteração. Desative-o e salve, e o anúncio para de ser exibido. Ative-o novamente e salve, e ele retoma.

Salvar e reutilizar blocos

Salve um bloco para reutilizá-lo neste ou em outros e-mails, em vez de reconstruí-lo a cada vez.

1. Clique em um bloco (sua moldura ou fundo, não o texto ou botão dentro dele) para selecioná-lo. Cartão, Colunas e Social são exemplos de blocos que funcionam dessa maneira.

Dica

Para salvar vários blocos juntos, clique com a tecla Shift em mais blocos irmãos, na tela de edição ou no Painel de Camadas, para estender a seleção a um intervalo contíguo. Salvar não é oferecido para um intervalo que inclui um bloco já sincronizado ou um marcador de posição de IA vazio.

2. Clique no ícone de marcador no menu de ferramentas do bloco e dê um nome a ele.

Os blocos salvos aparecem em Blocos salvos na parte inferior da aba Blocos.

• Arraste um bloco salvo para a tela de edição, ou clique nele para adicioná-lo no final do e-mail.
• Clique no × no bloco salvo para excluí-lo.

Manter cópias sincronizadas

Ao salvar um bloco, ative Manter cópias sincronizadas para vincular cada cópia inserida à mesma fonte. Edite a fonte uma vez, e a alteração se aplica em todos os lugares onde o bloco é usado, incluindo e-mails já agendados para envio.

Salvar um intervalo de blocos funciona da mesma maneira. Edite qualquer bloco dentro dele e, em seguida, aplique a alteração para atualizar cada cópia onde quer que seja usada.

Uma cópia sincronizada fica bloqueada na tela de edição. Você não pode editá-la diretamente. Selecione a cópia para abrir suas configurações:

• Editar bloco sincronizado: desbloqueie esta cópia para que você possa alterá-la. Um banner aparece no topo. Clique em Aplicar a todos para salvar suas alterações na fonte e em todas as outras cópias, ou em Cancelar para descartá-las. Você pode desbloquear apenas um bloco sincronizado por vez.
• Atualizar da fonte: substitua esta cópia pela versão mais recente da fonte.
• Desvincular da fonte: desvincule esta cópia da fonte para que você possa editá-la por conta própria.

Enquanto um bloco sincronizado está desbloqueado para edição, o resto do e-mail fica bloqueado: você não pode selecionar, editar ou excluir mais nada, e Salvar fica desabilitado até você terminar. Clique em Aplicar a todos para salvar suas alterações em todos os lugares, ou em Cancelar para descartá-las e desbloquear o resto do e-mail novamente.

Nota

Cada vez que você abre um e-mail, a Pushwoosh verifica suas cópias sincronizadas e atualiza as que estão desatualizadas. Uma notificação mostra quantas foram atualizadas. Se a fonte tiver conteúdo mais recente, as configurações da cópia mostram um aviso até que você reabra o e-mail ou clique em Atualizar da fonte. Se a fonte foi excluída, a cópia mantém seu último conteúdo e você só pode Desvincular da fonte.

Adicionar links

Use a caixa de diálogo Inserir/Editar Link para definir o que acontece quando um destinatário clica em um botão ou texto selecionado. Escolha um Tipo de ação e preencha os campos para essa ação.

Abrir site

Abre um link quando o destinatário clica. Insira o endereço em URL.

Link para gerenciar preferências

Adiciona um link para o centro de preferências de inscrição onde os destinatários podem escolher quais categorias de e-mail eles recebem. O link é inserido automaticamente.

Link de cancelamento de inscrição

Permite que os destinatários cancelem a inscrição de acordo com as regulamentações e suas preferências.

Dica

Você também pode adicionar um link de cancelamento de inscrição em um bloco HTML:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%>Unsubscribe</a>

O marcador de posição %%PW_EMAIL_UNSUBSCRIBE%% é substituído pela URL de cancelamento de inscrição da Pushwoosh quando o e-mail é enviado.

O que acontece quando o destinatário clica no link de cancelamento de inscrição

Se o centro de preferências de inscrição estiver habilitado

O destinatário cancela a inscrição apenas da categoria atribuída a esse e-mail (por exemplo, Newsletter). O nome da categoria é removido da sua tag Categorias de E-mail Inscritas.

Uma tela de confirmação aparece com as opções Reinscrever e Gerenciar preferências. Saiba mais.

Se o centro de preferências de inscrição não estiver habilitado

O destinatário opta por não receber todos os e-mails de marketing e a tag E-mails com Inscrição Cancelada é definida como true. E-mails transacionais não são afetados e continuarão a ser entregues. Saiba mais sobre tipos de mensagem.

Importante

Para permitir que você entregue e-mails importantes aos seus clientes, não excluímos usuários com inscrição cancelada da sua base de usuários.

Para continuar enviando mensagens para destinatários engajados, crie um segmento filtrado por E-mails com Inscrição Cancelada = false. Para evitar reclamações, não envie e-mails para destinatários que cancelaram a inscrição.

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

Link da versão web

Dá aos destinatários acesso a uma versão web do e-mail, útil se eles tiverem problemas para visualizá-lo em sua caixa de entrada.

Não rastrear estatísticas

Abre um link quando o destinatário clica, sem contar o clique para as estatísticas de cliques do seu e-mail. Insira o endereço em URL.

Link de confirmação de formulário de inscrição

Insere um link de confirmação para o envio de um formulário de inscrição (por exemplo, para confirmar um double opt-in). Saiba mais sobre double opt-in.