Crie conteúdo HTML personalizado para campanhas dentro do aplicativo

Use HTML personalizado para criar campanhas totalmente personalizadas dentro do aplicativo

Para criar uma campanha HTML personalizada dentro do app, vá até a aba Conteúdo da sua campanha e, no menu suspenso Tipo , selecione HTML Personalizado. Essa opção te dá controle total sobre o design visual e o conteúdo das suas campanhas, em comparação com os outros tipos: tela cheia, banner e modal. Você pode usar HTML, CSS e JavaScript para projetar e personalizar totalmente o conteúdo das mensagens dentro do app.

Quando você usa um HTML personalizado dentro do app, o SDK Xtremepush continua a lidar:

Exibindo e descartando a mensagem no momento certo
Posicionamento e animação
Direcionar ações de botões (URLs, deeplinks, requisições de permissões push) para o comportamento nativo correto
Entrega de eventos analíticos

O HTML da sua mensagem dentro do aplicativo deve lidar:

Layout, design e resposta em diferentes tamanhos de tela
Conectando quaisquer elementos interativos (botões, links) usando os InAppMessage métodos JavaScript
Ligando InAppMessage.init() após definir qualquer opção de configuração

Construa sua mensagem

Para esse estilo dentro do app, você precisará escrever seu próprio código HTML tanto para orientação Retrato quanto Paisagem. Por padrão, a orientação retrato está selecionada. Você pode usar CSS e JavaScript conforme necessário. Existem vários métodos JavaScript disponíveis para manipular a mensagem dentro do app, detalhes podem ser encontrados na configuração de mensagens dentro do app e nos métodos SDK.

Apenas especialistas em HTML
Usar seu próprio código pode afetar a forma como a mensagem é exibida em diferentes dispositivos, impedindo que ela se ajuste ao tamanho da tela (ou seja, à "responsividade" da mensagem). Certifique-se de usar HTML responsivo e revise nosso guia de diretrizes criativas dentro do app para melhores resultados.

Configuração de mensagens dentro do aplicativo e métodos do SDK

Inicialize o SDK InAppMessage

Para poder manipular a mensagem do app, você deve adicionar a seguinte linha JavaScript para importar o SDK InAPPMessage no seu HTML personalizado:

<script type = "text/javascript"
src = "https://api.xtremepush.com/sdk/inapp/v1/lib.js?v=1.0"> </script>

Configurar configurações

Existem várias configurações que você pode configurar dentro da tag script mostrada acima para mensagens dentro do app:

Defina se vai ou não esconder a barra de status. Toma true ou false; o padrão é true.

InAppMessage.hideStatusBar = false;

Ative ou desative o estilo padrão de animação de desvanimento. As opções são true ou false; o padrão é true.

InAppMessage.animationFade = false;

Defina o estilo de animação quando a mensagem do app aparece pela primeira vez, o padrão é fade. As opções de estilo são: from-left, from-right, from-top, from-bottom.

InAppMessage.animationSlide = "from-left";

Orientação da exibição da trava. As opções são portrait ou landscape. Por padrão, ele não trava.

InAppMessage.lockOrientation = "portrait";

Se sua mensagem no aplicativo tiver um formulário que requer entrada, você deve definir isso como true; por padrão, é false.

InAppMessage.requiresTextInput = true;

O seguinte método deve ser executado quando todas as configurações acima estiverem definidas:
InAppMessage.init();

Adicione essas configurações ao seu HTML personalizado, conforme mostrado abaixo.

<script type="text/javascript">
InAppMessage.hideStatusBar = false;
InAppMessage.animationSlide = "from-left";
InAppMessage.lockOrientation = "portrait";
InAppMessage.init();
</script>

Métodos SDK

Feche a mensagem no aplicativo

Para encerrar sua mensagem personalizada no app, chame o seguinte método. O argumento string é um identificador de ação usado para rastreamento de análises. Você pode usar qualquer etiqueta conforme sua necessidade.

InAppMessage.close('close_button');

Execute uma ação a partir da mensagem do aplicativo

O action método é a principal forma de acionar comportamentos de navegação com um clique de botão — equivalente às opções de ação de navegação disponíveis nos construtores de campanhas Modal, Tela Cheia e Banner. Ele fecha a mensagem dentro do app e então executa a ação.

Ações de salvamento (Definir Atributo, Adicionar à Lista, Assinar, Ativar Evento) não estão disponíveis em campanhas HTML personalizadas. Veja Ações de botões no aplicativo para uma comparação completa do suporte a ações entre os tipos de campanha.

InAppMessage.action(actionIdentifier, value, mode);

Argumento	Descrição
`actionIdentifier`	Uma string de rótulos usada para rastreamento de análises. Pode ter qualquer valor.
`value`	A URL ou o deep link para abrir. Passe uma string vazia se não for aplicável (por exemplo, para `request_push_permission`).
`mode`	O tipo de ação a realizar. Veja a tabela abaixo.

