Pular para o conteúdo principal

​
Visão geral

O editor drag-and-drop do OneSignal permite que você construa mensagens in-app usando elementos de blocos modulares — sem necessidade de codificação. Se você prefere marcação, veja Criar Mensagens In-App com HTML.

Editor drag and drop IAM

​
Pré-requisitos

  • SDK OneSignal instalado e inicializado no seu aplicativo.
  • SDKs recomendados para recursos mais recentes: iOS 5.1.5+, Android 5.1.9+. Veja mínimos de recursos específicos abaixo.
  • Imagens hospedadas em um CDN performático (recomendado se auto-hospedado) e dimensionadas apropriadamente.

​
Tipos de mensagem (Layout)

Como a mensagem aparece na tela:
Tipo de MensagemDescrição
TopDesliza de cima para baixo. Bom para anúncios pequenos e confirmações.
CenterExpande do centro e preenche parcialmente a tela. Equilibrado para a maioria dos casos de uso.
BottomDesliza de baixo para cima. Ótimo para snackbars e prompts de consentimento.
FullExpande para preencher a tela. Use com ou sem margens. Adicione um Carrossel para fluxos de múltiplas telas.

Imagem mostrando tipos de In-Apps que você pode criar.

​
Carrosséis

Carrosséis permitem que você crie fluxos de múltiplas telas—onboarding, tours de recursos ou ofertas de múltiplas etapas. Selecione o tipo de mensagem Full e clique no botão Create Carousel. Você pode adicionar até 10 cards (telas). Cada card pode ter qualquer combinação de blocos personalizáveis.

Exemplo de carrossel

​
Suporte a orientação

Mensagens in-app suportam modos retrato e paisagem.

Imagem mostrando orientações retrato e paisagem.

​
Blocos e configurações de layout

Tudo fica dentro de um bloco Background (a tela). Use Padding no Background para espaçamento externo; use Margin em blocos individuais para espaçamento entre elementos. Regras rápidas para layouts consistentes
  1. Use Padding para controlar distância das bordas da mensagem.
  2. Use Margin para separar blocos (por exemplo, título → botão).
  3. Evite empilhar padding e margins grandes no mesmo lado.
  4. Prefira layouts centralizados baseados em fluxo em vez de posicionamento absoluto.
  5. Sempre Pré-visualize em diferentes dispositivos antes de publicar.

Bloco Background (tela)

​
Text

Use para títulos, descrições ou texto personalizado.
  • 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

Bloco de texto

​
Image

Adicione imagens para ilustrar recursos ou ofertas. Formatos: .jpg, .png, .gif (máx 5MB). Prefira URLs hospedadas para desempenho.
  • Proporções de aspecto: 16:9, 4:3, 3:2 recomendadas.
  • Ação de clique: Opcional (link, deep link, tag, outcome, prompt).
Avançado:
  • Dismiss on click
  • Margins: Espaço ao redor do bloco.
Dicas
  • Referencie diferentes imagens no seu servidor baseadas em tags. Veja URLs Dinâmicas.
    • Exemplo de URL de imagem: https://example.com/images/{{ tag_key }}.png

Bloco de imagem

​
Button

Direcione ações como navegação, feedback ou prompts de permissão.
  • Texto e fonte: Personalize texto CTA e estilo.
  • Cor e tamanho: Personalize visuais do botão.
  • Imagem: Ícone/imagem opcional.
  • Raio de canto: Defina arredondamento.
  • Ação de clique: Suporta marcação, outcomes, prompts e deep links.
Avançado
  • Dismiss on click
  • Margins: Espaço ao redor do bloco.
  • Bordas e sombras: Totalmente personalizáveis.
Dicas
  • Personalize texto do botão ou links com tags de dados.
  • Faça um botão apenas de imagem definindo opacidade do fundo = 0.
  • Use sombras sutis (baixa opacidade, alto desfoque) para elevar CTAs primários.

Bloco de botão

​
Close button

Controle a visibilidade e estilo do ícone de fechar (X).
  • Toggle: Habilitar/desabilitar.
  • Ícone personalizado: .jpg, .png, .svg, .gif. Tamanho recomendado: 10x10px.
  • Ação de clique: Opcional.
Avançado
  • Margins: Espaço ao redor do bloco.
Dicas
  • Se você desabilitar o botão de fechar, certifique-se de definir uma ação de fechar ou tempo de fechamento para permitir que os usuários saiam.
  • Útil para carrosséis quando você quer que os usuários progridam por todos os cards.

Botão de fechar

​
Background

Defina a base para seu layout e identidade de marca.
  • Suporte a imagem: .jpg, .png, .gif
  • Cor: Suporta RGBA
  • Ação de clique: Opcional
Avançado
  • Padding: Espaço entre conteúdo e bordas da mensagem (padrão 24px)
  • Dismiss on click

Editor de fundo

​
Personalização e localização

Use tags de dados para personalizar o in-app por usuário. Para localização, veja Mensagens multilíngue para mais detalhes.

​
FAQ

​
Como posso fazer um in-app de tela cheia? Qual versão do SDK eu preciso?

Para criar uma mensagem in-app sem margens:
  • iOS SDK 3.9.0+
  • Android SDK 4.6.3+
Usuários em SDKs mais antigos ainda verão a mensagem, mas com margens padrão.

​
Posso remover o fundo cinza ou sombra de in-apps estilo banner?

Para remover sobreposições para banners superior/inferior, atualize seus SDKs e configure o seguinte: iOS 5.1.5+ 
<key>OneSignal_in_app_message_hide_drop_shadow</key>
<true/>
<key>OneSignal_in_app_message_hide_gray_overlay</key>
<true/>
Android 5.1.9+ 
<meta-data android:name="com.onesignal.inAppMessageHideGrayOverlay" android:value="true"/>
<meta-data android:name="com.onesignal.inAppMessageHideDropShadow" android:value="true"/>