Referência de blocos do editor in-app

Referência para cada bloco que você pode adicionar na tela do editor integrado.

Cada tipo de bloco serve a um propósito diferente na mensagem:

• Cabeçalho: títulos e manchetes curtas
• Texto: corpo do texto e descrições mais longas
• Botão: uma chamada para ação clicável
• Imagem: imagens da Galeria de mídia, upload ou URL
• Vídeo: uma miniatura de vídeo clicável que abre um vídeo do YouTube ou Vimeo
• Cartão: uma imagem com cabeçalho, texto e botão em um único layout
• Divisor: uma linha que separa seções
• Colunas: layouts lado a lado (2, 3 ou 4 colunas iguais, ou divisões de 33/67 e 67/33)
• Temporizador: uma contagem regressiva para ofertas e prazos
• Código de barras: um código 128, EAN-13, EAN-8, UPC-A ou QR code escaneável gerado a partir de um valor de personalização, como um voucher
• Menu: uma linha ou coluna de links de navegação ou contato
• Social: ícones que levam aos seus perfis sociais
• HTML: HTML personalizado, como um formulário, pesquisa ou vídeo incorporado
• Produtos: uma grade de cartões de produtos do seu Catálogo de Produtos ou do carrinho abandonado de um usuário

Como configurar blocos do editor

Arraste um bloco para a tela a partir da aba Blocos, ou clique nele para adicioná-lo ao final. Selecione o bloco para abrir suas configurações no painel direito e configurar conteúdo, links, tamanho e espaçamento.

Dica

Todo bloco também possui configurações de Visibilidade e Condição de exibição. Use-as para ocultar um bloco no celular ou desktop, ou para mostrá-lo apenas a usuários específicos. Saiba mais

Cabeçalho e texto

Os blocos de Cabeçalho e Texto contêm o texto que os usuários leem na mensagem in-app. Edite o texto na tela e formate-o com a barra de ferramentas.

Clique em um bloco de Cabeçalho ou Texto para editar seu conteúdo na tela. Selecione um texto para abrir a barra de ferramentas de formatação: negrito, itálico, sublinhado, alinhamento, um botão de link e um menu suspenso de estilo de texto.

Merge Tags são marcadores que inserem um valor de Tag do perfil do usuário na mensagem, 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. Saiba mais sobre mensagens in-app personalizadas

Imagem

Um bloco de Imagem exibe uma figura no modelo in-app.

Selecione-o na tela para abrir as configurações de Imagem no painel direito.

• Adicionar imagem / Substituir imagem: clique em Adicionar imagem quando o bloco estiver vazio, ou Substituir imagem quando uma imagem já estiver definida. Você pode fazer upload de um arquivo ou escolher um da sua Galeria de mídia.
• URL da imagem: cole um link hospedado para a imagem.
• Texto alternativo: descreva a imagem para acessibilidade.
• Prompt: o prompt de geração de IA para uma imagem que você criou com Gerar com IA.
• Largura (px) / Altura (px): fixe a imagem em um tamanho de pixel. Deixe um campo vazio para que ele se dimensione automaticamente. Abaixo desses campos, uma dica mostra o tamanho em que a imagem é renderizada e o tamanho para upload: 2× o tamanho renderizado, para que a imagem permaneça nítida nas telas de celular. Se o arquivo enviado for menor que o tamanho renderizado em qualquer um dos eixos, um aviso informa que ele será ampliado e parecerá pixelado.
• Raio do canto (px): arredonde os cantos da imagem.
• Alinhamento: esquerda, centro ou direita.

Em Link, defina um Tipo de Ação (por exemplo, Abrir Site ou URL ou Deeplink) e sua URL para abrir algo quando a imagem for tocada, e um Destino do link para abri-lo na mesma aba ou em uma nova.

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

Tamanhos de imagem recomendados

Faça o upload de uma imagem com 2× o tamanho que a dica sob Largura (px) / Altura (px) mostra para aquele bloco. Esse é o número a ser verificado, pois reflete suas próprias configurações de Largura/Altura e corte. Quando você ainda não definiu um bloco, use estas larguras de slot comuns como ponto de partida:

