Criar mensagens in-app nativas

As mensagens in-app nativas usam layouts prontos que o SDK da Pushwoosh renderiza diretamente no dispositivo, em vez da página HTML que uma mensagem 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 mensagem 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 mensagem in-app baseada em HTML em vez disso.

Pré-requisitos

Necessária assistência do desenvolvedor

Você pode criar um modelo de in-app nativo no Painel de Controle sem nenhuma alteração de 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+.

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 ou banner.
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 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 desejar um controle ✕ para que os usuários possam dispensar a mensagem 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. 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.
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 Fechar se desejar um controle ✕ para que os usuários possam dispensar a mensagem 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 na parte superior, semelhante às stories 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).
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 repita os passos 1-3 para ele.
5. Em Configuração, ative Loop se desejar que a story comece novamente do primeiro slide após o último terminar.
6. Ative o 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 story finalizada aparece para o usuário

Folha

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 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.
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 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).
2. Defina a Ação para o cartão. Escolha fechar para dispensar a mensagem 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 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.
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 Fechar 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 dispense.
4. Defina a cor de fundo para a barra.
5. Ative o 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 Fechar automaticamente em branco, o banner permanecerá na tela sem nenhuma maneira de dispensá-lo. Um toque sempre abrirá o link em vez de fechá-lo.

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 de Tag Padrão.
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 que o 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 e folha 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 mensagem 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 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 mensagem in-app.

Adicionar localizações

Por padrão, uma mensagem 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 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 uma mensagem in-app instantânea
• Adicionar uma etapa de in-app a uma Customer Journey
• Abrir uma mensagem 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 mensagem in-app e não fazem parte deste editor.