Criar mensagens in-app nativas

As in-apps nativas usam layouts prontos que o SDK da Pushwoosh renderiza diretamente no dispositivo, em vez da página HTML que uma in-app personalizada carrega. Isso as torna mais rápidas de carregar e com animações mais suaves, e você não precisa de habilidades de design ou desenvolvimento para criar uma.

Opte por uma in-app nativa quando quiser lançar uma promoção, um lembrete ou um anúncio de recurso rapidamente e um layout totalmente personalizado não for necessário. Se precisar de controle total sobre o design, crie uma in-app baseada em HTML em vez disso.

Pré-requisitos

Assistência de desenvolvedor necessária

Você pode criar um modelo de in-app nativa no Painel de Controle sem nenhuma alteração no código. Mas os usuários só o verão se o aplicativo deles executar uma versão do SDK da Pushwoosh nova o suficiente para renderizá-lo. Verifique com sua equipe de desenvolvimento antes de lançar.

Antes de criar um modelo de in-app nativa, certifique-se de que:

• O SDK da Pushwoosh está integrado em seu aplicativo para que as mensagens in-app possam aparecer. Saiba mais
• Seu aplicativo executa o SDK do iOS 7.2.0+ ou o SDK do Android 6.10.0+ para modal, tela cheia e stories. Folha, carrossel e banner precisam do SDK do iOS 7.2.1+ ou do SDK do Android 6.10.1+. Vídeo precisa do SDK do iOS 7.2.0+ ou do SDK do Android 6.11.0+.

Frameworks multiplataforma

O módulo de in-app nativa é distribuído de forma diferente dependendo da sua pilha:

• O Flutter agrupa o módulo de in-app nativa automaticamente. Nenhuma configuração extra é necessária além do plugin Pushwoosh para Flutter.
• React Native, Cordova, Capacitor, Unity e Expo não agrupam o módulo de in-app nativa. Adicione-o você mesmo ao projeto Android/iOS subjacente do seu aplicativo: pushwoosh-inapp-ui no Android, PushwooshInApp no iOS. Consulte o guia de integração do seu framework para saber como os módulos nativos são adicionados ao seu projeto.
• A Web não é suportada. As in-apps nativas são renderizadas através dos SDKs do Android e iOS, e o SDK da Web não possui um módulo de in-app nativa.

Criar um modelo de in-app nativa

1. Vá para Conteúdo → In-apps.
2. Clique na seta ao lado de Criar in-app e escolha In-app nativa. O editor nativo abre diretamente.
3. Insira um nome para o modelo.
4. Em Tipo de exibição, na parte superior do editor, escolha um tipo de exibição: modal, tela cheia, stories, folha, carrossel, banner ou vídeo. Consulte Configurar o tipo de exibição para saber o que cada tipo precisa.

O editor mostra uma pré-visualização móvel ao vivo à direita e os campos do modelo à esquerda, agrupados em Conteúdo, Configuração e Ações. O que você vê em cada grupo depende do tipo de exibição que você escolheu.

Configurar o tipo de exibição

Cuidado

O menu suspenso Tipo de exibição no topo do editor permite que você alterne os tipos a qualquer momento, mas a troca redefine todos os campos de Conteúdo, Configuração e Ações abaixo para seus padrões para o novo tipo. Preencha o conteúdo somente depois de ter decidido sobre um tipo.

Modal

Um cartão centralizado, opcionalmente exibido sobre um fundo escurecido.

1. Em Conteúdo, adicione um título e uma mensagem, cada um com sua própria cor de texto, além de uma imagem opcional. Veja Adicionar uma imagem.
2. Em Configuração, defina a cor de fundo do cartão. Isso preenche o cartão atrás do seu texto e imagem.
3. Ative Botão Fechar se desejar um controle ✕ para que os usuários possam dispensar a in-app sem tocar em um botão.
4. Ative Escurecer fundo para escurecer a tela atrás do cartão e manter o foco na sua mensagem.
5. Em Ações, adicione um ou mais botões. Veja Configurar botões.