Onde a imagem está	Renderiza em	Faça upload de pelo menos
Imagem de largura total no pop-up padrão	até 600 px de largura	1200 px de largura
Visualização no celular	360–430 px de largura, dependendo do dispositivo	até 860 px de largura
Visualização em tablet/desktop	768 px de largura	1536 px de largura

A proporção da imagem fica a seu critério. O layout é responsivo, então a altura segue qualquer Altura (px) ou corte que você definir. Consulte Tamanho do documento e do pop-up para alterar a largura padrão do pop-up.

Nota

Esta tabela abrange os blocos de Imagem no editor integrado. In-apps nativos (modal, tela cheia, stories, folha, carrossel, banner, vídeo) ainda não têm um tamanho de capa recomendado.

Vídeo

Um bloco de Vídeo adiciona um vídeo do YouTube ou Vimeo à mensagem como uma miniatura clicável. A mensagem mostra uma imagem estática com uma sobreposição de ▶. Tocar nela abre o vídeo no aplicativo do YouTube ou Vimeo ou no navegador.

Selecione o bloco na tela para abrir suas configurações:

• 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: ativado por padrão. Desative para mostrar a miniatura simples sem a sobreposição de ▶.
• Largura (px), Raio do canto (px) e Alinhamento: controlam a aparência da miniatura e onde ela se posiciona no layout.

Cartão

Um bloco de Cartão combina uma imagem com um cabeçalho, texto e botão em um único layout pronto, para que você não precise posicionar e alinhar quatro blocos separados manualmente.

• Layout: escolha de que lado a imagem fica em relação ao conteúdo, ou ative Envolver texto ao redor da imagem.
• Imagem: adicione ou substitua a imagem, defina o texto alternativo, edite o Prompt de geração de IA, adicione Preenchimento e defina o Raio do canto (px).
• Tamanho e ajuste: defina a Largura, Altura, Corte (Original ou uma proporção fixa) e Ajuste (Cobrir ou um ponto focal) da imagem. Os campos exatos dependem do Layout que você escolheu.
• Link: faça com que o cartão inteiro abra uma URL quando tocado.

Edite o cabeçalho, texto e botão do cartão da mesma forma que você edita os blocos autônomos de Cabeçalho, Texto e Botão.

Botão

Um Botão é uma chamada para ação clicável na mensagem in-app. Use-o para abrir uma URL, executar JavaScript personalizado ou fechar a mensagem.

Clique em um bloco de Botão para editar seu rótulo na tela. Use a barra de ferramentas para alterar o tamanho da fonte, cor do texto, negrito, itálico, sublinhado e alinhamento.

Para definir o que acontece quando o usuário toca no botão:

1. Clique no ícone de link na barra de ferramentas para abrir Inserir/Editar Link.
2. Escolha um Tipo de ação: Abrir Site, URL ou Deeplink ou JavaScript Personalizado.
3. Preencha os campos para essa ação (veja abaixo).
4. Clique em Salvar.

Abrir Site

Abrir Site abre uma página da web quando o usuário toca no botão. Insira o endereço em URL, por exemplo https://example.com.

URL ou Deeplink

URL ou Deeplink abre um link ou deep link quando o usuário toca no botão. Insira o endereço em URL, por exemplo, uma tela de aplicativo: myapp://screen.

Executar JavaScript personalizado

JavaScript Personalizado executa código quando o usuário toca no botão. Insira o código no campo onClick.

Use-o quando um toque deve fazer algo no Pushwoosh, não apenas abrir um link. A pessoa no aplicativo ainda vê um botão normal. Ela não vê tags ou eventos. Você decide o que acontece a seguir na tela: deixar a mensagem aberta ou fechá-la no mesmo onClick.

Métodos disponíveis em onClick

• pushwoosh.closeInApp(): fecha a mensagem in-app. Omita para manter a mensagem aberta após o toque.
• pushwoosh.sendTags({...}): salva valores como tags de dispositivo para campanhas futuras.
• pushwoosh.postEvent(...): envia um evento personalizado, por exemplo, para iniciar uma Customer Journey.
• pushwoosh.getTags(...): lê as tags atuais. Útil em HTML personalizado para alterar o que a mensagem mostra.
• pushwoosh.getCustomData(): lê dados personalizados passados do push que abriu este in-app.
• pushwoosh.registerForPushNotifications(): aciona a caixa de diálogo de permissão de push nativa da plataforma, por exemplo, a partir de um in-app de pré-permissão.

