Crie mensagens in-app no editor integrado

Vídeo do Youtube: Crie In-Apps sem programação em nosso editor fácil de usar

Adicionar um novo modelo

Para criar um modelo in-app, vá para Conteúdo → In-apps e clique em Adicionar modelo:

Aqui, você tem duas maneiras de criar um modelo:

1. Carregar ZIP — carregue um arquivo ZIP com sua mensagem in-app em HTML.
2. Criar novo modelo — construa um modelo no editor visual. Após criá-lo, você pode começar a partir de um modelo pré-construído ou de um em branco.

Neste artigo, veremos como criar um modelo do zero. Siga os mesmos passos para personalizar seu modelo existente.

Insira um nome para o modelo, selecione Criar novo modelo e clique em Adicionar modelo:

Você pode criar uma nova página de mensagem in-app com base em um modelo padrão ou começar do zero selecionando um modelo em branco.

Configurações gerais do modelo

Antes de adicionar blocos de conteúdo, configure o modelo na aba Popup:

• Defina a posição do popup na tela.
• Altere a largura e a altura do popup.
• Ajuste o arredondamento da borda.
• Configure as definições de conteúdo para todo o modelo: alinhamento, largura, fontes e cores.
• Defina a cor de fundo ou adicione uma imagem de fundo.
• Personalize a posição e a aparência do botão de fechar.

In-apps de tela cheia e de tela parcial usam o mesmo editor. Escolha um formato abaixo e defina a largura e a altura do popup para corresponder.

Mensagem in-app de tela cheia

Use in-apps de tela cheia para onboarding, paywalls e promoções como offerwalls.

Na aba Popup, defina a largura e a altura próximas ao tamanho da tela do dispositivo de destino para que a mensagem cubra a maior parte da exibição.

Recomendações de imagem para in-apps de tela cheia (orientação retrato)

Imagem e texto	Alta resolução: 1200 x 1000 px Tamanho mínimo: 600 x 500 px Proporção: 6:5
Apenas imagem	Alta resolução: 1200 x 2000 px Tamanho mínimo: 600 x 1000 px Proporção: 3:5

Nota

Para aplicativos nativos de iOS e Android, abra Configurações → Configurações In-App e defina a posição da mensagem como Tela Cheia.

Mensagem in-app de tela parcial

In-apps de tela parcial são mensagens de sobreposição compactas que deixam parte do aplicativo visível atrás do popup. Use-as para solicitações de opt-in, anúncios e conteúdo promocional.

Na aba Popup, defina uma largura e altura menores para que o popup não cubra a tela inteira.

Nota

Para aplicativos nativos de iOS e Android, abra Configurações → Configurações In-App e escolha Centro, Topo ou Fundo para a posição da mensagem.

Dica

Para automatizar popups de recuperação de opt-in e opt-out de permissão de push no Customer Journey, consulte Criar popups de opt-in e opt-out.

Adicionar conteúdo

Blocos de conteúdo

Defina o layout do modelo arrastando e soltando os blocos de conteúdo necessários no corpo do modelo. Você pode adicionar títulos, texto, imagens, botões, divisores, formulários preenchíveis, blocos HTML, menus, carrosséis de imagens, contadores regressivos e tabelas.

Se você quiser colocar mais de um elemento de conteúdo em uma linha, adicione o elemento Colunas ao modelo. Selecione o tipo de bloco necessário e adicione conteúdo a cada coluna:

Para alterar a cor de fundo de um layout, clique em suas margens externas. Certifique-se de que todo o layout esteja selecionado e escolha a cor:

Se todo o layout estiver selecionado, você também pode editar as configurações de preenchimento e carregar uma imagem de fundo.

Orientação retrato e paisagem

O Pushwoosh oferece a flexibilidade de criar conteúdo de mensagens in-app tanto na orientação retrato quanto na paisagem. Isso garante que suas campanhas sejam visualmente atraentes e eficazes em todos os dispositivos.

Retrato (aba Mobile)

Para criar mensagens in-app projetadas para a orientação retrato, normalmente usada em dispositivos móveis, navegue para a aba Mobile no editor. Aqui, você pode projetar seu conteúdo para se ajustar a um layout vertical adequado para telas de smartphones.

Paisagem (aba Desktop)

