Crie mensagens in-app no editor integrado

Crie um modelo de mensagem in-app no editor integrado da Pushwoosh sem escrever código. Você obtém um layout reutilizável com blocos de conteúdo, imagens, botões e texto personalizado que pode exibir em uma Customer Journey, como um in-app único ou a partir de uma notificação push.

Nota

Antes de começar, integre o SDK da Pushwoosh para que as mensagens in-app possam aparecer no seu aplicativo. Saiba mais

Crie um novo modelo de in-app

Um modelo de in-app é um design reutilizável que você cria uma vez e depois exibe aos usuários em campanhas. Você pode criar um enviando um ZIP HTML personalizado ou construindo-o no editor integrado. Este artigo aborda a criação de um modelo do zero no editor integrado. Siga os mesmos passos para personalizar um modelo existente.

1. Vá para Content → In-apps.
2. Clique em Add template.

3. Insira um nome para o modelo.
4. Escolha como criar o modelo:
   • Upload ZIP: faça o upload de um arquivo ZIP com sua mensagem in-app em HTML.
   • Create new template: construa um modelo no editor integrado.
5. Selecione Create new template.
6. Clique em Add template.

Explore o layout do editor

O editor integrado tem quatro áreas. Cada uma tem uma função clara.

Barra superior

Use a barra superior para renomear o modelo, desfazer erros, salvar seu trabalho ou abrir as In-app settings quando precisar alterar como a mensagem aparece no dispositivo. Consulte Configurar a aparência do in-app no dispositivo.

Canvas

Use o canvas para ver a mensagem como os usuários a verão e para editar texto, imagens e botões diretamente no layout. Um modelo vazio mostra Start with a block. Acima do canvas, um seletor de telefone/tablet alterna a largura da visualização — isso não altera seu layout, apenas a largura da tela em que você está visualizando.

Camadas

O painel de Camadas lista todos os blocos do seu modelo como uma árvore, na mesma ordem que no canvas. Abra-o na borda esquerda quando quiser selecionar um bloco aninhado (por exemplo, um botão dentro de um grupo) ou arrastar linhas para alterar a ordem do conteúdo.

Painel direito

Use Blocks no painel direito para adicionar conteúdo à mensagem e Settings quando quiser um estilo que se aplique a todo o modelo de uma vez. Consulte Configurar estilo para todo o modelo.

Comece a construir o modelo

Depois de criar um modelo, o editor abre com um canvas vazio e a aba Blocks à direita.

1. Arraste um bloco do painel Blocks para o canvas ou clique em um bloco no painel para adicioná-lo.
2. Continue adicionando blocos da mesma forma até que o layout esteja pronto.
3. Abra a aba Settings quando precisar de um estilo para todo o modelo.

Adicionar blocos de conteúdo

Os blocos de conteúdo são as peças de construção de um modelo de in-app no editor integrado. Você combina títulos, texto, imagens, botões e outros blocos em um único layout.

Abra a aba Blocks e arraste um bloco para o canvas, ou clique em um bloco para adicioná-lo. Blocos disponíveis:

• Título: títulos e manchetes curtas na mensagem
• Texto: corpo do texto e descrições mais longas
• Botão: uma chamada para ação clicável
• Imagem: imagens da Loja de Mídia, upload ou URL
• 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
• 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 ou vídeo incorporado

Título e texto

Os blocos Título e Texto contêm o texto que os usuários leem na mensagem in-app. Edite o texto no canvas e formate-o com a barra de ferramentas.

Clique em um bloco de Título ou Texto para editar seu conteúdo no canvas. 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 imagem no modelo de in-app. Selecione-o no canvas para abrir as configurações de Imagem no painel direito.

• Add image / Replace image: clique em Add image quando o bloco estiver vazio, ou Replace image quando uma imagem já estiver definida. Você pode fazer upload de um arquivo ou escolher um da sua Loja de Mídia.
• Image URL: cole um link hospedado para a imagem.
• Alt text: descreva a imagem para acessibilidade.
• Link URL: abra um site quando a imagem for tocada.
• Link target: abra o link na mesma aba ou em uma nova.
• File: depois de adicionar uma imagem, mostra o caminho do arquivo em uso.

Em Spacing, ative Padding para adicionar espaço ao redor da imagem. Use All sides para o mesmo preenchimento em todos os lados, ou ative More options para definir cada lado separadamente.

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 no canvas. 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 Insert/Edit Link.
2. Escolha um Action type.
3. Preencha os campos para essa ação (veja abaixo).
4. Clique em Save.

Abrir um site

Open Website abre um link quando o usuário toca no botão. Insira o endereço em URL. O que você pode inserir:

• Um site: https://example.com
• Um link de aplicativo que abre uma tela dentro do seu aplicativo: myapp://promo
• Fechar o in-app sem JavaScript: pushwoosh://close

Executar JavaScript personalizado

Custom Javascript 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 na 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-o 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 da notificação 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 Título, por exemplo: “Qual esporte você gosta?”
2. Adicione um Botão por opção, por exemplo: Yoga e Academia.

3. Defina Action type como Custom Javascript 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, a 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 de 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 de 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 da 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 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:

• Label: o texto que os usuários veem
• URL: para onde o item abre
• Target: mesma aba ou uma nova aba

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

• Direction: Horizontal ou Vertical
• Alignment: Esquerda, Centro ou Direita
• Separator: 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 Timer é 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 Countdown, defina End date e End time, depois escolha o Timezone e Language para os rótulos do temporizador.
2. Ative Labels para mostrar legendas “dias / horas / minutos / segundos” sob os dígitos, ou desative para apenas números.
3. Em Appearance, defina Background, Digits color, Labels color e o tamanho da fonte para os dígitos (padrão 40px) e rótulos (padrão 16px).
4. Ajuste o Spacing (preenchimento) conforme necessário.

Colunas

Colunas dividem o canvas 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 o canvas:

• 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 Settings → Columns defaults e ajuste o preenchimento externo, o preenchimento da coluna e o espaço entre as colunas.

Configurar estilo para todo o modelo

As configurações do modelo controlam o estilo de todo o modelo de in-app: tamanho e fundo do documento, aparência do pop-up e estilos padrão para os blocos.

Abra a aba Settings no painel direito.

Seções disponíveis:

• Document: tamanho e aparência de toda a área da mensagem: largura, preenchimento, cor de fundo ou imagem, cor do texto, família da fonte e o espaço entre os blocos.
• Popup: como a mensagem se posiciona sobre o fundo escurecido: raio do canto, além da cor e opacidade da sobreposição.
• Block defaults: estilos iniciais compartilhados para blocos que você adiciona posteriormente, para que o novo conteúdo corresponda ao modelo até que você substitua um bloco no canvas.
• Columns defaults: espaçamento para todos os layouts de Colunas: preenchimento externo, preenchimento dentro de cada coluna e o espaço entre as colunas.
• Card defaults: aparência inicial para contêineres de Cartão que agrupam conteúdo no layout, aplicada até que você estilize um cartão individualmente.
• Button group defaults: espaçamento e alinhamento quando vários botões estão juntos como um grupo.
• Button defaults: aparência inicial para novos blocos de Botão, para que os CTAs permaneçam consistentes em todo o modelo até que você estilize um separadamente.
• Divider defaults: estilo de linha inicial, cor, espessura e largura para novos blocos de Divisor.

Os padrões se aplicam onde um bloco individual não os substitui.

Nota

Não há configuração de altura. O pop-up cresce com seu conteúdo. Para uma mensagem em tela cheia, defina a Width em Settings e escolha Fullscreen em In-app settings.

Localizar o modelo

Um modelo multilíngue armazena o conteúdo localizado para cada idioma em um único design de in-app. Use o seletor de idioma acima do canvas para adicionar idiomas e editar o conteúdo por idioma. Para saber como o envio de mensagens multilíngues funciona em todos os canais, consulte Mensagens multilíngues.

O conteúdo que você ainda não traduziu para o idioma atual aparece esmaecido. Comece a digitar para criar a tradução. O idioma padrão continuará sendo exibido até que você o faça.

Nota

Qualquer bloco que você adicionar aparecerá com o mesmo conteúdo para todos os idiomas. Lembre-se de traduzir novos textos e rótulos de botões para todos os idiomas que você usa em seu modelo.

Configurar a aparência do in-app no dispositivo

As In-app settings controlam como a mensagem aparece e se comporta no dispositivo: posição, animações, gestos de deslizar e o botão de fechar. Essas configurações se aplicam apenas ao iOS e Android Nativo.

Clique em In-app settings na barra superior:

• Position on Screen: Fullscreen, Top, Center ou Bottom.
• Present Animation / Close Animation: None, Fade, Left, Right, Up ou Down, ou Default para usar o padrão do SDK do seu aplicativo.

Nota

None e Fade atualmente funcionam no Android. No iOS, a mensagem aparece e desaparece instantaneamente (alinhamento em breve).

• Animation Duration (MS): 100 a 3000 milissegundos. Deixe em branco para usar o tempo padrão do SDK.
• Swipe to Close: habilite qualquer combinação de Left, Right, Up e Down.
• Show close button: ative ou desative o controle de fechar. Quando ativado, defina a Position (Top right, Top left, Bottom right, Bottom left), Background (uma cor ou Transparent) e Icon Color. Ao contrário das outras configurações neste modal, a aparência do botão de fechar é renderizada na própria mensagem e aparece em todas as plataformas, não apenas no iOS e Android Nativo.

Clique em Apply para salvar suas escolhas ou em Cancel para descartá-las.

Salvar o modelo

Clique em Save na barra superior para salvar suas alterações. Use Undo/Redo na barra superior para retroceder e avançar em suas edições.

Nota

Salvar armazena seu modelo de in-app em Content → In-apps. A partir daí, você pode visualizar, editar e gerenciar modelos. Saiba mais

Usar o modelo salvo

Depois de salvar um modelo de in-app, você pode exibi-lo aos usuários em uma Customer Journey, como um in-app único ou quando um usuário toca em uma notificação push.

• Mostrar um in-app como parte de uma jornada do cliente
• Enviar uma notificação push que abre um in-app quando clicada
• Exibir um único in-app para seus usuários