Exemplo: permitir que os usuários escolham um interesse e o salvem para campanhas futuras

1. Adicione uma pergunta em um bloco de Texto ou Cabeçalho, por exemplo: “Qual esporte você gosta?”
2. Adicione um Botão por opção, por exemplo: Yoga e Academia.

3. Defina o Tipo de ação como JavaScript Personalizado para cada botão.
4. Para o botão Yoga, cole isto em onClick:

pushwoosh.sendTags({ interest: "yoga" });
pushwoosh.closeInApp();

5. Para o botão Academia, cole isto em onClick:

pushwoosh.sendTags({ interest: "gym" });
pushwoosh.closeInApp();

Quando o usuário toca em Yoga, o Pushwoosh grava a tag interest em seu dispositivo e fecha o in-app. Você pode então segmentar esse usuário em um segmento ou Customer Journey.

Saiba mais sobre como criar in-apps com JavaScript

Divisor

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

Configure o estilo da linha (Sólida, Tracejada, Pontilhada), cor, espessura e largura no painel de configurações.

HTML

O bloco HTML permite que você cole HTML personalizado em um modelo in-app. Use-o para um formulário personalizado, pesquisa ou vídeo incorporado quando não houver um bloco de Formulário dedicado para mensagens in-app.

Exemplos

Os exemplos abaixo mostram maneiras comuns de usar o bloco HTML em um modelo in-app: um formulário de lead, uma pesquisa e um vídeo incorporado.

Nota

Os exemplos de formulário e pesquisa salvam tags de dispositivo e enviam eventos através do Pushwoosh. Crie os eventos personalizados em sua conta antes de usá-los em campanhas.

Formulário de lead

Este formulário de lead grava nome e e-mail como tags, envia um evento promo_requested, mostra uma mensagem de agradecimento e, em seguida, fecha o in-app.

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: #FF6B35;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  .thanks { display: none; text-align: center; padding: 40px 0; font-size: 18px; color: #333; }
</style>
</head>
<body>

<h2>Get your 20% discount</h2>
<p>Leave your name and email. We'll send the promo code right away.</p>

<div id="form">
  <input type="text" id="name" placeholder="Your name" />
  <input type="email" id="email" placeholder="Your email" />
  <button onclick="submit()">Send me the code</button>
</div>

<div class="thanks" id="thanks">
  🎉 Done! Check your inbox for the promo code.
</div>

<script>
function submit() {
  const name = document.getElementById('name').value.trim();
  const email = document.getElementById('email').value.trim();
  if (!name || !email) return;

  pushwoosh.sendTags({ name: name, email: email });
  pushwoosh.postEvent("promo_requested", { email: email });

  document.getElementById('form').style.display = 'none';
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 3000);
}
</script>

</body>
</html>

Pesquisa

