Crie mensagens in-app com o editor no-code

Para criar um modelo in-app (também chamado de Rich Media), vá para Conteúdo → In-Apps (Rich Media) e clique em Adicionar modelo:

Captura de tela mostrando o botão Adicionar modelo na seção Rich Media do Painel de Controle da Pushwoosh

Aqui, você tem três opções:

Fazer upload de um arquivo ZIP com sua mensagem in-app em HTML.
Escolher e personalizar um dos modelos pré-construídos.
Construir seu próprio modelo do zero.

Neste artigo, veremos a criação de um modelo do zero. Siga os mesmos passos para personalizar seu modelo existente.

Definindo o 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 (padding) e fazer upload de uma imagem de fundo.

Criando rich media em modo retrato e paisagem

A Pushwoosh oferece a flexibilidade de criar conteúdo rich media tanto na orientação retrato quanto paisagem, garantindo que suas campanhas sejam visualmente atraentes e eficazes em todos os dispositivos.

Rich media em modo retrato

Para criar rich media projetado para a orientação retrato, que é tipicamente 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.

Rich media em modo paisagem

Para rich media orientado para paisagem, que é tipicamente exibido em telas mais largas como tablets ou em aplicativos orientados horizontalmente, como jogos ou players de música, navegue para a aba Desktop dentro do editor. Aqui, você pode estruturar seu rich media para aproveitar um espaço horizontal mais amplo.

Captura de tela mostrando as abas Mobile e Desktop para alternar entre as orientações retrato e paisagem

Adicionando colunas ao rich media em modo paisagem

Se você precisar adicionar colunas ao seu rich media em modo paisagem, primeiro adicione o elemento Coluna e defina o número e o layout das colunas que você precisa.

Depois de projetar seu rich media em modo 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.

A Pushwoosh também permite que você misture e combine layouts de colunas em seu rich media. 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.

Captura de tela mostrando configurações de layout de colunas mistas com algumas empilhando verticalmente e outras horizontalmente

Elementos de conteúdo

Título

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

Você também pode usar o editor de IA da Pushwoosh para reescrever seu texto em um tom de voz diferente, alterar o comprimento dos caracteres e verificar a gramática. Para fazer isso, clique no bloco de texto → Texto Inteligente e escolha um dos formatos de texto pré-definidos:

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 fazer o upload de 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 você 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: 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.

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

Botão

Depois que um botão é adicionado ao seu modelo, você pode personalizar seu texto, cor, preenchimento (padding) 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: 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 do botão.

Se você quiser abrir uma página em seu aplicativo móvel quando o botão for clicado, selecione a opção Abrir Site 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 do divisor, o tipo de linha, o alinhamento e as configurações de preenchimento (padding).

Formulário

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 requisição GET ou POST para o endereço especificado no campo URL.

Captura de tela mostrando o painel de configuração do formulário com o campo URL e as configurações do método de requisição

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 para o 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.

Captura de tela mostrando as opções de configuração do campo do formulário, incluindo tipo de campo, nome, rótulo e placeholder

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

Captura de tela mostrando o botão Adicionar Novo Campo e o menu suspenso com os tipos de dados de campo disponíveis

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

HTML

Adicione o bloco HTML se você quiser incluir seu próprio código HTML no modelo.

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:

Captura de tela mostrando o botão Adicionar Novo Item para adicionar itens de menu ao modelo

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

Captura de tela mostrando a configuração do item de menu com campo de texto e configurações de ação

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

Captura de tela mostrando as opções de layout do menu com configurações de orientação horizontal e vertical

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, por meio de um formulário de feedback). Ao criar Rich Media, 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 em seu modelo de Rich Media 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:

Captura de tela mostrando o menu suspenso Idioma editável para selecionar e localizar o conteúdo do modelo

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

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.

Configurações gerais do modelo

Na aba 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.

Captura de tela mostrando a aba Pop-up com as configurações gerais do modelo, incluindo posição, tamanho e estilo

Salvando e usando o modelo

Clique em Salvar para aplicar as alterações:

Captura de tela destacando o botão Salvar para salvar as alterações do modelo de mensagem in-app

Agora você pode usar seu modelo de Rich Media para enviar suas mensagens in-app. Por favor, siga este guia para fazer isso >