Tela cheia

Uma imagem de capa de ponta a ponta com texto e botões por cima. Preencha estes campos no painel esquerdo:

1. Em Conteúdo, adicione uma imagem de capa, além de um título e uma mensagem, cada um com sua própria cor de texto. Veja Adicionar uma imagem.
2. Em Configuração, defina a cor da capa. Ela é exibida enquanto a imagem de capa carrega, ou sozinha se você deixar a imagem vazia.
3. Ative Botão Fechar se desejar um controle ✕ para que os usuários possam dispensar a in-app sem tocar em um botão.
4. Em Ações, adicione um ou mais botões. Veja Configurar botões.

Stories

Uma sequência de slides em tela cheia com barras de progresso no topo, semelhante às histórias de redes sociais. Cada slide é sua própria entrada de Stories em Conteúdo.

1. Preencha a Imagem, Título e Mensagem do primeiro slide (cada um com sua própria cor de texto). Veja Adicionar uma imagem.
2. Defina Segundos para quanto tempo o slide permanece na tela antes de avançar. O padrão é 5. Insira um valor de 1 a 30. Valores fora deste intervalo bloqueiam o Salvar com um erro de validação.
3. Opcionalmente, clique em Adicionar dentro do slide para dar a ele seu próprio botão de CTA. Veja Configurar botões.

4. Clique em Adicionar abaixo do último slide para adicionar outro slide e, em seguida, repita os passos 1-3 para ele.
5. Em Configuração, ative Loop se desejar que a história comece novamente do primeiro slide após o término do último.
6. Ative Botão Fechar se desejar um controle ✕ para que os usuários possam sair antes que todos os slides sejam reproduzidos.

Exemplo de como a história finalizada aparece para o usuário

Folha

Uma folha inferior que desliza para cima a partir da borda inferior da tela. Uma alça no topo permite que os usuários a arrastem para baixo para dispensá-la.

Preencha estes campos no painel esquerdo:

1. Em Conteúdo, adicione um título e uma mensagem, cada um com sua própria cor de texto, além de uma imagem opcional. Veja Adicionar uma imagem.
2. Em Configuração, defina a cor de fundo da folha. Isso preenche o painel atrás do seu texto e imagem.
3. Ative Botão Fechar se desejar um controle ✕ para que os usuários possam dispensar a folha sem tocar em um botão.
4. Em Ações, adicione um ou mais botões. Veja Configurar botões.

Carrossel

Uma mensagem em tela cheia com vários cartões que os usuários deslizam. Pontos na parte inferior mostram qual cartão está ativo. Em Conteúdo, cada cartão é uma entrada separada de Cartões.

1. Preencha a Imagem, Título e Mensagem do primeiro cartão (cada um com sua própria cor de texto). Veja Adicionar uma imagem.
2. Defina a Ação para o cartão. Escolha fechar para dispensar a in-app quando o usuário tocar no cartão, ou url para abrir um link (mesmas opções de Configurar botões).
3. Clique em Adicionar abaixo do último cartão para adicionar outro e, em seguida, repita os passos 1-2 para ele.
4. Ative Botão Fechar se desejar um controle ✕ para que os usuários possam sair do carrossel sem tocar em um cartão.

Cuidado

Se você desativar o Botão Fechar e definir a Ação de cada cartão como url, o usuário não terá controle na tela para dispensar o carrossel. Um toque sempre abrirá um link em vez de fechá-lo.

Banner

Uma barra compacta fixada na borda superior ou inferior da tela, para mensagens que não devem bloquear toda a interface do usuário.

1. Em Conteúdo, adicione um título e uma mensagem, cada um com sua própria cor de texto, além de uma pequena imagem opcional. Veja Adicionar uma imagem.
2. Em Configuração, defina a Posição como superior ou inferior para fixar o banner na borda da tela que você deseja.
3. Defina Auto-dispensar, seg para fechar o banner automaticamente após esse número de segundos. Deixe em branco para manter o banner até que o usuário o dispense.
4. Defina a cor de fundo para a barra.
5. Ative Botão Fechar se desejar um controle ✕ no banner.
6. Em Ações, defina a Ação como fechar ou url. Banners não têm botões separados. Tocar em qualquer lugar no banner executa esta ação. Veja Configurar botões para o comportamento de fechar e url.