Para mensagens in-app orientadas para paisagem, que geralmente são preferidas para telas mais largas, navegue para a aba Desktop dentro do editor. Aqui, você pode estruturar suas mensagens in-app para aproveitar um espaço horizontal mais amplo.

Colunas em layouts de paisagem

Se você precisar adicionar colunas às suas mensagens in-app de paisagem, primeiro adicione o elemento Coluna. Defina o número e o layout das colunas que você precisa.

Depois de projetar suas mensagens in-app de paisagem com colunas, mude para a aba Mobile. Role para baixo até a seção DESIGN RESPONSIVO, encontrada na parte inferior do painel de configurações, e ative a opção Não Empilhar no Mobile.

Nota

Este passo é vital para manter o design pretendido de suas mensagens in-app de paisagem quando visualizadas em dispositivos móveis. Garante que as colunas permaneçam lado a lado, em vez de empilharem.

O Pushwoosh também permite que você misture e combine layouts de coluna em suas mensagens in-app. Você pode configurar colunas específicas para empilhar verticalmente enquanto mantém outras na horizontal. Para fazer isso, ajuste cada bloco de coluna conforme necessário.

Elementos de conteúdo

Título

Você pode editar os parâmetros de fonte, cor, alinhamento de texto, altura da linha e preenchimento para os títulos.

Nota

Se você quiser personalizar o título para cada usuário, adicione Tags a ele.

Você também pode economizar tempo deixando a IA gerar o texto do título para você. Clique no botão na seção Títulos Inteligentes, insira algumas palavras-chave e clique em Obter Sugestões:

Texto

Os textos são personalizáveis da mesma forma que os títulos (no editor, este bloco é rotulado como Parágrafo). Você pode alterar os parâmetros de fonte, cor, alinhamento de texto, altura da linha e preenchimento.

Nota

Se você quiser personalizar o texto para cada usuário, adicione Tags a ele.

Você também pode aprimorar seu texto usando a opção Texto Inteligente:

Imagem

Para adicionar uma imagem, clique no bloco de imagem e arraste seu arquivo para o painel do editor:

Alternativamente, você pode especificar a URL da Imagem em vez de carregar um arquivo. Você também pode colar a URL de uma imagem da sua Loja de Mídia no campo URL da Imagem.

Você também pode experimentar a geração de imagens por IA. Para fazer isso, clique no botão na seção Imagem Mágica, descreva a imagem que deseja criar e clique em Gerar Imagens:

Para colocar texto diretamente sobre uma imagem, selecione o bloco de imagem e clique em Aplicar Efeitos. Clique em Texto, insira seu conteúdo e ajuste seus parâmetros:

Na seção Ação, abra o menu suspenso Tipo de Ação para definir o que acontece quando a imagem é clicada: URL ou Deeplink (abrir um site ou um deep link para uma página dentro do seu aplicativo), Fechar Popup ou Javascript Personalizado (inserir um manipulador JavaScript personalizado). Se nenhuma ação for necessária, deixe Fechar Popup selecionado.

Nota

Se você quiser abrir uma página em seu aplicativo móvel quando a imagem for clicada, selecione a opção URL ou Deeplink e insira um deep link.

Botão

Uma vez que um botão é adicionado ao seu modelo, você pode personalizar seu texto, cor, preenchimento e bordas.

Nota

Se você quiser personalizar o texto do botão para cada usuário, adicione Tags a ele.

A IA pode ajudá-lo a criar o texto do botão. Basta clicar no botão na seção Botões Inteligentes, inserir palavras-chave e clicar em Obter Sugestões:

Para especificar a ação que deve ser executada após clicar no botão, vá para a seção Ação e abra o menu suspenso Tipo de Ação: URL ou Deeplink (abrir um site ou um deep link), Fechar Popup ou Javascript Personalizado (inserir um manipulador JavaScript personalizado).

Nota

Se você quiser abrir uma página em seu aplicativo móvel quando o botão for clicado, selecione a opção URL ou Deeplink e insira um deep link.

Divisor

Divisores são linhas que você pode colocar entre os blocos de conteúdo. Use-os para estruturar seu modelo e enfatizar os blocos mais importantes. Você pode alterar a largura, o tipo de linha, o alinhamento e as configurações de preenchimento do divisor.

