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

# Criar mensagens in-app com drag-and-drop

> Use o compositor visual do OneSignal para construir mensagens in‑app de alta conversão com blocos, layouts, carrosséis e personalização.

O editor drag-and-drop do OneSignal permite que você construa mensagens in-app usando blocos modulares — sem necessidade de codificação. Se você prefere marcação, veja [Criar Mensagens In-App com HTML](./design-your-in-app-message-with-html).

<Frame caption="Editor drag-and-drop de mensagens in-app">
  <img src="https://mintcdn.com/onesignal/yt4lRKoquAlWvRvF/images/iam/iam-block-create.gif?s=f3a6e2388fc6855a2fc8378fb5ce51b1" alt="Criando uma mensagem in-app usando o editor drag-and-drop" width="780" height="589" data-path="images/iam/iam-block-create.gif" />
</Frame>

## Pré-requisitos

* Você instalou e inicializou o SDK do OneSignal no seu aplicativo.
* Você está usando os SDKs recomendados para os recursos mais recentes do editor:
  * iOS 5.1.5+
  * Android 5.1.9+
* Se não estiver fazendo upload de imagens para o OneSignal, suas imagens devem estar hospedadas em uma URL pública e rápida (CDN recomendado) e dimensionadas adequadamente para telas mobile.

<Warning>
  Certifique-se de usar a versão mais recente do SDK do OneSignal no seu aplicativo.
  Versões mais antigas ainda podem exibir a mensagem, mas com estilização de fallback (por exemplo, margens padrão ou sobreposições padrão). Use **Pré-visualização** e **testes em dispositivo** para confirmar o comportamento nas versões mínimas do SDK que você suporta.
</Warning>

***

## Começar a partir de um modelo pré-construído

Modelos pré-construídos ajudam você a lançar rapidamente com layouts projetados para conversão (incluindo prompts de permissão). Escolha um modelo, depois atualize o texto, as cores e as ações para combinar com sua marca.

<Note>
  **Teste em dispositivo:** Os designs pré-construídos foram testados em Pixel 6+, iPhone (iOS 14+), Huawei Nova 9, Huawei P50 Foldable e iPad (10ª geração+). Esses modelos são otimizados para orientação retrato e podem não ser exibidos como esperado no modo paisagem.
</Note>

***

## Escolher um layout de mensagem

O layout de mensagem controla como a mensagem in-app aparece na tela.

| Tipo       | Melhor para                                                   | Comportamento                                         |
| ---------- | ------------------------------------------------------------- | ----------------------------------------------------- |
| **Top**    | Anúncios concisos e confirmações                              | Desliza de cima para baixo                            |
| **Center** | A maioria dos prompts de marketing e produto                  | Expande do centro e preenche parcialmente a tela      |
| **Bottom** | Snackbars, prompts de consentimento                           | Desliza de baixo para cima                            |
| **Full**   | Fluxos de onboarding, ofertas de múltiplas etapas, carrosséis | Expande para preencher a tela (com margens opcionais) |

<Frame caption="Tipos de layout de mensagem in-app">
  <img src="https://mintcdn.com/onesignal/RWtLFPeffHrC81wI/images/docs/a675b8f-Type.png?fit=max&auto=format&n=RWtLFPeffHrC81wI&q=85&s=e04ab2110fcd37eb6481db3dd8c63ece" alt="Layouts de mensagem in-app Top, Center, Bottom e Full" width="1115" height="788" data-path="images/docs/a675b8f-Type.png" />
</Frame>

### Construir fluxos de múltiplas telas com carrosséis

Carrosséis permitem que você crie experiências in-app de múltiplas telas como onboarding, tours de recursos ou ofertas de múltiplas etapas.

1. Selecione o tipo de mensagem **Full**.
2. Clique em **Create Carousel**.
3. Adicione até 10 cards (telas).
4. Personalize cada card com qualquer combinação de blocos.

<Frame caption="Exemplo de carrossel">
  <img src="https://mintcdn.com/onesignal/yt4lRKoquAlWvRvF/images/iam/carousel.gif?s=0ebac15f1b7b55229705970a84bda5be" alt="Exemplo de carrossel com múltiplos cards de mensagem in-app" width="900" height="800" data-path="images/iam/carousel.gif" />
</Frame>

### Suporte a orientação

Mensagens in-app suportam retrato e paisagem, mas os layouts (especialmente modelos) podem precisar de ajustes para ficarem ótimos em ambos.

<Frame caption="Exemplos de mensagem in-app em retrato e paisagem">
  <img src="https://mintcdn.com/onesignal/Z6xkXGfmy814If53/images/docs/e2b95e5-IAM-portrait-landscape.png?fit=max&auto=format&n=Z6xkXGfmy814If53&q=85&s=25028bc942075b84814ae5ee850bf458" alt="Mensagem in-app exibida nas orientações retrato e paisagem" width="1279" height="564" data-path="images/docs/e2b95e5-IAM-portrait-landscape.png" />
