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

# Integrar usuários com mensagens in-app de banner

> Guie os usuários com mensagens in-app de banner contextuais no topo e na parte inferior que não bloqueiam a interface do seu aplicativo.

As Mensagens In-App de Banner (IAMs) permitem que você guie os usuários sem bloquear a interface do seu aplicativo. Você exibe mensagens curtas e contextuais no topo ou na parte inferior da tela enquanto os usuários continuam interagindo com seu aplicativo.

Você normalmente usa IAMs de banner quando os usuários precisam de contexto extra em um momento específico, como a primeira vez que chegam a uma tela ou iniciam um fluxo de trabalho importante.

<Info>
  As Mensagens In-App são exibidas apenas quando suas condições de gatilho são atendidas. Você controla exatamente quando um banner aparece definindo gatilhos do seu aplicativo.
</Info>

***

## Quando usar IAMs de banner

Use IAMs de banner para onboarding quando você quiser:

* Explicar uma tela quando o usuário chega nela
* Guiar os usuários através de fluxos de várias etapas
* Destacar ações que os usuários devem tomar em seguida
* Manter o onboarding visível, mas não intrusivo

Se você precisa de um passo a passo estruturado com várias telas, use um IAM de card ou carrossel em vez disso.

***

## Exemplo de fluxo de onboarding

Quando um usuário abre seu site ou aplicativo pela primeira vez, um banner no topo dá as boas-vindas e incentiva a exploração. Quando o usuário toca em um produto para ver os detalhes, um banner na parte inferior o guia sobre o que fazer em seguida. Cada banner aparece apenas quando o usuário chega à tela relevante.

Esta abordagem garante que os usuários vejam orientação apenas quando for relevante.

### Exemplo visual: Onboarding de e-commerce

Veja como IAMs de banner guiam os usuários através de um aplicativo de e-commerce. Este exemplo usa **dois IAMs separados**, cada um com **fechamento automático de 3 segundos**. Quando o primeiro banner fecha, o gatilho para o segundo banner é ativado, criando um fluxo sequencial suave:

<Columns cols={2}>
  <Card title="Banner de boas-vindas inicial" icon="hand-wave">
    <Frame>
      <img src="https://mintcdn.com/onesignal/yfdI7grM87DeSRfh/images/iam/iam-onboarding-welcome-banner.png?fit=max&auto=format&n=yfdI7grM87DeSRfh&q=85&s=0870317f04e17618fe31e49a525e3caa" alt="Banner de boas-vindas exibindo 'Toque em qualquer produto para saber mais e começar a comprar!'" width="819" height="1723" data-path="images/iam/iam-onboarding-welcome-banner.png" />
    </Frame>

    Quando os usuários abrem o aplicativo pela primeira vez, um banner na parte inferior os incentiva a explorar produtos.
  </Card>

  <Card title="Banner de seleção de produto" icon="cart-shopping">
    <Frame>
      <img src="https://mintcdn.com/onesignal/yfdI7grM87DeSRfh/images/iam/iam-onboarding-product-banner.png?fit=max&auto=format&n=yfdI7grM87DeSRfh&q=85&s=dee390192eec8bae2c8da54c4a9ec983" alt="Banner de produto exibindo 'Você está visualizando um produto! Confira todos os detalhes e adicione ao carrinho quando estiver pronto.'" width="776" height="1485" data-path="images/iam/iam-onboarding-product-banner.png" />
    </Frame>

    Quando um usuário toca em um produto, um banner fornece orientação para a visualização de detalhes do produto.
  </Card>
</Columns>

***

## Pré-requisitos

Antes de começar, certifique-se de ter:

* Um aplicativo OneSignal ativo
* SDK OneSignal instalado em seu aplicativo
* A capacidade de disparar eventos ou chamar métodos do código do seu aplicativo
* [Consentimento do usuário](./mobile-sdk-reference#privacy) concedido para o SDK OneSignal (necessário para Mensagens In-App)

***

## Criar uma mensagem in-app de banner

<Steps>
  <Step title="Navegar para Mensagens In-App">
    No painel do OneSignal, vá para **Messages → In-App Messages** e selecione **New In-App Message**.
  </Step>

  <Step title="Escolher tipo de banner">
    Em **Message Type**, escolha **Top** ou **Bottom**.
  </Step>

  <Step title="Projetar seu conteúdo">
    Inclua um título curto que explique o propósito da tela, texto de suporte opcional se necessário, e um botão opcional para guiar a próxima ação.
  </Step>

  <Step title="Configurar gatilhos">
    Adicione um ou mais **[gatilhos de Mensagem In-App](./iam-triggers)** que definem quando o banner deve aparecer. Opcionalmente, adicione condições ou limites para controlar com que frequência a mensagem é exibida.
  </Step>

  <Step title="Definir duração de exibição">
    Escolha entre fechamento automático (banner desaparece após 3-10 segundos) ou fechável pelo usuário (banner permanece até o usuário tocar em fechar).
  </Step>

  <Step title="Ativar a mensagem">
    Salve e ative sua Mensagem In-App de banner.
  </Step>
</Steps>

<Note>
  Use banners no topo para orientação de alta visibilidade e banners na parte inferior para prompts sutis que se alinham com ações primárias. Para onboarding, use fechamento automático para manter o fluxo em movimento sem exigir ação do usuário.
</Note>

<Warning>
  Evite explicações longas. IAMs de banner não são projetados para onboarding ou tutoriais detalhados.
</Warning>

***

## Disparar o banner do seu aplicativo

Você dispara o IAM de banner quando o usuário chega a uma tela específica ou completa uma ação usando gatilhos de Mensagem In-App. Gatilhos são pares de chave-valor que você define do código do seu aplicativo. Quando as condições do gatilho correspondem às regras de exibição do IAM, o banner é exibido.

<CodeGroup>
  ```javascript JavaScript theme={null}
  // Disparar quando o usuário visualiza o dashboard
  OneSignal.addTrigger('dashboard_viewed', 'true');
  ```

  ```swift iOS theme={null}
  // Disparar quando o usuário visualiza o dashboard
  OneSignal.addTrigger("dashboard_viewed", value: "true")
  ```

  ```kotlin Android theme={null}
  // Disparar quando o usuário visualiza o dashboard
  OneSignal.addTrigger("dashboard_viewed", "true")
  ```
</CodeGroup>

<Info>
  Os gatilhos persistem durante a sessão, a menos que você os remova ou atualize. Certifique-se de que cada gatilho represente um momento de onboarding claro e intencional.
</Info>

### Remover gatilhos quando não forem mais necessários

Para evitar que banners reapareçam involuntariamente, remova os gatilhos quando não forem mais necessários:

<CodeGroup>
  ```javascript JavaScript theme={null}
  // Remover gatilho após o usuário completar o onboarding
  OneSignal.removeTrigger('dashboard_viewed');
  ```

  ```swift iOS theme={null}
  // Remover gatilho após o usuário completar o onboarding
  OneSignal.removeTrigger("dashboard_viewed")
  ```

  ```kotlin Android theme={null}
  // Remover gatilho após o usuário completar o onboarding
  OneSignal.removeTrigger("dashboard_viewed")
  ```
</CodeGroup>

***

## Encadear mensagens de banner (opcional)

Você pode guiar os usuários através de um fluxo criando **múltiplos IAMs**, cada um com seu próprio gatilho. Defina cada banner para **fechar automaticamente após 3 segundos** para que o próximo banner possa aparecer. Remova o gatilho anterior antes de adicionar o próximo para evitar sobreposição de banners.

<Tip>
  Para onboarding sequencial suave, crie um IAM por etapa, defina cada um para fechar automaticamente após 3 segundos, e encadeie-os removendo o gatilho anterior ao adicionar o próximo.
</Tip>

### Exemplo: Fluxo de onboarding de e-commerce

1. Página carrega → Gatilho `iam_welcome` → Banner: "🎉 Bem-vindo! Explore nossos produtos"
2. Usuário toca no produto → Gatilho `iam_product_view` → Banner: "👀 Toque em ❤️ para salvar favoritos"
3. Usuário adiciona ao carrinho → Gatilho `iam_add_to_cart` → Banner: "✅ Ótima escolha! Veja o carrinho a qualquer momento"
4. Usuário visualiza carrinho → Gatilho `iam_cart_view` → Banner: "🛒 Revise seus itens aqui"
5. Usuário finaliza compra → Gatilho `iam_checkout` → Banner: "🎊 Obrigado pelo seu pedido!"

<CodeGroup>
  ```javascript JavaScript theme={null}
  // Mover da etapa 1 para a etapa 2
  OneSignal.removeTrigger('iam_welcome');
  OneSignal.addTrigger('iam_product_view', 'true');
  ```

  ```swift iOS theme={null}
  // Mover da etapa 1 para a etapa 2
  OneSignal.removeTrigger("iam_welcome")
  OneSignal.addTrigger("iam_product_view", value: "true")
  ```

  ```kotlin Android theme={null}
  // Mover da etapa 1 para a etapa 2
  OneSignal.removeTrigger("iam_welcome")
  OneSignal.addTrigger("iam_product_view", "true")
  ```
</CodeGroup>

Isso cria onboarding progressivo sem sobrecarregar o usuário.

***

## Verificar a configuração

<Check>
  O banner aparece apenas quando o gatilho é acionado e não bloqueia a interface do aplicativo.
</Check>

Se o banner não aparecer:

* Confirme que a chave e o valor do gatilho correspondem exatamente (sensível a maiúsculas/minúsculas)
* Verifique se o IAM está Ativo no painel
* Verifique os Limites de Frequência - o IAM pode estar com limite de taxa
* Certifique-se de que o usuário atende às Regras de Segmentação (se houver)
* Verifique os logs do console para eventos de gatilho do OneSignal
* Verifique se o consentimento para Mensagens In-App foi concedido (se necessário)

***

## Próximos passos

* Anunciar novos recursos usando Mensagens In-App de banner
* Criar uma experiência de onboarding completa com IAMs de card ou carrossel
* Segmentar usuários para mostrar diferentes mensagens de onboarding com base no nível de experiência
* [Testar A/B](./journeys-actions#abn-tests-multivariate-testing) diferentes mensagens de banner para otimizar o engajamento