Cuidado

Se você desativar o Botão Fechar, definir a Ação como url e deixar Auto-dispensar em branco, o banner permanecerá na tela sem nenhuma maneira de dispensá-lo. Um toque sempre abrirá o link em vez de fechá-lo.

Vídeo

Um reprodutor em tela cheia para um link de streaming HLS (.m3u8) ou um arquivo .mp4 direto, com um título, mensagem e botões opcionais por cima.

Nota

O vídeo precisa do SDK do iOS 7.2.0+ ou do SDK do Android 6.11.0+. Em um SDK do Android mais antigo, um modelo usando este tipo de exibição não é renderizado. Consulte Suporte de plataforma para obter detalhes.

1. Em Conteúdo, defina a URL do vídeo (obrigatório) para um link HTTPS absoluto para um arquivo .m3u8 ou .mp4. Opcionalmente, adicione uma imagem de Pôster exibida antes do início da reprodução e uma Imagem de fallback exibida se o vídeo não puder ser reproduzido.
2. Adicione um título e uma mensagem, cada um com sua própria cor de texto.
3. Em Configuração, ative Loop para reiniciar o vídeo após o término.
4. Ative Silenciado para iniciar a reprodução com o som desligado.
5. Ative Botão Fechar se desejar um controle ✕ para que os usuários possam dispensar a in-app sem esperar o vídeo terminar.
6. Em Ações, adicione um ou mais botões. Veja Configurar botões.

Configurar campos de texto

Os campos de texto não suportam texto de várias linhas. Se você pressionar Enter, o editor pode mostrar uma quebra de linha, mas a Pushwoosh salva um espaço em vez disso. No dispositivo, o texto aparece como uma única linha.

Para adicionar um emoji, clique em Emoji ao lado da barra de ferramentas do campo. Emojis são suportados nos mesmos campos de texto que o texto simples. Verifique a pré-visualização ao vivo para ver como eles ficam no layout.

Adicionar conteúdo dinâmico

Cada campo de texto suporta personalização com tags e ID do Usuário.

1. Clique em Personalização ao lado da barra de ferramentas do campo.
2. Em Tag, escolha uma tag ou ID do Usuário.
3. Escolha um modificador de formato (por exemplo, CapitalizeFirst ou regular).
4. Opcionalmente, insira um Valor Padrão da Tag.
5. Clique em Inserir.

A tag inserida é exibida como um chip no campo. Você pode alterar a tag, o modificador e o padrão antes de clicar em Inserir. A personalização usa as mesmas tags, modificadores e padrões do Conteúdo dinâmico.

Dica

Para lógica condicional (por exemplo, mostrar este texto apenas se uma tag for igual a um valor específico), digite a sintaxe Liquid diretamente no campo.

Quando você clica em Salvar, a Pushwoosh verifica o conteúdo dinâmico e o Liquid em cada campo de texto. Se um campo não for analisado (por exemplo, uma tag {% if %} não fechada), o Salvar é bloqueado e uma notificação O conteúdo dinâmico contém erros informa o campo e o idioma com problema. Corrija-o lá e clique em Salvar novamente.

Nota

A verificação do Liquid ao Salvar detecta erros de sintaxe, como uma tag não fechada. Ele ainda pode passar expressões incompletas que só falham quando a mensagem é enviada. Envie um teste para si mesmo se usar algo além de uma tag simples.

Configurar botões

Modal, tela cheia, cada slide de stories, folha e vídeo usam os mesmos campos de botão:

