Pular para o conteúdo principal
Use estes templates HTML de copiar/colar para construir mensagens no aplicativo OneSignal personalizadas mais rapidamente. Nosso Editor HTML de Mensagens no Aplicativo permite que você controle totalmente o layout e comportamento de sua mensagem no aplicativo usando HTML, CSS e JavaScript. O editor não inclui templates integrados, mas esta página fornece exemplos prontos para uso que você pode colar no editor e personalizar.
Estes templates são executados dentro de uma webview de mensagem no aplicativo. Para fechar mensagens, abrir URLs, marcar usuários e capturar cliques, use a API JS de Mensagem no Aplicativo.

​
Pré-requisitos

Antes de começar, recomendamos que você revise:
Não coloque segredos (chaves de API, tokens) no código do template. Trate toda entrada de mensagem no aplicativo como não confiável e valide-a em seu aplicativo ou backend.

​
Como usar os templates

  1. No OneSignal, vá para Messages > In-App > New In-App.
  2. Selecione o editor HTML.
  3. Encontre um template abaixo.
  4. Copie o HTML completo do bloco de código e cole no editor.
  5. Atualize os espaços reservados (URLs, endpoints, datas e texto).
  6. Teste em um dispositivo real e depois publique.

​
Templates disponíveis

email-form

Formulário de Coleta de Email

Solicita o email do usuário e o envia para seu aplicativo via nome do clique.
 sms-form

Formulário de Coleta de Números de Telefone

Solicita e obtém consentimento para enviar SMS. Inclui número de telefone no formato E.164 e o envia para seu aplicativo via nome do clique.
 checklist-survey

Pesquisa de Lista de Verificação

Pesquisa de seleção múltipla que você pode enviar para seu backend ou converter em tags.
 count_down

Contagem Regressiva

Timer de contagem regressiva para promoções com prazo limitado.
 promo-wheel

Roda de Promoção

Experiência de promoção gire-para-ganhar (personalize o manuseio da promoção).
 quiz_modal

Modal de Quiz

Experiência de quiz que pode marcar usuários com sua pontuação.
 ranking-survey

Pesquisa de Classificação

Pesquisa de classificação de 1–5 (enviar para seu endpoint ou marcar usuário).
 ui-ui

Player de Áudio/Vídeo

UI simples de prévia de áudio para um arquivo MP3 direto.
 vertical-swiping

Deslize Vertical

Tour de integração ou recurso multi-slide com deslize vertical.

​
Formulário de email

Colete Subscrições de email através de uma mensagem no aplicativo. Como este formulário funciona:
  1. O usuário insere um endereço de email e marca uma caixa de consentimento.
  2. Ao enviar, a API Create User do OneSignal é chamada para criar a Subscrição de email em seu aplicativo.
  3. Além disso, o template chama OneSignalIamApi.addClickName(e, email) que passa o endereço de email para o Listener de Clique de Mensagem no Aplicativo do nosso SDK.
  4. Dentro do seu aplicativo, você pode adicionar o Listener de Clique de Mensagem no Aplicativo para ler o nome do clique e passar o email para o método addEmail do nosso SDK.
Você pode notar que os passos 2 e 4 envolvem criar a Subscrição de email.
  • O passo 2 não requer adicionar código diretamente no aplicativo, mas também não adiciona a Subscrição de email ao usuário se você chamou o método login.
  • O passo 4 requer código adicional (o Listener de Clique de Mensagem no Aplicativo), mas também adiciona a Subscrição de email ao usuário se você chamou o método login.
