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 os torna mais rápidos para carregar e animar com mais suavidade, 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, lembrete ou anúncio de recurso rapidamente e um layout totalmente personalizado não for necessário. Se você 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, fullscreen e stories. Sheet, carousel e banner precisam do SDK do iOS 7.2.1+ ou do SDK do Android 6.10.1+.

Criar um modelo de in-app nativo

1. Vá para Conteúdo → In-apps.
2. Clique em Adicionar modelo.
3. Insira um nome para o modelo.
4. Selecione Criar rich media nativa.
5. Em TIPO DE EXIBIÇÃO, escolha um tipo de exibição: modal, fullscreen, stories, sheet, carousel ou banner.
6. Clique em Adicionar modelo.

O editor é aberto com uma 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 na parte superior 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.
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 Fechar se quiser um controle ✕ para que os usuários possam descartar 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 em sua mensagem.
5. Em Ações, adicione um ou mais botões. Consulte Configurar botões.

Fullscreen

Uma imagem de capa de ponta a ponta com texto e botões na parte superior. 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.
2. Em Configuração, defina a cor da capa. Ela é exibida enquanto a imagem de capa é carregada, ou sozinha se você deixar a imagem vazia.
3. Ative o Botão Fechar se quiser um controle ✕ para que os usuários possam descartar o in-app sem tocar em um botão.
4. Em Ações, adicione um ou mais botões. Consulte Configurar botões.

Stories

Uma sequência de slides em tela cheia com barras de progresso na parte superior, semelhante às histórias de mídias sociais. Cada slide é sua própria entrada de Stories em Conteúdo.

1. Preencha a Imagem, o Título e a Mensagem do primeiro slide (cada um com sua própria cor de texto).
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 desse 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. Consulte Configurar botões.

4. Clique em Adicionar abaixo do último slide para adicionar outro slide e repita os passos 1-3 para ele.
5. Em Configuração, ative o Loop se quiser que a história recomece do primeiro slide após o término do último.
6. Ative o Botão 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

Sheet

Uma folha inferior que desliza para cima a partir da borda inferior da tela. Uma alça na parte superior permite que os usuários a arrastem para baixo para descartá-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.
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 Fechar se quiser um controle ✕ para que os usuários possam descartar a folha sem tocar em um botão.
4. Em Ações, adicione um ou mais botões. Consulte Configurar botões.

Carousel

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, o Título e a Mensagem do primeiro cartão (cada um com sua própria cor de texto).
2. Defina a Ação para o cartão. Escolha fechar para descartar 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 repita os passos 1-2 para ele.
4. Ative o Botão 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 Fechar e definir a Ação de cada cartão como url, o usuário não terá controle na tela para descartar 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.
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 Descartar automaticamente, 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 descarte.
4. Defina a cor de fundo para a barra.
5. Ative o Botão 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. Consulte 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 Descartar automaticamente vazio, o banner permanecerá na tela sem nenhuma maneira de descartá-lo. Um toque sempre abrirá o link em vez de fechá-lo.

Configurar botões

Modal, fullscreen, cada slide de stories e sheet 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: descarta 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 em 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 descartar o in-app.

Adicionar localizações

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

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ão. Alterne para esse idioma e edite qualquer um desses campos de forma independente.

Salvar o modelo

Clique em Salvar no canto superior direito para salvar 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 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 uma etapa de in-app a uma Customer Journey
• Abrir um in-app quando o usuário toca 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.