Esta pesquisa salva o horário de treino selecionado como uma tag, envia um evento schedule_survey_completed, mostra uma mensagem de agradecimento e, em seguida, fecha o in-app.

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;
  }
  .option:hover { border-color: #FF6B35; background: #fff5f0; }
  .thanks { display: none; font-size: 17px; padding: 40px 0; color: #333; }
</style>
</head>
<body>

<h2>When do you prefer to work out?</h2>
<p>Help us schedule the best classes for you</p>

<button class="option" onclick="pick('morning')">☀️ Morning (6:00–10:00)</button>
<button class="option" onclick="pick('afternoon')">🌤️ Afternoon (12:00–15:00)</button>
<button class="option" onclick="pick('evening')">🌙 Evening (18:00–21:00)</button>
<button class="option" onclick="pick('weekend')">📅 Weekends only</button>

<div class="thanks" id="thanks">Got it! We'll send you the best schedule 💪</div>

<script>
function pick(time) {
  pushwoosh.sendTags({ preferred_time: time });
  pushwoosh.postEvent("schedule_survey_completed", { time: time });
  document.querySelector('h2').style.display = 'none';
  document.querySelector('p').style.display = 'none';
  document.querySelectorAll('.option').forEach(el => el.style.display = 'none');
  document.getElementById('thanks').style.display = 'block';
  setTimeout(() => pushwoosh.closeInApp(), 2000);
}
</script>

</body>
</html>

Vídeo

Este exemplo incorpora um vídeo do YouTube na mensagem in-app.

Código HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>In-App Video Example</title>
<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>In-App Video Example</h1>

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

</body>
</html>

Menu

O bloco Menu posiciona 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 usuá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 usuários para o Facebook, Instagram, X e outras plataformas a partir da mensagem in-app.

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

Temporizador de contagem regressiva

O bloco Temporizador é uma contagem regressiva na mensagem in-app. 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 as legendas “dias / horas / minutos / segundos” sob os dígitos, ou desative para mostrar apenas os números.
3. Em Aparência, defina o Fundo, a Cor dos dígitos, a 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.

Código de barras

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

Para configurá-lo:

1. Em Código, mantenha a tag de dispositivo {Coupon|String|}, ou clique em Merge tag e escolha outra tag de dispositivo que armazene o código de cada destinatário. In-apps não avaliam Liquid. O SDK preenche a tag no dispositivo antes que o in-app seja mostrado. Isso difere do bloco de Código de barras de e-mail, que usa {{voucher}}.

2. Escolha a Simbologia:
   • QR: um código 2D quadrado que os celulares podem escanear. Aceita qualquer texto, incluindo códigos alfanuméricos como WELCOME2025-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 erro. 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 a Cor das barras mais escura que o Fundo — a maioria dos scanners não consegue ler barras claras em um fundo escuro. Defina Largura (px) e Altura (px) para pelo menos 600×200 para que o código permaneça escaneável na faixa típica da câmera do celular. Deixe Zona de silêncio, módulos em Automático para a margem padrão.

Nota

Na tela, o bloco mostra um código de barras de amostra, não o código real do destinatário. Uma tag de dispositivo como {Coupon|String|} é preenchida apenas no dispositivo, então a Visualização também não pode construir a imagem real. Verifique o código de barras em um dispositivo real antes de publicar. Use EAN-13, EAN-8 ou UPC-A apenas para um valor de tag que seja apenas dígitos, no comprimento que cada um espera. Para códigos alfanuméricos como WELCOME2025-A1, use Code 128 ou QR.

Colunas

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

Arraste um destes blocos para a tela:

• 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 modelo, abra Configurações → Padrões de colunas e ajuste o preenchimento externo, o preenchimento da coluna e o espaço entre as colunas.

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.

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

• Manual: insira produtos manualmente ou clique em Escolher do catálogo… para selecionar itens específicos do seu Catálogo de Produtos por ID. Você pode misturar ambos no mesmo bloco.
• Regra do catálogo: puxe produtos automaticamente por categoria e ordem de classificação, resolvidos na hora do catálogo quando a mensagem é mostrada.
• Carrinho: mostre os itens do carrinho abandonado atual de cada usuário. Como configurar uma campanha de carrinho abandonado

Nota

Regra do catálogo e Carrinho precisam de Modelos de Conteúdo no seu plano e um token de acesso à API (Configurações → Acesso à API). Se o seletor de Fonte não mudar para um deles, ou se o bloco não renderizar produtos, entre em contato com o Suporte ou seu gerente de conta, ou crie um token e selecione novamente a fonte.

Depois de escolher uma fonte, estas configurações controlam a aparência da grade e de seus cartões:

• Número de produtos (ou Máximo de produtos exibidos para Carrinho): quantos cartões mostrar.
• Colunas: 1, 2 ou 3 cartões por linha.
• Espaçamento: o espaço entre os cartões.
• Limite da 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 e, em seguida, defina o Fundo do cartão, o Raio do canto do cartão e o Preenchimento do conteúdo para cada cartão.

Salvar e reutilizar blocos

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

1. Selecione o bloco na tela.
2. Clique no ícone de marcador (Salvar bloco para reutilização) na barra 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 ou clique nele para adicioná-lo ao final do modelo.
• 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.

Uma cópia sincronizada fica bloqueada na tela. 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.

Nota

Cada vez que você abre um modelo in-app, o Pushwoosh verifica suas cópias sincronizadas и 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 modelo 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.