Pular para o conteúdo principal

​
Visão geral

O OneSignal oferece dois editores de mensagens in-app:
  • Interface gráfica Drag & Drop para criadores não técnicos
  • Editor HTML para desenvolvedores que desejam controle pixel‑perfeito sobre layout, comportamento e responsividade.

Imagem ilustrando código in-app ao lado de uma renderização in-app

O que você pode fazer com o Editor HTML:
  • Layouts: Construir layouts responsivos complexos (por exemplo, CTAs lado a lado).
  • Formulários: Coletar inputs inline (email, feedback, pesquisa).
  • Fontes e Marca: Usar fontes web personalizadas e variáveis CSS.
  • Ações JS: Rastrear cliques, marcar usuários, enviar outcomes e muito mais.

​
Requisitos

  • iOS: 3.9.0+
  • Android: 4.6.3+
    • Se seu aplicativo usa um SDK mais antigo, mensagens in-app serão renderizadas em um layout Center Modal.

​
Criar e pré-visualizar um In‑App HTML

Vá para Messages > New In-App para criar, editar, testar, pausar, duplicar ou excluir suas mensagens in-app.

HTML Templates

Comece rapidamente com templates pré-construídos.

In-app JavaScript Library

Use nossa biblioteca JavaScript para rastrear interações e acionar comportamentos in-app.
Insira seu código HTML no lado esquerdo e visualize-o ao vivo. Use Send Test In-App para testar responsividade e design.

Imagem mostrando o Editor HTML ao lado da pré-visualização

​
Adicionar labels rastreáveis

Adicione data-onesignal-unique-label em elementos interativos para que os cliques sejam rastreados e acionáveis. 
<button class="tag-user" data-onesignal-unique-label="my-tag-user-button">Tag User</button>

​
Vincular ações de clique com JavaScript

// Tag the user when they click a button
document.querySelector(".tag-user").onclick = (e) => {
  OneSignalIamApi.tagUser(e, { fiz: "baz" });
};
Saiba mais na documentação da Biblioteca JS In-App.

​
Suporte a assets

Assets carregam no momento da renderização a partir das URLs que você fornece. 
<img src="https://media.onesignal.com/iam/default_image_20200320.png" alt="Promo" />

​
Personalização

Insira dinamicamente valores de dados do usuário usando sintaxe Liquid: 
<div>Hi there {{ name | default: 'you' }}!</div>
Contextos suportados:
  • Texto dentro de elementos como div, p, li
  • Dentro de blocos <style>
  • Em atributos href, src, action e data
Não suportado em:
  • Dentro de tags <script>
  • Em conteúdo aninhado complexo onde o parsing se torna ambíguo, por exemplo:
<div>
  Hi {{name}}
  <span>Here's your coupon!</span>
</div>

​
Acessibilidade e design responsivo

Use media queries CSS e tipografia de plataforma para adaptar ao tamanho do dispositivo e configurações de texto do OS. 
@media only screen and (max-width: 620px) {
  .btn-primary { width: 100% !important; }
}
/* Respect dynamic text sizes on iOS */
:root { font: -apple-system-body; }

​
Áreas seguras (notches, barras home)

Dispositivos modernos têm áreas seguras (como notches ou barras home). Use variáveis safe-area-inset-* para adicionar padding ao seu layout: 
body {
  padding-top: var(--safe-area-inset-top);
  padding-right: var(--safe-area-inset-right);
  padding-bottom: calc(var(--safe-area-inset-bottom) + 20px);
  padding-left: var(--safe-area-inset-left);
  margin: 0;
}

​
Estilização de modo escuro

Dispositivos móveis e aplicativos frequentemente aplicam ajustes automáticos de modo escuro com base no tema do sistema do usuário. Isso pode fazer com que mensagens in-app (IAMs) apareçam de forma diferente do pretendido. Por exemplo, texto pode inverter cor ou imagens de fundo podem parecer escurecidas. Para garantir que seu IAM tenha aparência consistente em temas claro e escuro, defina estilos explícitos para ambos os modos.