</Frame>

<Note> Se você espera uso frequente em paisagem (tablets, jogos, aplicativos de vídeo), teste sua mensagem em paisagem antes de publicar. Layouts largos frequentemente precisam de tamanhos de texto menores, espaçamento mais compacto ou menos blocos empilhados. </Note>

***

## Usar blocos e espaçamento para layouts limpos

Tudo é colocado no bloco Background (sua tela). Use:

* **Padding** no **Background** para espaço entre seu conteúdo e as bordas da mensagem.
* **Margin** em blocos individuais para espaço entre elementos (título → imagem → botão).

**Regras rápidas para layouts consistentes**

1. Use **Padding** para controlar a distância das bordas da mensagem.
2. Use **Margin** para separar blocos verticalmente.
3. Evite empilhar padding e margins grandes no mesmo lado.
4. Prefira layouts centralizados baseados em fluxo em vez de designs compactos/alinhados às bordas.
5. Sempre use **Pré-visualização** em múltiplos tamanhos de dispositivo antes de publicar.

<Frame caption="Padding vs. margin no editor">
  <img src="https://mintcdn.com/onesignal/yt4lRKoquAlWvRvF/images/iam/padding-margin.png?fit=max&auto=format&n=yt4lRKoquAlWvRvF&q=85&s=f328dfed369bb0369a825818cb264802" alt="Controles de padding do background e margin de bloco no editor in-app" width="1536" height="1024" data-path="images/iam/padding-margin.png" />
</Frame>

***

## Referência de blocos

Use esses blocos para construir sua mensagem. Cada bloco suporta estilização e (na maioria dos casos) uma ação de clique opcional.

### Bloco de texto

Use para títulos, descrições, disclaimers ou texto personalizado.

**O que você pode personalizar**

* **Dimensionamento responsivo**: Largura/altura em porcentagens.
* **Fontes**: Google Fonts.
* **Formatação**: Negrito, itálico, sublinhado.
* **Cor**: Hex ou RGBA (suporta transparência).
* **Alinhamento**: Esquerda, centro, direita.
* **Tamanho**: Tamanho de fonte ajustável.

**Avançado**

* **Margins**: Espaço ao redor do bloco.

**Dicas**

* Localize com segmentos baseados em idioma ou [usando sintaxe Liquid](./using-liquid-syntax).
* Personalize com [tags de dados](./message-personalization).

<Frame caption="Bloco de texto">
  <img src="https://mintcdn.com/onesignal/RWtLFPeffHrC81wI/images/docs/a556236-Screenshot_2022-12-10_at_5.45.53_PM.png?fit=max&auto=format&n=RWtLFPeffHrC81wI&q=85&s=cec5db0519c7ec85ddce8bcc9e4b190f" alt="Opções de configuração do bloco de texto no editor" width="1004" height="836" data-path="images/docs/a556236-Screenshot_2022-12-10_at_5.45.53_PM.png" />
</Frame>

### Bloco de imagem

Use imagens para reforçar a oferta, mostrar um recurso ou adicionar identidade de marca.

**Formatos e limites suportados**

* `.jpg`, `.png`, `.gif`
* Tamanho máximo de arquivo: 5MB

**Dicas e recomendações**