Modos disponíveis:

Modo	Comportamento
`'outside'`	Abre a URL no navegador padrão do dispositivo.
`'inside'`	Abre a URL em um WebView dentro do app, mantendo o usuário dentro do app em vez de mudar para o navegador.
`'deeplink'`	Ele dispara o deeplink via o handler de deeplink registrado do SDK nativo.
`'dismiss'`	Fecha a mensagem no app e registra o identificador de ação na análise de cliques. Use isso em vez de `close()` quando você quer que um botão de dispensar apareça como um evento nomeado no relatório.
`'none'`	Registra o identificador de ação no analytics sem fechar o in-app ou navegar. Útil para acompanhar interações em uma experiência HTML personalizada de várias páginas, onde você quer registrar um toque de botão sem deixar a mensagem.
`'request_push_permission'`	Aciona o diálogo nativo de permissão de notificação push do sistema operacional.

Abra uma URL no navegador

InAppMessage.action('url_button', 'https://xtremepush.com', 'outside');

Abra um deeplink

Use isso para navegar até uma tela específica no seu app. A string de deeplink é passada para o ouvinte/delegado de deeplink registrado no SDK nativo, e seu app deve ter um registrado para que isso funcione.

InAppMessage.action('deeplink_button', 'myapp://home', 'deeplink');

Manuseio de deeplink
A string de deeplink é passada para o handler nativo de deeplink do seu app. O SDK não lida diretamente com a navegação. No Android, esse é o seu DeeplinkListener e no iOS, este é o delegado de deeplink do XP. Se nenhum handler for registrado, o deeplink será ignorado silenciosamente.

Solicitar permissão para notificação push

Use isso para acionar o diálogo nativo de permissão de push do sistema operacional diretamente a partir de um toque de botão no app. Isso é normalmente usado para criar um push primer, que é uma mensagem personalizada dentro do app que explica o valor das notificações push antes do aparecimento do prompt do sistema operacional.

InAppMessage.action('primer_button', '', 'request_push_permission');

Comportamento do primer de empurrar
O SDK suprime automaticamente essa mensagem dentro do app se a permissão push já tiver sido concedida, então é seguro agendar esta campanha sem condições adicionais. No Android, isso requer nível de API 33 (Android 13) ou superior. A mensagem dentro do aplicativo é suprimida em versões anteriores.

Exemplo de mensagem HTML personalizada

Abaixo está um exemplo de uma mensagem HTML personalizada no app com um botão URL, um botão de deep link e um botão de fechar:

<body style="background:grey;border:10px solid blue;padding:5;margin:0">
<script type="text/javascript" src="https://api.xtremepush.com/sdk/inapp/v1/lib.js?v=1.0"></script>
<button onclick="InAppMessage.action('url_button', 'https://xtremepush.com', 'outside');">Open Website</button>
<button onclick="InAppMessage.action('deeplink_button', 'myapp://home', 'deeplink');">Go to Home</button>
<button onclick="InAppMessage.close('close_button');">Close</button>
<script type="text/javascript">
InAppMessage.hideStatusBar = false;
InAppMessage.animationSlide = "from-left";
InAppMessage.lockOrientation = "portrait";
InAppMessage.init();
</script>
</body>

Multilíngue e variantes

É possível criar uma campanha multilíngue com diferentes criativos com base nos idiomas selecionados no nível da campanha. Também é possível fazer um teste dividido para ver qual variante tem melhor engajamento. Ambas as opções são ativadas e configuradas na aba Configuração .

Os idiomas que você selecionou, junto com as variantes selecionadas, são mostrados no lado esquerdo da campanha. Para poder identificar com qual variante e idioma você está trabalhando, essas informações são exibidas no topo da tela.

Este exemplo mostra uma campanha multilíngue para inglês e hindi combinada com testes divididos. Atualmente, o conteúdo mostrado é para a versão em inglês da variante A.

Ações

O botão Ações permite que você aplique um modelo previamente criado a partir de Modelos de Conteúdo > a uma campanha e copie o conteúdo de um idioma e variante específicos. Para copiar o conteúdo, clique em Copiar de quando estiver na variante e no idioma onde deseja aplicar o conteúdo. O sistema mostrará as opções disponíveis para copiar.

Pré-visualize sua mensagem

A área de visualização exibe a visualização atual da mensagem, atualizada conforme os componentes mudam. Você pode selecionar diferentes tamanhos para celulares e tablets, para mostrar a prévia da sua mensagem no app em diferentes tamanhos de tela. Clique em Customizado se quiser visualizar a mensagem em um modelo diferente dos disponíveis. Insira a quantidade desejada de pixels (largura e comprimento).