**Substitua YOUR_APP_ID pelo seu ID do Aplicativo OneSignal encontrado em Configurações > Chaves e IDs.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <!-- Prevenir zoom do iOS no foco do input -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        /* ===== RESET ===== */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        /* ===== BASE ===== */
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: transparent;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }
        
        /* ===== CARD ===== */
        .container {
            position: relative;
            background: #ffffff;
            border-radius: 16px;
            padding: 32px 24px;
            max-width: 340px;
            width: 100%;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
            text-align: center;
        }
        
        /* ===== BOTÃO FECHAR ===== */
        .close-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            background: none;
            border: none;
            font-size: 24px;
            color: #999;
            cursor: pointer;
            padding: 4px 8px;
            line-height: 1;
        }
        
        .close-btn:hover {
            color: #333;
        }
        
        /* ===== TIPOGRAFIA ===== */
        h1 {
            font-size: 22px;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
        }
        
        p {
            font-size: 14px;
            color: #666;
            margin-bottom: 24px;
            line-height: 1.5;
        }
        
        /* ===== INPUT EMAIL ===== */
        .email-input {
            width: 100%;
            padding: 14px 16px;
            font-size: 16px; /* 16px previne zoom automático no iOS */
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            margin-bottom: 16px;
            outline: none;
            transition: border-color 0.2s;
            touch-action: manipulation;
        }
        
        .email-input:focus {
            border-color: #007AFF;
        }
        
        .email-input::placeholder {
            color: #aaa;
        }
        
        /* ===== CHECKBOX CONSENTIMENTO ===== */
        .consent-wrapper {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            text-align: left;
            margin-bottom: 16px;
        }
        
        .consent-wrapper input[type="checkbox"] {
            width: 18px;
            height: 18px;
            margin-top: 2px;
            cursor: pointer;
            flex-shrink: 0;
        }
        
        .consent-wrapper label {
            font-size: 13px;
            color: #666;
            line-height: 1.4;
            cursor: pointer;
        }
        
        /* ===== BOTÃO ENVIAR ===== */
        .submit-btn {
            width: 100%;
            padding: 14px 24px;
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            background: #007AFF;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: background 0.2s, opacity 0.2s;
        }
        
        .submit-btn:hover {
            background: #0056b3;
        }
        
        .submit-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            opacity: 0.7;
        }
        
        /* ===== MENSAGENS DE STATUS ===== */
        .error-msg,
        .success-msg {
            font-size: 12px;
            margin-top: -12px;
            margin-bottom: 12px;
            display: none;
        }
        
        .error-msg {
            color: #e53935;
        }

        .success-msg {
            color: #4CAF50;
            font-size: 14px;
        }
        
        /* ===== ESTADO LOADING ===== */
        .loading {
            pointer-events: none;
            opacity: 0.7;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- Botão Fechar -->
        <button id="close-btn" class="close-btn" data-onesignal-unique-label="close-button">×</button>
        
        <!-- Cabeçalho -->
        <h1>Mantenha-se Conectado!</h1>
        <p>Digite seu email para receber atualizações e ofertas exclusivas. Você pode cancelar a inscrição a qualquer momento!</p>
        
        <!-- Input Email -->
        <input 
            type="email" 
            id="email-input" 
            class="email-input" 
            placeholder="Digite seu email" 
            data-onesignal-unique-label="email-input" 
            autocomplete="email" 
            autocapitalize="off"
        >
        
        <!-- Mensagens de Status -->
        <p id="error-msg" class="error-msg">Por favor, digite um endereço de email válido</p>
        <p id="success-msg" class="success-msg">Obrigado por se inscrever!</p>
        
        <!-- Checkbox Consentimento -->
        <div class="consent-wrapper">
            <input type="checkbox" id="consent-checkbox" name="consent">
            <label for="consent-checkbox">Concordo em receber emails de marketing</label>
        </div>
        
        <!-- Botão Enviar -->
        <button id="submit-btn" class="submit-btn" data-onesignal-unique-label="submit-email" disabled>
            Inscrever-se
        </button>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            
            // ===== REFERÊNCIAS DOM =====
            var emailInput = document.getElementById("email-input");
            var submitBtn = document.getElementById("submit-btn");
            var closeBtn = document.getElementById("close-btn");
            var errorMsg = document.getElementById("error-msg");
            var successMsg = document.getElementById("success-msg");
            var consentCheckbox = document.getElementById("consent-checkbox");
            
            // ===== FUNÇÕES AUXILIARES =====
            
            // Validar formato do email
            function isValidEmail(email) {
                return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
            }
            
            // Habilitar botão de envio apenas quando email é válido E consentimento é marcado
            function updateSubmitState() {
                var email = emailInput.value.trim();
                submitBtn.disabled = !(isValidEmail(email) && consentCheckbox.checked);
            }
            
            // Criar subscrição de email via API OneSignal
            async function createOneSignalUser(email) {
                // ⚠️ Substituir pelo seu ID do Aplicativo OneSignal
                var appId = "YOUR_APP_ID";
                var url = "https://api.onesignal.com/apps/" + appId + "/users";
                
                var payload = {
                    properties: {
                        tags: { email_created_from: "iam" },
                        language: "pt"
                    },
                    subscriptions: [{
                        type: "Email",
                        token: email,
                        enabled: true
                    }]
                };
                
                var response = await fetch(url, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify(payload)
                });
                
                if (!response.ok) throw new Error("Solicitação da API falhou");
                return response.json();
            }
            
            // ===== LISTENERS DE EVENTO =====
            
            // Botão fechar - fechar IAM
            closeBtn.addEventListener("click", function(e) {
                OneSignalIamApi.close(e);
            });
            
            // Checkbox - atualizar estado do botão
            consentCheckbox.addEventListener("change", updateSubmitState);
            
            // Input email - atualizar estado do botão e ocultar erros
            emailInput.addEventListener("input", function() {
                errorMsg.style.display = "none";
                updateSubmitState();
            });
            
            // Input email - enviar com tecla Enter
            emailInput.addEventListener("keypress", function(e) {
                if (e.key === "Enter" && !submitBtn.disabled) {
                    submitBtn.click();
                }
            });
            
            // Botão enviar - lidar com subscrição
            submitBtn.addEventListener("click", async function(e) {
                var email = emailInput.value.trim();
                
                if (!isValidEmail(email) || !consentCheckbox.checked) {
                    errorMsg.textContent = "Por favor, digite um endereço de email válido";
                    errorMsg.style.display = "block";
                    return;
                }
                
                // Passar email para o handler de clique OneSignal (deve ser chamado sincronicamente)
                OneSignalIamApi.addClickName(e, email);
                
                // Mostrar estado de loading
                errorMsg.style.display = "none";
                submitBtn.textContent = "Inscrevendo...";
                submitBtn.classList.add("loading");
                
                try {
                    await createOneSignalUser(email);
                    
                    // Sucesso - mostrar mensagem e fechar automaticamente
                    successMsg.style.display = "block";
                    submitBtn.textContent = "Inscrito!";
                    
                    setTimeout(function() {
                        closeBtn.click();
                    }, 1500);
                    
                } catch (error) {
                    // Erro - resetar e mostrar mensagem
                    submitBtn.textContent = "Inscrever-se";
                    submitBtn.classList.remove("loading");
                    errorMsg.textContent = "Algo deu errado. Por favor, tente novamente.";
                    errorMsg.style.display = "block";
                }
            });
        });
    </script>