Formulário

Nota

Para configurar este elemento, você precisará da ajuda de um desenvolvedor.

Formulários permitem que você colete e-mails, números de telefone, preferências e outras informações dos usuários que podem ser úteis para comunicações futuras. Este elemento é configurado como um formulário HTML padrão: os dados são enviados em uma solicitação GET ou POST para o endereço especificado no campo URL.

Clique no nome do campo para configurar seus parâmetros:

• Tipo de Campo: o tipo de dados que deve ser transmitido no campo;
• Nome do Campo: o nome do parâmetro no qual os dados do campo são passados;
• Rótulo do Campo: texto exibido acima do campo;
• Texto do Placeholder;
• Caixa de seleção indicando se o campo é obrigatório para enviar o formulário.

Para adicionar outro campo, clique em Adicionar Novo Campo e selecione o tipo de dados:

Você pode personalizar parâmetros do formulário como largura, alinhamento, espaço entre campos, texto do botão, cores e fontes.

HTML

O bloco HTML permite que você adicione seu próprio código HTML personalizado a um modelo.

Isso pode ser especialmente útil para aprimorar suas mensagens in-app com elementos interativos ou visualmente envolventes. Por exemplo, se você deseja criar formulários personalizados para pesquisas, pode usar o bloco HTML para incluir seus próprios formulários projetados.

Após configurar o formulário, você pode acompanhar as estatísticas diretamente no Pushwoosh, permitindo uma análise fácil dos resultados e interações do usuário. Para implementar isso, você precisará da ajuda de sua equipe de desenvolvimento, por favor, compartilhe este link com eles.

Existe um modelo de mensagem in-app pré-projetado com um formulário de pesquisa personalizado nos modelos Padrão. Você pode usá-lo como referência ou ponto de partida para seus próprios formulários de pesquisa.

Além disso, você pode aprimorar suas mensagens in-app incorporando vídeos para uma experiência de usuário mais envolvente. Aqui está um exemplo de como incorporar um vídeo do YouTube usando 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 elemento Menu permite que você coloque vários itens clicáveis em uma linha ou coluna. Por exemplo, você pode adicionar uma barra de navegação ou contatos da empresa.

Para adicionar um item de menu, clique em Adicionar Novo Item:

Adicione o texto do item e defina a ação que deve ser executada ao clicar no item:

Escolha o tipo de menu horizontal ou vertical e adicione um separador entre os itens, se necessário:

Carrossel de imagens

O elemento Carrossel exibe várias imagens em um controle deslizante que pode ser arrastado dentro de uma única mensagem in-app. Use-o para mostrar vários produtos, capturas de tela ou etapas de onboarding.

Para configurar o carrossel:

1. Com o bloco Carrossel selecionado, alterne entre Mobile e Desktop na parte superior do painel para configurar cada visualização.

2. Na seção Imagens, use as abas Imagem 1, Imagem 2, Imagem 3, etc. para selecionar um slide. Clique em + para adicionar outro slide ou no ícone de lixeira para remover o ativo.

3. Para o slide selecionado, clique em Carregar Imagem ou escolha uma opção em Mais Imagens. Você também pode colar um link hospedado em URL da Imagem, incluindo uma imagem da sua Loja de Mídia.

4. Insira o Texto Alternativo para o slide. Para ajustar a imagem em si, clique em Editar Imagem ao lado da pré-visualização da miniatura.

5. Clique em Mostrar Mais Opções na parte inferior do painel se precisar de configurações adicionais para o slide.

Contador regressivo

O elemento Timer adiciona uma contagem regressiva à sua mensagem in-app. Use-o para ofertas por tempo limitado, vendas relâmpago e lembretes de eventos. Defina a data e a hora de destino e, em seguida, personalize a aparência do timer.

Para configurar o timer:

1. Com o bloco Timer selecionado, alterne entre Mobile e Desktop na parte superior do painel para configurar cada visualização.

2. Na seção Contagem Regressiva, defina a Hora de Término para a data e hora em que a contagem regressiva deve chegar a zero. Escolha o Fuso Horário e o Idioma para os rótulos do timer.

3. Ative os Rótulos para mostrar Dias, Horas, Minutos e Segundos sob os dígitos, ou desative para exibir apenas os números da contagem regressiva.

