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

Um modelo in-app é um design reutilizável que você cria uma vez e depois exibe aos usuários em campanhas. Você pode criar um no editor integrado, carregar um ZIP HTML personalizado ou criar 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: crie um modelo no editor integrado.
   • Carregar ZIP: carregue um arquivo ZIP com sua mensagem in-app em HTML.
   • Criar rich media nativa: crie 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 (para celular estão disponíveis 360, 390, 393 ou 430 px, correspondendo às larguras comuns de dispositivos), um botão para alternar a área de edição entre claro/escuro (ícone de sol/lua). Consulte Configure como o in-app aparece no dispositivo e Localize o modelo.

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

Visualizar

Visualizar 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 visualização:

• Botões e fluxos de várias telas são executados de verdade.
• Links e deep links são relatados, não abertos.
• Chamadas do 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 visualização, alterne entre celular e desktop, e entre claro e escuro, para ver todos os layouts resultantes. Clique em Reiniciar para mostrar a mensagem desde o início novamente. Para sair da visualização, pressione Esc ou clique fora do painel.

Verificar

Verificar abre a Verificação inteligente e escaneia 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 produto 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 no canvas. Se nada estiver errado, o painel mostrará Todas as verificações passaram — o conteúdo parece pronto para ser salvo.

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 substituiçõ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 do menu aparece apenas depois que o modelo foi salvo pelo menos uma vez — modelos novos e não salvos não o exibem.

Canvas

Edite a mensagem no canvas: 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 visualização, não o layout em si.

Use o ícone de sol/lua na barra superior para continuar editando o canvas enquanto ele é renderizado em claro ou escuro. Funciona mesmo sem uma Variante de modo escuro configurada — as cores escuras são derivadas automaticamente até que você defina as suas próprias. Esta é uma visualização de edição ao vivo, não o painel de Visualização somente leitura.

Camadas

O painel Camadas lista todos os blocos do seu modelo como uma árvore, na mesma ordem do canvas. 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 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 o canvas 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.

Mostre 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 no canvas, 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 textos localizados 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 no 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

Salve o modelo

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

Nota

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