Modèles HTML pour messages in-app

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.

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.

Prérequis

Avant de commencer, nous vous recommandons de consulter :

La page Vue d’ensemble des Messages In-App.
La page Concevez votre Message In-App avec l’Éditeur HTML.

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.

Comment utiliser les modèles

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

Modèles disponibles

Formulaire de Collecte d'Email

Demandez l’email de l’utilisateur et envoyez-le à votre application via le nom de clic.

Formulaire de Collecte de Numéros de Téléphone

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.

Sondage à Liste de Vérification

Sondage à sélection multiple que vous pouvez envoyer à votre backend ou convertir en tags.

Compte à Rebours

Minuteur de compte à rebours pour les promotions sensibles au temps.

Roue Promotionnelle

Expérience promotionnelle de roue de la fortune (personnalisez la gestion des promotions).

Modal de Quiz

Expérience de quiz qui peut taguer les utilisateurs avec leur score.

Sondage de Notation

Sondage de notation de 1 à 5 (envoyer à votre endpoint ou taguer l’utilisateur).

Lecteur Audio/Vidéo

Interface simple d’aperçu audio pour un fichier MP3 direct.

Glissement Vertical

Tour d’intégration ou de fonctionnalités multi-diapositives avec glissement vertical.

Formulaire d’email

Recueillez des Abonnements par email grâce à un message in-app. Comment ce formulaire fonctionne :

L’utilisateur saisit une adresse email et coche une case de consentement.
Lors de la soumission, l’API Créer Utilisateur de OneSignal est appelée pour créer l’Abonnement email dans votre application.
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.
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.

Code HTML du Formulaire Email

**Remplacez YOUR_APP_ID par votre ID d’Application OneSignal trouvé dans Paramètres > Clés et IDs.

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

Requis pour l’étape 4 :

Conservez l’appel addClickName dans votre gestionnaire de soumission HTML.
Lisez l’entrée avec le Listener de Clic de Message In-App de notre SDK
Appelez addEmail 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 :

// 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 SMS grâce à un message in-app. Comment ce formulaire fonctionne :

L’utilisateur sélectionne son code pays, saisit un numéro à 10 chiffres, et coche une case de consentement.
Lors de la soumission, l’API Créer Utilisateur de OneSignal est appelée pour créer l’Abonnement SMS dans votre application.
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.
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.

Premiers pas et paramètres

Canaux de messagerie

Journeys

Audience et événements personnalisés

Analyses et intégrations

Confidentialité et sécurité

Modèles HTML pour messages in-app

Prérequis

Comment utiliser les modèles

Modèles disponibles

Formulaire de Collecte d'Email

Formulaire de Collecte de Numéros de Téléphone

Sondage à Liste de Vérification

Compte à Rebours

Roue Promotionnelle

Modal de Quiz

Sondage de Notation

Lecteur Audio/Vidéo

Glissement Vertical

Formulaire d’email

Formulaire SMS

​Prérequis

​Comment utiliser les modèles

​Modèles disponibles

Formulaire de Collecte d'Email

Formulaire de Collecte de Numéros de Téléphone

Sondage à Liste de Vérification

Compte à Rebours

Roue Promotionnelle

Modal de Quiz

Sondage de Notation

Lecteur Audio/Vidéo

Glissement Vertical

​Formulaire d’email

​Formulaire SMS

Prérequis

Comment utiliser les modèles

Modèles disponibles

Formulaire d’email

Formulaire SMS