</body>
</html>
Necessário para o passo 4:
  1. Mantenha a chamada addClickName no seu handler de envio HTML.
  2. Leia a entrada com nosso Listener de Clique de Mensagem no Aplicativo do SDK
  3. Quando o nome do clique parece um email, chame o método addEmail dentro do listener de clique de mensagem no aplicativo.
Exemplo usando o listener de clique de mensagem no aplicativo e método addEmail: 
// Exemplo de Handler de Clique de Mensagem no Aplicativo para capturar email e telefone de mensagens no aplicativo HTML
class InAppMessageClickHandler: NSObject, OSInAppMessageClickListener {
    func onClick(event: OSInAppMessageClickEvent) {
        // Obter o nome do clique (actionId) do evento
        let clickName = event.result.actionId
        print("Mensagem no aplicativo clicada com actionId: \(clickName ?? "nil")")
        
        guard let value = clickName else { return }
        
        // Verificar se o nome do clique parece um endereço de email
        if value.contains("@") && value.contains(".") {
            OneSignal.User.addEmail(value)
            print("Email adicionado ao OneSignal: \(value)")
        }
        // Verificar se o nome do clique parece um número de telefone no formato E.164 (+1XXXXXXXXXX)
        else if value.hasPrefix("+") && value.count >= 11 {
            OneSignal.User.addSms(value)
            print("SMS adicionado ao OneSignal: \(value)")
        }
    }
}