* Use proporções de aspecto comuns como `16:9`, `4:3` ou `3:2`.
* Você pode trocar dinamicamente links e URLs de imagem usando caminhos hospedados no servidor. Veja [URLs Dinâmicas](./links#dynamic-urls).
  * Exemplo: `https://example.com/images/{{ tag_key }}.png`

**O que você pode personalizar**

* **URL da imagem**: Hospedada é recomendado para desempenho.
* **Ação de clique**: Opcional (link, deep link, tag, outcome, prompt).

**Avançado**

* **Dismiss on click**
* **Margins**: Espaço ao redor do bloco.

<Frame caption="Bloco de imagem">
  <img src="https://mintcdn.com/onesignal/6v_cVPknFpo5qSVB/images/docs/0cc2179-Screenshot_2022-12-10_at_5.46.27_PM.png?fit=max&auto=format&n=6v_cVPknFpo5qSVB&q=85&s=440933533b6d5985256b0ef45a5802a6" alt="Opções de configuração do bloco de imagem no editor" width="1004" height="718" data-path="images/docs/0cc2179-Screenshot_2022-12-10_at_5.46.27_PM.png" />
</Frame>

<Warning> Se uma URL de imagem for lenta, bloqueada ou retornar um erro, sua mensagem pode ser renderizada com mídia quebrada ou vazia. Hospede imagens em um CDN confiável e verifique se elas carregam rapidamente em redes mobile. </Warning>

### Bloco de botão

Use botões para ações principais como navegação, coleta de feedback ou prompts de permissão.

**O que você pode personalizar**

* Texto do botão e estilo de fonte
* Cor de fundo, tamanho e raio de canto
* Ícone/imagem opcional
* Ação de clique (marcação, outcomes, prompts, deep links)

**Avançado**

* Dismiss on click
* Margins
* Bordas e sombras

**Dicas**

* Personalize texto do botão ou destinos usando tags.
* Você pode criar um botão apenas de imagem definindo a opacidade do fundo como 0.
* Use sombras sutis (baixa opacidade, maior desfoque) para elevar o CTA principal.

<Frame caption="Configurações do bloco de botão">
  <img src="https://mintcdn.com/onesignal/YOTSrtBSoqdrJ37A/images/docs/49beca3-Screenshot_2022-12-10_at_5.48.17_PM.png?fit=max&auto=format&n=YOTSrtBSoqdrJ37A&q=85&s=f3bce4770825e17bae48c4f5f7d8b385" alt="Opções de configuração do bloco de botão no editor" width="996" height="1578" data-path="images/docs/49beca3-Screenshot_2022-12-10_at_5.48.17_PM.png" />
</Frame>

### Bloco do botão de fechar

O botão de fechar controla se os usuários podem dispensar a mensagem usando um ícone "X".

**O que você pode personalizar**

* Habilitar/desabilitar visibilidade
* Ícone personalizado (`.jpg`, `.png`, `.svg`, `.gif`)
* Tamanho recomendado: `10x10px`
* Ação de clique opcional

**Avançado**

* Margins

<Warning>
  Se você desabilitar o botão de fechar, certifique-se de que os usuários ainda tenham uma forma clara de sair (por exemplo, uma **ação de dispensar** em um botão ou background, ou um temporizador de fechamento se sua experiência usar um). Caso contrário, você corre o risco de prender os usuários na mensagem.
</Warning>

<Frame caption="Configurações do botão de fechar">
  <img src="https://mintcdn.com/onesignal/9_Q1FZLh6C0BFLq-/images/docs/c07a30b-Screenshot_2022-12-10_at_5.49.22_PM.png?fit=max&auto=format&n=9_Q1FZLh6C0BFLq-&q=85&s=acdcebb3ae4e83df14dab2d82753f2bf" alt="Opções de configuração do botão de fechar no editor" width="990" height="732" data-path="images/docs/c07a30b-Screenshot_2022-12-10_at_5.49.22_PM.png" />
</Frame>

### Bloco de fundo

O fundo é a tela que contém seu layout.

**O que você pode personalizar**

* Cor de fundo (RGBA suportado)
* Imagem de fundo (`.jpg`, `.png`, `.gif`)
* Ação de clique opcional

**Avançado**

* Padding (padrão `24px`)
* Dismiss on click

<Frame caption="Configurações do bloco de fundo">
  <img src="https://mintcdn.com/onesignal/6tscVAtiSqz353kV/images/docs/9a441fd-Background_Controls.png?fit=max&auto=format&n=6tscVAtiSqz353kV&q=85&s=04a65877dc5e9818147ba15975cc5e92" alt="Controles do bloco de fundo para cor, imagem, padding e ações" width="1071" height="806" data-path="images/docs/9a441fd-Background_Controls.png" />
</Frame>

***

## Personalização e localização

Você pode personalizar mensagens in-app usando [tags de dados](./add-user-data-tags) incluindo dentro de texto, rótulos de botões e URLs.

Para localização, veja [Mensagens multilíngue](./multi-language-messaging#send-messages-in-different-languages).

<Check>
  Um bom teste de personalização é enviar a mensagem para um pequeno segmento interno com valores de tag conhecidos e confirmar:

  * O texto e as imagens são renderizados com as substituições esperadas
  * Os links resolvem corretamente
  * Os botões disparam os outcomes/tags de clique esperados
</Check>

***

## FAQ

### Posso remover a sobreposição cinza ou sombra de in-apps estilo banner superior/inferior?

Sim—atualize seus SDKs e adicione a configuração abaixo.

**iOS 5.1.5+**

```xml iOS Info.plist theme={null}
<key>OneSignal_in_app_message_hide_drop_shadow</key>
<true/>
<key>OneSignal_in_app_message_hide_gray_overlay</key>
<true/>
```

**Android 5.1.9+**

```xml Android Manifest.xml theme={null}
<meta-data android:name="com.onesignal.inAppMessageHideGrayOverlay" android:value="true"/>
<meta-data android:name="com.onesignal.inAppMessageHideDropShadow" android:value="true"/>
```

***

## Próximos passos

* Saiba mais sobre [Ações de Clique In-App](./iam-click-actions) para personalizar o que acontece quando os usuários clicam em elementos na sua mensagem.
* Experimente diferentes [Gatilhos de Mensagens In-App](./iam-triggers) para controlar quando as mensagens aparecem.
* Precisa de mais personalização? Experimente [Criar Mensagens In-App com HTML](./design-your-in-app-message-with-html).

***