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

# Modèles HTML pour messages in-app

> Modèles HTML à copier-coller que vous pouvez utiliser dans les Messages In-App de OneSignal, plus la configuration requise et les problèmes courants.

Utilisez ces modèles HTML à copier-coller pour créer des messages in-app OneSignal personnalisés plus rapidement.

Notre Éditeur HTML de Messages In-App vous permet de contrôler entièrement la mise en page et le comportement de votre message in-app en utilisant HTML, CSS et JavaScript. L'éditeur **n'inclut pas de modèles intégrés**, mais cette page fournit **des exemples prêts à l'emploi** que vous pouvez coller dans l'éditeur et personnaliser.

<Note>
  Ces modèles s'exécutent dans une webview de message in-app. Pour fermer les messages, ouvrir des URL, taguer les utilisateurs et capturer les clics, utilisez l'[API JS de Message In-App](./in-app-message-api).
</Note>

## Prérequis

Avant de commencer, nous vous recommandons de consulter :

* La page [Vue d'ensemble des Messages In-App](./in-app-messages-setup).
* La page [Concevez votre Message In-App avec l'Éditeur HTML](./design-your-in-app-message-with-html).

<Warning>
  Ne mettez pas de secrets (clés API, jetons) dans le code des modèles. Traitez toutes les entrées de messages in-app comme non fiables et validez-les dans votre application ou backend.
</Warning>

## Comment utiliser les modèles

1. Dans OneSignal, allez à **Messages > In-App > Nouveau In-App**.
2. Sélectionnez l'**éditeur HTML**.
3. Trouvez un modèle ci-dessous.
4. Copiez le HTML complet du bloc de code et collez-le dans l'éditeur.
5. Mettez à jour les espaces réservés (URLs, endpoints, dates et texte).
6. Testez sur un appareil réel, puis publiez.

## Modèles disponibles

<Card title="Formulaire de Collecte d'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">
  Demandez l'email de l'utilisateur et envoyez-le à votre application via le nom de clic.
</Card>

<Card title="Formulaire de Collecte de Numéros de Téléphone" 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">
  Demandez et obtenez le consentement pour envoyer des SMS. Inclut le numéro de téléphone au format E.164 et l'envoie à votre application via le nom de clic.
</Card>

<Card title="Sondage à Liste de Vérification" 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">
  Sondage à sélection multiple que vous pouvez envoyer à votre backend ou convertir en tags.
</Card>

<Card title="Compte à Rebours" 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">
  Minuteur de compte à rebours pour les promotions sensibles au temps.
</Card>

<Card title="Roue Promotionnelle" 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">
  Expérience promotionnelle de roue de la fortune (personnalisez la gestion des promotions).
</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">
  Expérience de quiz qui peut taguer les utilisateurs avec leur score.
</Card>

<Card title="Sondage de Notation" 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">
  Sondage de notation de 1 à 5 (envoyer à votre endpoint ou taguer l'utilisateur).
</Card>

<Card title="Lecteur Audio/Vidéo" 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">
  Interface simple d'aperçu audio pour un fichier MP3 direct.
</Card>

<Card title="Glissement 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 d'intégration ou de fonctionnalités multi-diapositives avec glissement vertical.
</Card>

***

### Formulaire d'email

Recueillez des [Abonnements](./subscriptions) par email grâce à un message in-app.

Comment ce formulaire fonctionne :

1. L'utilisateur saisit une adresse email et coche une case de consentement.
2. Lors de la soumission, l'API Créer Utilisateur de OneSignal est appelée pour créer l'Abonnement email dans votre application.
3. De plus, le modèle appelle `OneSignalIamApi.addClickName(e, email)` qui transmet l'adresse email au Listener de Clic de Message In-App de notre SDK.
4. Dans votre application, vous pouvez ajouter le Listener de Clic de Message In-App pour lire le nom du clic et transmettre l'email à la méthode `addEmail` de notre SDK.

Vous pouvez remarquer que les étapes 2 et 4 impliquent toutes deux la création de l'Abonnement email.

* L'étape 2 ne nécessite pas d'ajouter du code directement dans l'application mais n'ajoute pas non plus l'Abonnement email à l'utilisateur si vous avez appelé la méthode `login`.
* L'étape 4 nécessite du code supplémentaire (le Listener de Clic de Message In-App) mais ajoute également l'Abonnement email à l'utilisateur si vous avez appelé la méthode `login`.

<Accordion title="Code HTML du Formulaire Email">
  \*\*Remplacez `YOUR_APP_ID` par votre ID d'Application OneSignal trouvé dans [Paramètres > Clés et IDs](./keys-and-ids).

  ```html theme={null}
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <!-- Prévenir le zoom iOS lors de la focalisation des entrées -->
      <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;
          }
          
          /* ===== CLOSE BUTTON ===== */
          .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;
          }
          
          /* ===== TYPOGRAPHY ===== */
          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;
          }
          
          /* ===== EMAIL INPUT ===== */
          .email-input {
              width: 100%;
              padding: 14px 16px;
              font-size: 16px; /* 16px empêche le zoom automatique 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;
          }
          
          /* ===== CONSENT CHECKBOX ===== */
          .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;
          }
          
          /* ===== SUBMIT BUTTON ===== */
          .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;
          }
          
          /* ===== STATUS MESSAGES ===== */
          .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;
          }
          
          /* ===== LOADING STATE ===== */
          .loading {
              pointer-events: none;
              opacity: 0.7;
          }
      </style>
  </head>
  <body>
      <div class="container">
          <!-- Close Button -->
          <button id="close-btn" class="close-btn" data-onesignal-unique-label="close-button">×</button>
          
          <!-- Header -->
          <h1>Restez Connecté !</h1>
          <p>Entrez votre email pour recevoir des mises à jour et des offres exclusives. Vous pouvez vous désabonner à tout moment !</p>
          
          <!-- Email Input -->
          <input 
              type="email" 
              id="email-input" 
              class="email-input" 
              placeholder="Entrez votre email" 
              data-onesignal-unique-label="email-input" 
              autocomplete="email" 
              autocapitalize="off"
          >
          
          <!-- Status Messages -->
          <p id="error-msg" class="error-msg">Veuillez entrer une adresse email valide</p>
          <p id="success-msg" class="success-msg">Merci de vous être abonné !</p>
          
          <!-- Consent Checkbox -->
          <div class="consent-wrapper">
              <input type="checkbox" id="consent-checkbox" name="consent">
              <label for="consent-checkbox">J'accepte de recevoir des emails marketing</label>
          </div>
          
          <!-- Submit Button -->
          <button id="submit-btn" class="submit-btn" data-onesignal-unique-label="submit-email" disabled>
              S'abonner
          </button>
      </div>

      <script>
          document.addEventListener("DOMContentLoaded", function() {
              
              // ===== DOM REFERENCES =====
              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");
              
              // ===== HELPER FUNCTIONS =====
              
              // Valider le format email
              function isValidEmail(email) {
                  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
              }
              
              // Activer le bouton de soumission seulement quand l'email est valide ET le consentement est coché
              function updateSubmitState() {
                  var email = emailInput.value.trim();
                  submitBtn.disabled = !(isValidEmail(email) && consentCheckbox.checked);
              }
              
              // Créer l'abonnement email via l'API OneSignal
              async function createOneSignalUser(email) {
                  // ⚠️ Remplacer par votre ID d'Application OneSignal
                  var appId = "YOUR_APP_ID";
                  var url = "https://api.onesignal.com/apps/" + appId + "/users";
                  
                  var payload = {
                      properties: {
                          tags: { email_created_from: "iam" },
                          language: "en"
                      },
                      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("La requête API a échoué");
                  return response.json();
              }
              
              // ===== EVENT LISTENERS =====
              
              // Bouton fermer - fermer IAM
              closeBtn.addEventListener("click", function(e) {
                  OneSignalIamApi.close(e);
              });
              
              // Case à cocher - mettre à jour l'état du bouton
              consentCheckbox.addEventListener("change", updateSubmitState);
              
              // Entrée email - mettre à jour l'état du bouton et masquer les erreurs
              emailInput.addEventListener("input", function() {
                  errorMsg.style.display = "none";
                  updateSubmitState();
              });
              
              // Entrée email - soumettre avec la touche Entrée
              emailInput.addEventListener("keypress", function(e) {
                  if (e.key === "Enter" && !submitBtn.disabled) {
                      submitBtn.click();
                  }
              });
              
              // Bouton soumettre - gérer l'abonnement
              submitBtn.addEventListener("click", async function(e) {
                  var email = emailInput.value.trim();
                  
                  if (!isValidEmail(email) || !consentCheckbox.checked) {
                      errorMsg.textContent = "Veuillez entrer une adresse email valide";
                      errorMsg.style.display = "block";
                      return;
                  }
                  
                  // Passer l'email au gestionnaire de clic OneSignal (doit être appelé de manière synchrone)
                  OneSignalIamApi.addClickName(e, email);
                  
                  // Afficher l'état de chargement
                  errorMsg.style.display = "none";
                  submitBtn.textContent = "Abonnement...";
                  submitBtn.classList.add("loading");
                  
                  try {
                      await createOneSignalUser(email);
                      
                      // Succès - afficher le message et fermer automatiquement
                      successMsg.style.display = "block";
                      submitBtn.textContent = "Abonné !";
                      
                      setTimeout(function() {
                          closeBtn.click();
                      }, 1500);
                      
                  } catch (error) {
                      // Erreur - réinitialiser et afficher le message
                      submitBtn.textContent = "S'abonner";
                      submitBtn.classList.remove("loading");
                      errorMsg.textContent = "Quelque chose s'est mal passé. Veuillez réessayer.";
                      errorMsg.style.display = "block";
                  }
              });
          });
      </script>
  </body>
  </html>
  ```
</Accordion>

**Requis pour l'étape 4 :**

1. Conservez l'appel [addClickName](./in-app-message-api#click-name) dans votre gestionnaire de soumission HTML.
2. Lisez l'entrée avec le [Listener de Clic de Message In-App](./mobile-sdk-reference#addclicklistener-in-app) de notre SDK
3. Appelez [addEmail](./mobile-sdk-reference#addemail-,-removeemail) dans le listener de clic de message in-app lorsque le nom du clic ressemble à un email.

**Exemple utilisant le listener de clic de message in-app et la méthode addEmail :**

```swift theme={null}
// Exemple de gestionnaire de clic de message in-app pour capturer email et téléphone depuis des messages in-app HTML
class InAppMessageClickHandler: NSObject, OSInAppMessageClickListener {
    func onClick(event: OSInAppMessageClickEvent) {
        // Obtenir le nom du clic (actionId) depuis l'événement
        let clickName = event.result.actionId
        print("Message in-app cliqué, actionId: \(clickName ?? "nil")")
        
        guard let value = clickName else { return }
        
        // Vérifier si le nom du clic ressemble à une adresse email
        if value.contains("@") && value.contains(".") {
            OneSignal.User.addEmail(value)
            print("Email ajouté à OneSignal: \(value)")
        }
        // Vérifier si le nom du clic ressemble à un numéro de téléphone au format E.164 (+1XXXXXXXXXX)
        else if value.hasPrefix("+") && value.count >= 11 {
            OneSignal.User.addSms(value)
            print("SMS ajouté à OneSignal: \(value)")
        }
    }
}
```

***

### Formulaire SMS

Recueillez des [Abonnements](./subscriptions) SMS grâce à un message in-app.

Comment ce formulaire fonctionne :

1. L'utilisateur sélectionne son code pays, saisit un numéro à 10 chiffres, et coche une case de consentement.
2. Lors de la soumission, l'API Créer Utilisateur de OneSignal est appelée pour créer l'Abonnement SMS dans votre application.
3. De plus, le modèle appelle `OneSignalIamApi.addClickName(e, e164Phone)` qui transmet le numéro de téléphone au Listener de Clic de Message In-App de notre SDK.
4. Dans votre application, vous pouvez ajouter le Listener de Clic de Message In-App pour lire le nom du clic et transmettre le numéro de téléphone à la méthode `addSms` de notre SDK.

Vous pouvez remarquer que les étapes 2 et 4 impliquent toutes deux la création de l'Abonnement SMS.

* L'étape 2 ne nécessite pas d'ajouter du code directement dans l'application mais n'ajoute pas non plus l'Abonnement SMS à l'utilisateur si vous avez appelé la méthode `login`.
* L'étape 4 nécessite du code supplémentaire (le Listener de Clic de Message In-App) mais ajoute également l'Abonnement SMS à l'utilisateur si vous avez appelé la méthode `login`.