​
Formulário SMS

Colete Subscrições de SMS através de uma mensagem no aplicativo. Como este formulário funciona:
  1. O usuário seleciona seu código do país, insere um número de 10 dígitos e marca uma caixa de consentimento.
  2. Ao enviar, a API Create User do OneSignal é chamada para criar a Subscrição SMS em seu aplicativo.
  3. Além disso, o template chama OneSignalIamApi.addClickName(e, e164Phone) que passa o número de telefone para o Listener de Clique de Mensagem no Aplicativo do nosso SDK.
  4. Dentro do seu aplicativo, você pode adicionar o Listener de Clique de Mensagem no Aplicativo para ler o nome do clique e passar o número de telefone para o método addSms do nosso SDK.
Você pode notar que os passos 2 e 4 envolvem criar a Subscrição SMS.
  • O passo 2 não requer adicionar código diretamente no aplicativo, mas também não adiciona a Subscrição SMS ao usuário se você chamou o método login.
  • O passo 4 requer código adicional (o Listener de Clique de Mensagem no Aplicativo), mas também adiciona a Subscrição SMS ao usuário se você chamou o método login.
**Substitua YOUR_APP_ID pelo seu ID do Aplicativo OneSignal encontrado em Configurações > Chaves e IDs.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        /* Estilos similares ao formulário de email, ajustados para entrada de telefone */
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: transparent;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }
        .container {
            position: relative;
            background: #ffffff;
            border-radius: 16px;
            padding: 32px 24px;
            max-width: 340px;
            width: 100%;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
            text-align: center;
        }
        /* Outros estilos... */
    </style>
</head>
<body>
    <div class="container">
        <button id="close-btn" class="close-btn">×</button>
        <h1>Receba atualizações por SMS!</h1>
        <p>Digite seu telefone para receber atualizações importantes via SMS.</p>
        
        <div class="phone-input-wrapper">
            <select id="country-select" class="country-select">
                <option value="+1">🇺🇸 +1</option>
                <option value="+55">🇧🇷 +55</option>
                <!-- Outros códigos de país... -->
            </select>
            <input type="tel" id="phone-input" class="phone-input" placeholder="1234567890" maxlength="10">
        </div>
        
        <div class="consent-wrapper">
            <input type="checkbox" id="consent-checkbox">
            <label for="consent-checkbox">Concordo em receber mensagens SMS de marketing</label>
        </div>
        
        <button id="submit-btn" class="submit-btn" disabled>Inscrever-se</button>
    </div>
    
    <script>
        // Lógica JavaScript (similar ao formulário de email, ajustada para processamento de telefone)
        // Implementação detalhada segue o mesmo padrão do formulário de email
    </script>
</body>
</html>

​
Outros templates

Além dos formulários de email e SMS acima, você também pode usar estes templates:
  • Pesquisa de Lista de Verificação: Pesquisa de seleção múltipla
  • Contagem Regressiva: Promoções com prazo limitado
  • Roda de Promoção: Experiência gire-para-ganhar
  • Modal de Quiz: Quiz baseado em pontuação
  • Pesquisa de Classificação: Avaliação de 1–5
  • Player de Áudio/Vídeo: Prévia de mídia
  • Deslize Vertical: Tour multi-slide
Para código HTML detalhado e etapas de implementação de cada template, consulte cada seção dos links dos cards acima.