Pular para o conteúdo principal
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.
Criando uma mensagem in-app usando o editor drag-and-drop

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

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

​
Escolher um layout de mensagem

O layout de mensagem controla como a mensagem in-app aparece na tela.
TipoMelhor paraComportamento
TopAnúncios concisos e confirmaçõesDesliza de cima para baixo
CenterA maioria dos prompts de marketing e produtoExpande do centro e preenche parcialmente a tela
BottomSnackbars, prompts de consentimentoDesliza de baixo para cima
FullFluxos de onboarding, ofertas de múltiplas etapas, carrosséisExpande para preencher a tela (com margens opcionais)
Layouts de mensagem in-app Top, Center, Bottom e Full

​
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.
Exemplo de carrossel com múltiplos cards de mensagem in-app

​
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.
Mensagem in-app exibida nas orientações retrato e paisagem
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.

​
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.
Controles de padding do background e margin de bloco no editor in-app

​
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
Opções de configuração do bloco de texto no editor

​
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.
    • 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.
Opções de configuração do bloco de imagem no editor
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.

​
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.
Opções de configuração do bloco de botão no editor

​
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
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.
Opções de configuração do botão de fechar no editor

​
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
Controles do bloco de fundo para cor, imagem, padding e ações

​
Personalização e localização

Você pode personalizar mensagens in-app usando tags de dados incluindo dentro de texto, rótulos de botões e URLs. Para localização, veja Mensagens multilíngue.
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

​
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+
iOS Info.plist
<key>OneSignal_in_app_message_hide_drop_shadow</key>
<true/>
<key>OneSignal_in_app_message_hide_gray_overlay</key>
<true/>
Android 5.1.9+
Android Manifest.xml
<meta-data android:name="com.onesignal.inAppMessageHideGrayOverlay" android:value="true"/>
<meta-data android:name="com.onesignal.inAppMessageHideDropShadow" android:value="true"/>

​
Próximos passos