Criar mensagens in-app nativas

In-apps nativos usam layouts prontos que o SDK da Pushwoosh renderiza diretamente no dispositivo, em vez da página HTML que um in-app personalizado carrega. Isso faz com que carreguem mais rápido e animem de forma mais suave, e você não precisa de habilidades de design ou desenvolvimento para criar um.

Opte por um in-app nativo 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 um in-app baseado em HTML em vez disso.

Pré-requisitos

Assistência de desenvolvedor necessária

Você pode criar um modelo de in-app nativo 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 nativo, 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 é apenas para iOS por enquanto.

Criar um modelo de in-app nativo

1. Vá para Conteúdo → In-apps.
2. Clique em Criar in-app.
3. Insira um nome para o modelo.
4. Selecione Criar rich media nativo.
5. Em TIPO DE EXIBIÇÃO, escolha um tipo de exibição: modal, tela cheia, stories, folha, carrossel, banner ou vídeo.
6. Clique em Criar in-app.

O editor abre com 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ê troque de tipo 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 o Botão de fechar se quiser um controle ✕ para que os usuários possam dispensar o 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 o Botão de fechar se quiser um controle ✕ para que os usuários possam dispensar o 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 quiser que a história comece novamente do primeiro slide após o último terminar.
6. Ative o Botão de fechar se quiser 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 dispensar.

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 o Botão de fechar se quiser 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 o 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 o Botão de fechar se quiser um controle ✕ para que os usuários possam sair do carrossel sem tocar em um cartão.

Cuidado

Se você desativar o Botão de 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 o Botão de fechar se quiser 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 de 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 está disponível apenas no iOS por enquanto. No Android, um modelo usando este tipo de exibição não é renderizado. Veja Suporte de plataforma para 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 o Botão de fechar se quiser um controle ✕ para que os usuários possam dispensar o 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 User ID.

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

A tag inserida aparece 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 o 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 de fechar e não adicionar nenhum botão, o usuário não terá controle na tela para dispensar o 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 localizações

Por padrão, um in-app nativo 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 através 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. Mude 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 junto com seus outros modelos de in-app.

Usá-lo em uma campanha

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

Você pode usá-lo para:

• Enviar um in-app instantâneo
• Adicionar um passo de in-app a uma Customer Journey
• Abrir um 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 limite de frequência, funcionam da mesma forma que para qualquer outro in-app e não fazem parte deste editor.