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 (call to action) tocável
• Imagem: imagens da loja de Mídia, upload ou URL
• Vídeo: uma miniatura de vídeo tocá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)
• Cronômetro: uma contagem regressiva para ofertas e prazos
• 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 da aba Blocos, ou clique nele para adicioná-lo no 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 tem configurações de Visibilidade e Condição de exibição. Use-as para ocultar um bloco no celular ou desktop, ou mostrá-lo apenas para 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 texto 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 de posição que inserem um valor de Tag do perfil do usuário na mensagem, para que cada assinante veja um texto personalizado. Para adicionar um, 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 figura já estiver definida. Você pode fazer upload de um arquivo ou escolher um da sua loja 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.
• 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.

Vídeo

Um bloco de Vídeo adiciona um vídeo do YouTube ou Vimeo à mensagem como uma miniatura tocá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 loja 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, o texto e o 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 tocá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.

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 depois 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 depois 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ídias sociais 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 as entradas da plataforma e, em seguida, defina o alinhamento, o tamanho do ícone e o espaço entre os ícones.

Cronômetro de contagem regressiva

O bloco Cronômetro é 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 final e a Hora final, depois escolha o Fuso horário e o Idioma para os rótulos do cronômetro.
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.

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 a partir 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 os 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 a partir 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 exigem Modelos de Conteúdo em seu plano e um token de acesso à API (Configurações → Acesso à API). Se o seletor de Fonte não mudar para uma delas, 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áx. de produtos mostrados 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 do cartão: escolha um layout e, em seguida, defina o Fundo do cartão, Raio do canto do cartão e 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 no 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 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 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.