• Texto do botão e sua cor.
• Fundo, Cor da borda e Raio da borda.
• Ação: escolha o que acontece quando o usuário toca no botão:
  • fechar: dispensa a in-app.
  • url: abre o link que você insere no campo que aparece. Use um endereço da web (por exemplo, https://example.com) ou um deep link para o seu aplicativo (por exemplo, myapp://product/123).

Clique em Adicionar para adicionar outro botão, ou no × em um botão para removê-lo.

Cuidado

Se você desativar o Botão Fechar e também não adicionar nenhum botão, o usuário não terá controle na tela para dispensar a in-app.

Adicionar uma imagem

Cada campo de imagem (imagem, imagem de capa e a imagem de cada cartão ou slide) funciona da mesma maneira. Cole uma URL de imagem hospedada diretamente no campo, ou clique em Escolher do Armazenamento de Mídia ao lado para abrir o Armazenamento de Mídia e escolher uma imagem que você já enviou. Escolher uma imagem do Armazenamento de Mídia substitui qualquer URL que esteja atualmente no campo.

Adicionar um código de barras

Ao lado de Escolher do Armazenamento de Mídia, clique em Construir um código de barras para abrir uma gaveta que gera um código escaneável Code 128, EAN-13, EAN-8, UPC-A ou QR e escreve a URL resultante no campo:

• Código. O valor a ser codificado: um código fixo, como SAVE20, ou uma tag de dispositivo, como {Coupon|String|} ou {LoyaltyCardNumber|String|}, para que cada destinatário veja seu próprio código. Uma tag de dispositivo é preenchida com o valor real do destinatário diretamente em seu dispositivo, pouco antes de a in-app aparecer. O padrão é {Coupon|String|}.

• Simbologia. Escolha o formato do código de barras: Code 128, EAN-13, EAN-8 e UPC-A são códigos de barras de varejo padrão lidos por scanners de mão, e QR é um código quadrado que qualquer câmera de celular pode escanear.
• Correção de erro. Aparece somente depois que você define a Simbologia como QR. Códigos QR do mundo real podem ser arranhados, borrados ou parcialmente cobertos por um logotipo, e a correção de erro é uma informação extra incorporada no código para que ele ainda seja escaneado apesar desse dano. Escolha quanto dano ele pode tolerar: L, M, Q ou H, do menos ao mais robusto. Níveis mais altos toleram mais danos, mas produzem um código mais denso e de aparência mais movimentada. O padrão é M.

• Imprimir o código em dígitos. Mostra o valor sob o código.

Quando o Código é uma tag de dispositivo, a pré-visualização substitui um valor de amostra, pois não pode resolver a tag de um destinatário real. Um código fixo, como SAVE20, é pré-visualizado exatamente como inserido.

Clique em Inserir no campo de imagem para copiar a URL gerada para o campo Imagem acima.

Adicionar localizações

Por padrão, uma in-app nativa tem um idioma. Para adicionar mais:

Nota

O seletor de idioma aqui conta apenas os 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.

1. Clique em + ao lado do seletor de idioma na barra superior.
2. Selecione os idiomas a serem adicionados e clique em Aplicar.

3. Use o seletor de idioma na barra superior para alternar entre os idiomas e preencher os campos de texto para cada um.

Nota

Quando você adiciona um idioma, a Pushwoosh copia o conteúdo do idioma padrão para ele: texto, imagens e rótulos de botões. Alterne para esse idioma e edite qualquer um desses campos de forma independente.

Salvar o modelo

Clique em Salvar no canto superior direito para persistir suas alterações.

O modelo então aparece em Conteúdo → In-apps ao lado de seus outros modelos de in-app.

Usá-lo em uma campanha

Um modelo de in-app nativa aparece no seletor de modelos junto com seus outros modelos de in-app.

Você pode usá-lo para:

• Enviar uma in-app instantânea
• Adicionar uma etapa de in-app a uma Customer Journey
• Abrir uma in-app quando o usuário tocar em um push

Nota

As configurações de entrega, como datas de início e término e limitação de frequência, funcionam da mesma forma que para qualquer outra in-app e não fazem parte deste editor.