Templates HTML para mensagens no aplicativo

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:

A página Visão Geral de Mensagens no Aplicativo.
A página Projete sua Mensagem no Aplicativo com o Editor HTML.

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

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

Templates disponíveis

Formulário de Coleta de Email

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

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.

Pesquisa de Lista de Verificação

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

Contagem Regressiva

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

Roda de Promoção

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

Modal de Quiz

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

Pesquisa de Classificação

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

Player de Áudio/Vídeo

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

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:

O usuário insere um endereço de email e marca uma caixa de consentimento.
Ao enviar, a API Create User do OneSignal é chamada para criar a Subscrição de email em seu aplicativo.
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.
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.

Código HTML do Formulário de Email

**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:

Mantenha a chamada addClickName no seu handler de envio HTML.
Leia a entrada com nosso Listener de Clique de Mensagem no Aplicativo do SDK
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:

O usuário seleciona seu código do país, insere um número de 10 dígitos e marca uma caixa de consentimento.
Ao enviar, a API Create User do OneSignal é chamada para criar a Subscrição SMS em seu aplicativo.
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.
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.

Código HTML do Formulário SMS

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

Primeiros passos & configurações

Canais de mensagem

Jornadas

Público & eventos personalizados

Análises & Integrações

Privacidade & Segurança

Templates HTML para mensagens no aplicativo

Pré-requisitos

Como usar os templates

Templates disponíveis

Formulário de Coleta de Email

Formulário de Coleta de Números de Telefone

Pesquisa de Lista de Verificação

Contagem Regressiva

Roda de Promoção

Modal de Quiz

Pesquisa de Classificação

Player de Áudio/Vídeo

Deslize Vertical

Formulário de email

Formulário SMS

Outros templates

​Pré-requisitos

​Como usar os templates

​Templates disponíveis

Formulário de Coleta de Email

Formulário de Coleta de Números de Telefone

Pesquisa de Lista de Verificação

Contagem Regressiva

Roda de Promoção

Modal de Quiz

Pesquisa de Classificação

Player de Áudio/Vídeo

Deslize Vertical

​Formulário de email

​Formulário SMS

​Outros templates

Pré-requisitos

Como usar os templates

Templates disponíveis

Formulário de email

Formulário SMS

Outros templates