> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Templates HTML para mensagens no aplicativo

> Templates HTML de copiar/colar que você pode usar em Mensagens no Aplicativo do OneSignal, além da configuração necessária e problemas comuns.

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.

<Note>
  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](./in-app-message-api).
</Note>

## Pré-requisitos

Antes de começar, recomendamos que você revise:

* A página [Visão Geral de Mensagens no Aplicativo](./in-app-messages-setup).
* A página [Projete sua Mensagem no Aplicativo com o Editor HTML](./design-your-in-app-message-with-html).

<Warning>
  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.
</Warning>

## 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

<Card title="Formulário de Coleta de Email" img="https://mintcdn.com/onesignal/gVwen8HnVQfsFC-e/images/html-iam/email-form.png?fit=max&auto=format&n=gVwen8HnVQfsFC-e&q=85&s=d74293c6b7c0c2ed0694078d41a8c1c8" href="#email-form" width="1258" height="708" data-path="images/html-iam/email-form.png">
  Solicita o email do usuário e o envia para seu aplicativo via nome do clique.
</Card>

<Card title="Formulário de Coleta de Números de Telefone" img="https://mintcdn.com/onesignal/gVwen8HnVQfsFC-e/images/html-iam/sms-form.png?fit=max&auto=format&n=gVwen8HnVQfsFC-e&q=85&s=d5444750f75c638f9aacc4cadc8ce8e3" href="#sms-form" width="1251" height="704" data-path="images/html-iam/sms-form.png">
  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.
</Card>

<Card title="Pesquisa de Lista de Verificação" img="https://mintcdn.com/onesignal/gVwen8HnVQfsFC-e/images/html-iam/checklist-survey.png?fit=max&auto=format&n=gVwen8HnVQfsFC-e&q=85&s=e35945ecfefabdb013053aa814c3618d" href="#checklist-survey" width="574" height="322" data-path="images/html-iam/checklist-survey.png">
  Pesquisa de seleção múltipla que você pode enviar para seu backend ou converter em tags.
</Card>

<Card title="Contagem Regressiva" img="https://mintcdn.com/onesignal/gVwen8HnVQfsFC-e/images/html-iam/count_down.png?fit=max&auto=format&n=gVwen8HnVQfsFC-e&q=85&s=bcc786162ca0f4837c244f0d7f03097d" href="#countdown" width="1820" height="1024" data-path="images/html-iam/count_down.png">
  Timer de contagem regressiva para promoções com prazo limitado.
</Card>

<Card title="Roda de Promoção" img="https://mintcdn.com/onesignal/gVwen8HnVQfsFC-e/images/html-iam/promo-wheel.png?fit=max&auto=format&n=gVwen8HnVQfsFC-e&q=85&s=dfd0aa50f5981774267644acb17da817" href="#promo-wheel" width="574" height="322" data-path="images/html-iam/promo-wheel.png">
  Experiência de promoção gire-para-ganhar (personalize o manuseio da promoção).
</Card>

<Card title="Modal de Quiz" img="https://mintcdn.com/onesignal/gVwen8HnVQfsFC-e/images/html-iam/quiz_modal.png?fit=max&auto=format&n=gVwen8HnVQfsFC-e&q=85&s=66399edf105d0799bdfab78412a60744" href="#quiz-modal" width="1820" height="1024" data-path="images/html-iam/quiz_modal.png">
  Experiência de quiz que pode marcar usuários com sua pontuação.
</Card>

<Card title="Pesquisa de Classificação" img="https://mintcdn.com/onesignal/gVwen8HnVQfsFC-e/images/html-iam/ranking-survey.png?fit=max&auto=format&n=gVwen8HnVQfsFC-e&q=85&s=42cfa0b554dbfe1f59f61c47306f8460" href="#ranking-survey" width="574" height="322" data-path="images/html-iam/ranking-survey.png">
  Pesquisa de classificação de 1–5 (enviar para seu endpoint ou marcar usuário).
</Card>

<Card title="Player de Áudio/Vídeo" img="https://mintcdn.com/onesignal/gVwen8HnVQfsFC-e/images/html-iam/ui-ui.png?fit=max&auto=format&n=gVwen8HnVQfsFC-e&q=85&s=cf9bdf607dda82687faa1c874fddebb4" href="#audio/video-player" width="574" height="322" data-path="images/html-iam/ui-ui.png">
  UI simples de prévia de áudio para um arquivo MP3 direto.
</Card>

<Card title="Deslize Vertical" img="https://mintcdn.com/onesignal/gVwen8HnVQfsFC-e/images/html-iam/vertical-swiping.png?fit=max&auto=format&n=gVwen8HnVQfsFC-e&q=85&s=3cb4a092cf2e4bb14bee214a0c22c58b" href="#vertical-swiping" width="574" height="322" data-path="images/html-iam/vertical-swiping.png">
  Tour de integração ou recurso multi-slide com deslize vertical.
</Card>

***

### Formulário de email

Colete [Subscrições](./subscriptions) 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`.

<Accordion title="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](./keys-and-ids).

  ```html theme={null}
  <!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>
  ```
</Accordion>

**Necessário para o passo 4:**

1. Mantenha a chamada [addClickName](./in-app-message-api#click-name) no seu handler de envio HTML.
2. Leia a entrada com nosso [Listener de Clique de Mensagem no Aplicativo](./mobile-sdk-reference#addclicklistener-in-app) do SDK
3. Quando o nome do clique parece um email, chame o método [addEmail](./mobile-sdk-reference#addemail-,-removeemail) dentro do listener de clique de mensagem no aplicativo.

**Exemplo usando o listener de clique de mensagem no aplicativo e método addEmail:**

```swift theme={null}
// 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](./subscriptions) 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`.

<Accordion title="Código HTML do Formulário SMS">
  \*\*Substitua `YOUR_APP_ID` pelo seu ID do Aplicativo OneSignal encontrado em [Configurações > Chaves e IDs](./keys-and-ids).

  ```html theme={null}
  <!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>
  ```
</Accordion>

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

***