Crie mensagens in-app no editor integrado

Adicionar um novo modelo

Vá para Conteúdo → In-apps e clique em Adicionar modelo:

Interface de criação de modelo de mensagem in-app mostrando o botão Adicionar modelo

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

Formulário de criação de modelo com campo de nome e opção Criar novo 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.

Adicionar conteúdo

Layout

Defina o layout do modelo arrastando e soltando os blocos de conteúdo necessários no corpo do modelo. Você pode adicionar uma imagem, texto, botão, divisor, formulário preenchível, bloco HTML e menu.

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.

Criando mensagens in-app nos modos 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.

Mensagens in-app no modo retrato

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

Mensagens in-app no modo paisagem

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

Guias Desktop e Mobile para alternar entre as orientações de mensagem in-app paisagem e retrato

Adicionando colunas a mensagens in-app no modo paisagem

Se você precisar adicionar colunas às suas mensagens in-app no modo 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 no modo paisagem com colunas, mude para a guia 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 celular.

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.

Configuração de layout de coluna mista mostrando opções de empilhamento vertical e horizontal

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.

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. Você pode alterar os parâmetros de fonte, cor, alinhamento de texto, altura da linha e preenchimento.

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 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:

Na seção Ação, você pode definir a ação que deve ser executada ao clicar na imagem. Você pode abrir um site (ou um deep link para uma página dentro do seu aplicativo) ou fechar o pop-up. Você também pode inserir um atributo de manipulador JavaScript personalizado para definir a ação de clique na imagem. Se nenhuma ação for necessária, ignore esta configuração.

Botão

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

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 selecione a opção desejada. Você pode abrir um site ou fechar o pop-up. Você também pode inserir um atributo de manipulador JavaScript personalizado para definir a ação de clique no botão.

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

Os formulários permitem coletar 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.

Configuração dos parâmetros do campo de formulário mostrando tipo de campo, nome, rótulo e configurações de placeholder

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

Interface Adicionar Novo Campo para criar campos de formulário adicionais com diferentes tipos 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 das 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.

Exemplo de modelo de formulário de pesquisa pré-projetado na seção de modelos Padrão

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>

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:

Interface do elemento Menu mostrando a opção Adicionar Novo Item para itens de navegação

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

Configuração do item de menu mostrando entrada de texto e opções de seleção de ação

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

Opções de layout do menu mostrando tipos de menu horizontal e vertical com configurações de separador

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 Mesclar 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:

Interface de modelo multi-idioma mostrando opções de troca de idioma e localização de conteúdo

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

Configurações gerais do modelo

Na guia Pop-up, você pode configurar as configurações gerais do modelo:

Definir a posição do pop-up na tela;
Alterar a largura e a altura do pop-up;
Ajustar o arredondamento da borda;
Configurar as definições de conteúdo para todo o modelo: alinhamento, largura, fontes e cores;
Definir a cor de fundo ou adicionar uma imagem de fundo;
Personalizar a posição e a aparência do botão de fechar.

Pop-up de configurações gerais do modelo mostrando opções de posição, dimensões, estilo e botão de fechar

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:

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

Localização do botão Configurações na interface do editor in-app

Na janela de configurações, escolha como você deseja 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.

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

Selecionar animação de saída

Escolha como a mensagem desaparece.

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

Formulário mostrando todas as opções de configurações de mensagens in-app, incluindo posição da mensagem, animações de entrada e saída e direções do gesto de deslizar para fechar

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.

Interface de confirmação de salvamento do modelo mostrando a criação bem-sucedida do modelo

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