​
Melhores práticas

  • Defina cores explícitas. Sempre defina cores de texto, fundo e botão diretamente em seu HTML ou CSS. Evite cores transparentes ou padrão que dependam do comportamento do sistema.
  • Use media queries prefers-color-scheme. Você pode incluir substituições de modo escuro com: 
    @media (prefers-color-scheme: dark) {
  body {
    background-color: #000000;
    color: #ffffff;
  }
  .button {
    background-color: #ffffff;
    color: #000000;
  }
}
  • Otimize imagens para ambos os modos. Use PNGs transparentes ou SVGs sempre que possível. Para imagens de fundo, teste a legibilidade em temas claro e escuro.
  • Evite inversões duplas. Algumas versões de Android e iOS podem ajustar cores automaticamente. Usar estilos explícitos de modo escuro ajuda a evitar que seu tema escuro personalizado seja invertido novamente pelo OS.
  • Pré-visualize em ambos os modos. Use os temas escuro e claro do seu aplicativo para verificar se texto, botões e fundos têm contraste suficiente e permanecem acessíveis.
Teste em plataformas diferentes. Android WebView, iOS WKWebView e builds web tratam modo escuro de forma diferente. Sempre pré-visualize sua mensagem in-app em ambos os temas antes de publicar.

​
Incorporar vídeos

Você pode incorporar vídeos (por exemplo, YouTube, Vimeo) diretamente em suas mensagens in-app usando <iframe>. Isso é útil para demos, promos ou fluxos de onboarding. A maioria dos navegadores só permite autoplay se o vídeo começar mudo, então sempre inclua &mute=1 na URL de incorporação.
Vídeo com autoplay pode impactar o desempenho. Mantenha vídeos curtos e evite múltiplas incorporações com autoplay em um único in-app.

​
Exemplo: Incorporação de YouTube com autoplay

O snippet abaixo mostra como centralizar um vídeo do YouTube no meio do in-app com um tamanho fixo (560×315): 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin: 0;
        height: 100vh;
        display: flex;
        justify-content: center; /* center horizontally */
        align-items: center;     /* center vertically */
        background: #f0f0f0;     /* optional background */
      }
      .video-box {
        width: 560px;  /* fixed width */
        height: 315px; /* fixed height (16:9 ratio) */
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        border-radius: 8px;
        overflow: hidden;
        background: #000;
      }
      .video-box iframe {
        width: 100%;
        height: 100%;
        border: none;
      }
    </style>
  </head>
  <body>
    <div class="video-box">
      <iframe src="https://www.youtube.com/embed/bH60T1PZg1c?autoplay=1&mute=1"
        allow="autoplay; encrypted-media"
        allowfullscreen>
      </iframe>
    </div>
  </body>
</html>

​
Entendendo o comportamento de autoplay

  • A URL de incorporação (/embed/VIDEO_ID) é necessária para autoplay — links normais watch?v= não funcionarão.
  • Adicionar ?autoplay=1&mute=1 garante que o vídeo reproduza automaticamente e cumpra as regras de autoplay do navegador.
  • O atributo allow=“autoplay; encrypted-media” concede permissão para autoplay.
  • O .video-box usa um tamanho fixo de 560×315px (padrão 16:9 do YouTube) para que o vídeo apareça contido em vez de esticar para tela cheia.
  • O body é definido como um container flex com justify-content: center e align-items: center para posicionar a caixa de vídeo no meio exato da tela.

​
Dicas de desempenho

  • Prefira CSS crítico inline; adie scripts pesados.
  • Otimize imagens (dimensionadas <img> com object-fit), use formatos modernos quando possível.
  • Mantenha payloads HTML concisos; evite grandes blobs base64.
  • Use fontes do sistema ou hospede fontes web performáticas com font-display: swap.
  • Reduza tamanhos de arquivo e use resolução adequada:

​
Testar em dispositivos

Envie mensagens de teste frequentemente para confirmar comportamento e layout em diferentes tipos de dispositivo. Veja Encontrar e definir assinaturas de teste.

​
FAQ

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

Sim. Para banners superiores/inferiores, atualize seus SDKs e defina: 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"/>

​
Posso reutilizar templates in-app de outros provedores?

Sim. Cole seu HTML no editor e substitua analytics/ações pelos métodos JS In‑App do OneSignal.

​
Não tenho templates. Como começo?

Use o template inicial fornecido ou navegue pelos templates disponíveis. Alguma experiência com HTML/CSS é recomendada.

​
Qual versão do SDK é necessária?

  • iOS: 3.9.0+
  • Android: 4.6.3+
SDKs mais antigos retornarão para renderização Center Modal.

​
Mensagens in-app funcionam offline?

Não. Mensagens requerem uma conexão ativa com a internet para buscar e renderizar conteúdo.