---
title: "Crie conteúdo HTML personalizado para campanhas dentro do aplicativo"
slug: "in-app-custom-html"
updated: 2026-06-12T10:30:57Z
published: 2026-06-12T10:30:57Z
canonical: "docs.xtremepush.com/in-app-custom-html"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.xtremepush.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](/documentation/docs/pt-br/in-app-custom-html#in-app-message-configuration-and-sdk-methods).

> [!WARNING]
> 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](/documentation/docs/pt-br/in-app-message-creative-guidelines) 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:

```javascript
<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`.

```javascript
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`.

```javascript
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`.

```javascript
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.

```javascript
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`.

```javascript
InAppMessage.requiresTextInput = true;
```

> [!WARNING]
> 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.

```xml
<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.

```javascript
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.

> [!NOTE]
> 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](/documentation/docs/pt-br/in-app-message-creative-guidelines) para uma comparação completa do suporte a ações entre os tipos de campanha.

```javascript
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

```javascript
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.

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

> [!NOTE]
> 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.

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

> [!NOTE]
> 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:

```xml
<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](/documentation/docs/pt-br/campaign-setup#multi-language-support) 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](/documentation/docs/pt-br/campaign-split-test) 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.

![](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/e645a88-Screenshot_2022-10-11_at_10.05.42(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A28%3A54Z&se=2026-11-04T10%3A28%3A54Z&sr=c&sp=r&sig=NdxBpAQTQXDq%2F53EnugANa%2BZGNYtAhp0AmZb%2Bqk34AM%3D)

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).

![1089](https://cdn.document360.io/b056e88b-f6c1-4bd2-b5b8-08e9336a17c9/Images/Documentation/9c789af-image(1).png?sv=2026-02-06&spr=https&st=2026-11-04T09%3A28%3A54Z&se=2026-11-04T10%3A28%3A54Z&sr=c&sp=r&sig=NdxBpAQTQXDq%2F53EnugANa%2BZGNYtAhp0AmZb%2Bqk34AM%3D)

Exemplo de uma mensagem dentro do app criada usando HTML personalizado.