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 um 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 in-app

Um modelo in-app é um design reutilizável que você cria uma vez e depois exibe para os usuários em campanhas. Você pode criar um no editor integrado, carregar um ZIP HTML personalizado ou construir um modelo de rich media nativo. 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 Conteúdo → In-apps.
2. Clique em Criar in-app.

3. Insira um nome para o modelo.
4. Escolha como criar o modelo:
   • Criar novo modelo: construa um modelo no editor integrado.
   • Carregar ZIP: carregue um arquivo ZIP com sua mensagem in-app em HTML.
   • Criar rich media nativo: construa um in-app nativo renderizado pelo SDK. Saiba mais
5. Selecione Criar novo modelo.
6. Clique em Criar in-app.

Explore o layout do editor

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

Barra superior

A barra superior é onde você gerencia o modelo como um todo: seu nome, histórico de desfazer, status de salvamento, como ele aparece no dispositivo (Configurações do in-app), idiomas (Tradução automática e o seletor de idioma), largura de visualização para celular ou desktop e uma verificação de conteúdo (Verificar). Consulte Configure a aparência do in-app no dispositivo, Localize o modelo e Verifique seu conteúdo antes de salvar.

Abra o menu ⋮ na barra superior para mais ações:

Pré-visualização

A Pré-visualização permite que você experimente a mensagem antes de salvá-la: toque em botões, navegue por fluxos de várias telas e verifique o layout no celular ou desktop.

O que funciona na pré-visualização:

• Botões e fluxos de várias telas funcionam de verdade.
• Links e deep links são reportados, não abertos.
• Chamadas de SDK e estatísticas de abertura/clique permanecem desativadas.
• O idioma corresponde ao seletor de idioma. As Merge Tags permanecem como placeholders.

No cabeçalho da pré-visualização, alterne entre celular e desktop para ver ambos os layouts. Clique em Reiniciar para mostrar a mensagem desde o início novamente. Para sair da pré-visualização, pressione Esc ou clique fora do painel.

Brand book

• Brand book: abra o Brand book da sua conta.
• Aplicar estilos do brand book: reestilize o modelo para corresponder ao seu Brand book (depois de configurá-lo).
• Redefinir estilos personalizados: remova as sobreposições de estilo no modelo e retorne aos padrões.

Baixar .zip

Baixar .zip salva o modelo como um arquivo ZIP. Ele baixa a última versão salva, então salve suas alterações primeiro. O item de menu aparece apenas depois que o modelo foi salvo pelo menos uma vez — modelos novos e não salvos não o exibem.

Área de edição (Canvas)

Edite a mensagem na área de edição: clique em textos, imagens e botões para alterá-los. Use o seletor de celular/desktop na barra superior para verificar como o layout fica em cada largura. O seletor apenas altera a pré-visualização, não o layout em si.

Camadas

O painel de Camadas lista todos os blocos do seu modelo em uma árvore, na mesma ordem que na área de edição. Abra-o na borda esquerda para selecionar um bloco aninhado (por exemplo, um botão dentro de um grupo) ou arraste as linhas para reordenar o conteúdo.

Painel direito

Alterne entre três abas:

• Blocos: adicione conteúdo à mensagem. Consulte a Referência de blocos do editor in-app.
• Configurações: aplique estilos a todo o modelo de uma vez. Consulte Configurar as definições do modelo in-app.
• IA: converse com o assistente de IA para gerar ou editar conteúdo a partir de um prompt.

Adicione blocos de conteúdo

1. Abra a aba Blocos no painel direito.
2. Arraste um bloco para a área de edição, ou clique em um bloco para adicioná-lo no final do modelo.
3. Continue adicionando blocos até que o layout esteja pronto.

Cada tipo de bloco serve a um propósito diferente na mensagem:

• Título: títulos e manchetes curtas
• Texto: corpo do texto e descrições mais longas
• Botão: uma chamada para ação clicável
• Imagem: imagens da Galeria de mídia, upload ou URL
• Vídeo: uma miniatura de vídeo clicável que abre um vídeo do YouTube ou Vimeo
• Cartão: uma imagem com título, 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)
• Temporizador: 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

Consulte a Referência de blocos do editor in-app para as configurações de cada bloco e como salvar e reutilizar blocos.

Exiba blocos para usuários específicos

Nem todo usuário precisa ver os mesmos blocos. Defina uma condição de exibição em um bloco para que ele seja exibido ou ocultado com base nas Tags do usuário. Você ainda envia um único modelo, mas cada pessoa vê apenas as partes que se aplicam a ela.

Selecione o bloco na área de edição, abra Condição de exibição no painel direito e ative Mostrar este bloco condicionalmente. Saiba mais

Localize o modelo

Um modelo multilíngue armazena o texto localizado para cada idioma em um único design in-app. Para saber como as mensagens multilíngues funcionam em todos os canais, consulte Mensagens multilíngues.

Nota

O seletor de idioma aqui conta apenas dispositivos em plataformas que renderizam conteúdo in-app. Os valores de idioma definidos por meio de Tags no nível do usuário não estão vinculados a uma plataforma de dispositivo, portanto, não aparecem aqui.

Para configurar conteúdo multilíngue:

1. Clique no seletor de idioma na barra superior para abrir a lista de idiomas.
2. Selecione os idiomas que deseja adicionar e clique em Aplicar.
3. Use o seletor de idioma para alternar entre os idiomas e editar o conteúdo de cada bloco para o idioma selecionado.
4. Clique em Tradução automática para preencher as traduções ausentes automaticamente — revise o texto gerado por IA antes de salvar.

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.

Configure as definições do modelo

Use dois locais para estilizar e posicionar a mensagem:

• Aba Configurações (painel direito): tamanho do documento, cores, tipografia e estilos padrão para os blocos.
• Configurações do in-app (barra superior): posição na tela, animações e o botão de fechar.

Saiba mais

Verifique seu conteúdo antes de salvar

Clique em Verificar na barra superior para abrir a Verificação inteligente e escanear o modelo em busca de problemas comuns.

A Verificação inteligente procura por:

• Botões, itens de menu e links de imagem sem URL, ou com uma URL que não seja um endereço http(s), mailto:, tel: ou deep link (por exemplo, myapp://promo)
• Blocos de placeholder de IA inacabados
• Espaços de imagem ou vídeo vazios e texto alternativo ausente
• Cartões de produtos com um link ausente ou inválido
• Contraste de texto que não atende ao padrão WCAG AA
• Conteúdo não traduzido
• Um temporizador de contagem regressiva cuja data final já passou
• Uma condição de exibição com uma regra quebrada ou vazia, um ramo que perdeu o bloco ao qual se conecta, ou uma condição que não será aplicada porque o conteúdo dinâmico está desativado para a conta

Clique em um achado para ir diretamente ao elemento afetado na área de edição. Se nada estiver errado, o painel mostrará Todas as verificações passaram — o conteúdo parece pronto para salvar.

Salve o modelo

Clique em Salvar na barra superior para salvar suas alterações. Use Desfazer/Refazer na barra superior para retroceder e avançar em suas edições.

Nota

Salvar armazena seu modelo in-app em Conteúdo → In-apps. A partir daí, você pode pré-visualizar, editar e gerenciar modelos. Saiba mais