4. Na seção Estilo, defina o Fundo, a Cor dos Dígitos e a Cor dos Rótulos. Escolha a Fonte dos Dígitos, o Tamanho da Fonte dos Dígitos, a Fonte dos Rótulos e o Tamanho da Fonte dos Rótulos.

5. Configure outras opções em Imagem, Ação e Geral conforme necessário.

Tabela

O elemento Tabela permite apresentar conteúdo estruturado em linhas e colunas, como comparações de planos, preços ou listas de recursos. Adicione ou remova linhas e colunas e personalize bordas, preenchimento e estilo do texto.

Para configurar a tabela:

1. Com o bloco Tabela selecionado, alterne entre Mobile e Desktop na parte superior do painel para configurar cada visualização.

2. Na seção Layout, defina Colunas e Linhas com os botões + e -.

3. Escolha a Cor de Fundo. Ative a Borda para definir o estilo, a espessura e a cor, ou use Mais Opções para configurações avançadas de borda. Ative Linhas Listradas para alternar os fundos das linhas.

4. Clique em uma célula na pré-visualização para inserir o texto do cabeçalho ou do corpo.

5. Em Cabeçalho e Conteúdo, personalize fontes, cores e alinhamento de texto para as células do cabeçalho e do corpo.

6. Configure Links, Geral e Design Responsivo conforme necessário.

Personalização de conteúdo

Personalize o texto principal, o cabeçalho ou o texto do botão para tornar seu conteúdo mais relevante e envolvente. Por exemplo, você pode se dirigir aos usuários pelo nome ou mencionar suas preferências.

Primeiro, você precisa configurar Tags e configurar a coleta de dados dos usuários (por exemplo, através de um formulário de feedback). Ao criar mensagens in-app, selecione o bloco de conteúdo necessário, clique em Merge Tags e selecione a Tag que deseja usar:

Modelos multi-idioma

Você pode localizar os textos do seu modelo de mensagem in-app para cada idioma que seus usuários falam. Para fazer isso, alterne entre os idiomas na lista Idioma editável e edite o conteúdo em cada idioma separadamente:

Se o conteúdo não for localizado, ele será exibido no idioma especificado como padrão em Configurações de idioma.

Nota

Qualquer elemento que você adicionar ao modelo aparece com o mesmo conteúdo para todos os idiomas. Lembre-se de localizar os textos adicionados (incluindo os textos dos botões) para todos os idiomas que você usa em seu modelo.

Personalize a aparência e o comportamento da mensagem in-app (iOS e Android Nativo)

Use as Configurações In-App para controlar como suas mensagens in-app aparecem e se comportam em aplicativos nativos de iOS e Android. Você pode ajustar a posição na tela, escolher animações e habilitar gestos de deslizar para dispensar.

Para configurar as definições in-app:

1. Clique em Configurações na parte superior da tela.

2. Na janela de configurações, escolha como você quer que sua mensagem in-app apareça e se comporte, ajustando as opções disponíveis:

Definir a posição da mensagem na tela

Escolha onde a mensagem deve aparecer.

As opções incluem: Tela Cheia, Topo, Centro, Fundo

Selecionar animação de entrada

Escolha como a mensagem aparece na tela. Nas configurações, esta é a opção Animação de Apresentação.

As opções incluem: Para Cima, Para Baixo, Esquerda, Direita

Selecionar animação de saída

Escolha como a mensagem desaparece. Nas configurações, esta é a opção Animação de Fechamento.

As opções incluem: Para Cima, Para Baixo, Esquerda, Direita

Habilitar deslizar para fechar (opcional)

Permita que os usuários dispensem a mensagem deslizando em uma ou mais direções.

As opções incluem: Esquerda, Direita, Para Cima, Para Baixo

3. Após selecionar suas preferências, clique em Aplicar para salvar as alterações ou em Cancelar para descartá-las.

Salvar e usar o modelo

Clique em Salvar para aplicar as alterações.

Agora você pode usar seu modelo de mensagem in-app de uma das seguintes maneiras:

• Mostrar um in-app como parte de uma jornada do cliente;
• Enviar um push que abre um in-app quando clicado;
• Exibir um único in-app para seus usuários.