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

# Concevoir des messages in-app avec HTML

> Concevez et personnalisez des messages in-app en utilisant l'éditeur HTML de OneSignal pour une flexibilité, une réactivité et une image de marque maximales.

## Vue d'ensemble

OneSignal propose deux éditeurs de messages in-app :

* [Glisser-déposer](./design-your-in-app-message) GUI pour les créateurs non techniques
* Éditeur HTML pour les développeurs qui souhaitent un contrôle pixel parfait sur la mise en page, le comportement et la réactivité.

<Frame caption="Image illustrant le code in-app à côté d'un rendu in-app">
  <img src="https://mintcdn.com/onesignal/Xl2NHJvxakrK4JbL/images/docs/f33b4e3-iam-html-2.png?fit=max&auto=format&n=Xl2NHJvxakrK4JbL&q=85&s=0a0527678d2d094109186fea726918be" width="1700" height="1000" data-path="images/docs/f33b4e3-iam-html-2.png" />
</Frame>

**Ce que vous pouvez faire avec l'éditeur HTML :**

* **Mises en page :** Créez des mises en page responsives complexes (par ex., CTA côte à côte).
* **Formulaires :** Collectez des entrées en ligne (e-mail, commentaires, enquête).
* **Polices et marque :** Utilisez des polices web personnalisées et des variables CSS.
* **Actions JS :** Suivez les clics, étiquetez les utilisateurs, envoyez des résultats et plus encore.

### Prérequis

* **iOS :** 3.9.0+
* **Android :** 4.6.3+
  * Si votre application utilise un SDK plus ancien, les messages in-app s'afficheront dans une mise en page Center Modal à la place.

***

## Créer et prévisualiser un in-app HTML

Accédez à **Messages > New In-App** pour créer, modifier, tester, mettre en pause, dupliquer ou supprimer vos messages in-app.

<Columns cols={2}>
  <Card title="Modèles HTML" href="./in-app-html-templates" arrow={true}>
    Démarrez rapidement avec des modèles préconstruits.
  </Card>

  <Card title="Bibliothèque JavaScript in-app" href="./in-app-message-api" arrow={true}>
    Utilisez notre bibliothèque JavaScript pour suivre les interactions et déclencher des comportements in-app.
  </Card>
</Columns>

Entrez votre code HTML sur le côté gauche et prévisualisez-le en direct. Utilisez **Send Test In-App** pour tester la réactivité et la conception.

<Frame caption="Image montrant l'éditeur HTML à côté de l'aperçu">
  <img src="https://mintcdn.com/onesignal/6v_cVPknFpo5qSVB/images/docs/04df3a9-Screenshot_2023-04-15_at_11.54.11_AM.png?fit=max&auto=format&n=6v_cVPknFpo5qSVB&q=85&s=db3ac070e794e0c594850a61b2f95927" width="1770" height="1198" data-path="images/docs/04df3a9-Screenshot_2023-04-15_at_11.54.11_AM.png" />
</Frame>

### Ajouter des étiquettes traçables

Ajoutez `data-onesignal-unique-label` sur les éléments interactifs afin que les clics soient suivis et exploitables.

```html theme={null}
<button class="tag-user" data-onesignal-unique-label="my-tag-user-button">Tag User</button>
```

### Lier les actions de clic avec JavaScript

```js theme={null}
// Tag the user when they click a button
document.querySelector(".tag-user").onclick = (e) => {
  OneSignalIamApi.tagUser(e, { fiz: "baz" });
};
```

<Note>
  En savoir plus dans la [documentation de la bibliothèque JS in-app](./in-app-message-api).
</Note>

### Support des ressources

Les ressources se chargent au moment du rendu à partir des URL que vous fournissez.

```html theme={null}
<img src="https://media.onesignal.com/iam/default_image_20200320.png" alt="Promo" />
```

### Personnalisation

Insérez dynamiquement les valeurs de données utilisateur [en utilisant la syntaxe Liquid](./using-liquid-syntax) :

```html theme={null}
<div>Hi there {{ name | default: 'you' }}!</div>
```

**Contextes pris en charge :**

* Texte à l'intérieur d'éléments comme `div`, `p`, `li`
* À l'intérieur des blocs `<style>`
* Dans les attributs `href`, `src`, `action` et `data`

**Non pris en charge dans :**

* À l'intérieur des balises `<script>`
* À travers un contenu imbriqué complexe où l'analyse devient ambiguë, par ex. :

```html theme={null}
<div>
  Hi {{name}}
  <span>Here's your coupon!</span>
</div>
```

***

## Accessibilité et conception responsive

Utilisez des requêtes média CSS et la typographie de plateforme pour s'adapter à la taille de l'appareil et aux paramètres de texte du système d'exploitation.

```css theme={null}
@media only screen and (max-width: 620px) {
  .btn-primary { width: 100% !important; }
}
/* Respect dynamic text sizes on iOS */
:root { font: -apple-system-body; }
```

### Zones sûres (encoches, barres d'accueil)

Les appareils modernes ont des zones sûres (comme des encoches ou des barres d'accueil). Utilisez les variables `safe-area-inset-*` pour rembourrer votre mise en page :

```css theme={null}
body {
  padding-top: var(--safe-area-inset-top);
  padding-right: var(--safe-area-inset-right);
  padding-bottom: calc(var(--safe-area-inset-bottom) + 20px);
  padding-left: var(--safe-area-inset-left);
  margin: 0;
}
```

## Style en mode sombre

Les appareils mobiles et les applications appliquent souvent des ajustements automatiques en mode sombre en fonction du thème système de l'utilisateur. Cela peut faire apparaître les messages in-app (IAM) différemment de ce qui était prévu. Par exemple, le texte peut inverser la couleur ou les images d'arrière-plan peuvent sembler atténuées. Pour garantir que votre IAM ait un aspect cohérent sur les thèmes clair et sombre, définissez des styles explicites pour les deux modes.

### Meilleures pratiques

* **Définissez des couleurs explicites.** Définissez toujours le texte, l'arrière-plan et les couleurs des boutons directement dans votre HTML ou CSS. Évitez les couleurs transparentes ou par défaut qui reposent sur le comportement du système.

* **Utilisez les requêtes média `prefers-color-scheme`.** Vous pouvez inclure des remplacements en mode sombre avec :

  ```css theme={null}
  @media (prefers-color-scheme: dark) {
    body {
      background-color: #000000;
      color: #ffffff;
    }
    .button {
      background-color: #ffffff;
      color: #000000;
    }
  }
  ```

* Optimisez les images pour les deux modes. Utilisez des PNG transparents ou des SVG lorsque c'est possible. Pour les images d'arrière-plan, testez la lisibilité dans les thèmes clair et sombre.

* Évitez les doubles inversions. Certaines versions d'Android et d'iOS peuvent ajuster automatiquement les couleurs. L'utilisation de styles en mode sombre explicites aide à empêcher votre thème sombre personnalisé d'être inversé à nouveau par le système d'exploitation.

* Prévisualisez dans les deux modes. Utilisez les thèmes sombre et clair de votre application pour vérifier que le texte, les boutons et les arrière-plans ont suffisamment de contraste et restent accessibles.

<Note> Testez sur toutes les plateformes. Android WebView, iOS WKWebView et les builds web gèrent le mode sombre différemment. Prévisualisez toujours votre message in-app dans les deux thèmes avant de publier. </Note>

***

### Intégrer des vidéos

Vous pouvez intégrer des vidéos (par ex., YouTube, Vimeo) directement dans vos messages in-app en utilisant `<iframe>`.
Ceci est utile pour les démos, les promos ou les flux d'intégration.

La plupart des navigateurs n'autorisent **la lecture automatique que si la vidéo démarre en sourdine**, incluez donc toujours `&mute=1` dans l'URL d'intégration.

<Note>
  La lecture automatique de vidéo peut impacter les performances. Gardez les vidéos courtes et évitez plusieurs intégrations en lecture automatique dans un seul in-app.
</Note>

#### Exemple : Intégration YouTube en lecture automatique

L'extrait ci-dessous montre comment centrer une vidéo YouTube au milieu de l'in-app avec une taille fixe (560×315) :

```html theme={null}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin: 0;
        height: 100vh;
        display: flex;
        justify-content: center; /* center horizontally */
        align-items: center;     /* center vertically */
        background: #f0f0f0;     /* optional background */
      }
      .video-box {
        width: 560px;  /* fixed width */
        height: 315px; /* fixed height (16:9 ratio) */
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        border-radius: 8px;
        overflow: hidden;
        background: #000;
      }
      .video-box iframe {
        width: 100%;
        height: 100%;
        border: none;
      }
    </style>
  </head>
  <body>
    <div class="video-box">
      <iframe src="https://www.youtube.com/embed/bH60T1PZg1c?autoplay=1&mute=1"
        allow="autoplay; encrypted-media"
        allowfullscreen>
      </iframe>
    </div>
  </body>
</html>
```

#### Comprendre le comportement de lecture automatique

* L'URL d'intégration (/embed/VIDEO\_ID) est requise pour la lecture automatique — les liens watch?v= normaux ne fonctionneront pas.

* L'ajout de ?autoplay=1\&mute=1 garantit que la vidéo se lit automatiquement et respecte les règles de lecture automatique du navigateur.

* L'attribut allow="autoplay; encrypted-media" accorde la permission pour la lecture automatique.

* Le .video-box utilise une taille fixe de 560×315px (16:9 par défaut de YouTube) pour que la vidéo apparaisse contenue au lieu de s'étirer en plein écran.

* Le body est défini comme un conteneur flex avec justify-content: center et align-items: center pour positionner la boîte vidéo au milieu exact de l'écran.

***

## Conseils de performance

* Préférez le CSS critique en ligne ; différez les scripts lourds.
* Optimisez les images (dimensionnées `<img>` avec `object-fit`), utilisez des formats modernes lorsque c'est possible.
* Gardez les charges utiles HTML concises ; évitez les gros blobs base64.
* Utilisez les polices système ou hébergez des polices web performantes avec `font-display: swap`.
* Réduisez les tailles de fichiers et utilisez la résolution appropriée :
  * [Directives d'images Apple](https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/image-size-and-resolution/)
  * [Vue d'ensemble des images Android](https://developer.android.com/guide/topics/graphics)
  * OneSignal n'a aucune affiliation avec [imagekit.io](https://imagekit.io/), bien que ce soit un outil utile pour l'optimisation.

### Testez sur tous les appareils

Envoyez fréquemment des messages de test pour confirmer le comportement et la mise en page sur différents types d'appareils. Consultez [Trouver et définir des abonnements de test](./test-users).

***

## FAQ

### Puis-je supprimer l'arrière-plan gris ou l'ombre portée des in-apps de style bannière ?

Oui. Pour les bannières en haut/bas, mettez à jour vos SDK et définissez :

**iOS 5.1.5+**

```xml theme={null}
<key>OneSignal_in_app_message_hide_drop_shadow</key>
<true/>
<key>OneSignal_in_app_message_hide_gray_overlay</key>
<true/>
```

**Android 5.1.9+**

```xml theme={null}
<meta-data android:name="com.onesignal.inAppMessageHideGrayOverlay" android:value="true"/>
<meta-data android:name="com.onesignal.inAppMessageHideDropShadow" android:value="true"/>
```

### Puis-je réutiliser des modèles in-app d'autres fournisseurs ?

Oui. Collez votre HTML dans l'éditeur et remplacez les analyses/actions par les méthodes JS in-app OneSignal.

### Je n'ai pas de modèles. Comment puis-je commencer ?

Utilisez le modèle de démarrage fourni ou [parcourez les modèles disponibles](./in-app-html-templates). Une certaine expérience HTML/CSS est recommandée.

### Quelle version du SDK est requise ?

* **iOS :** 3.9.0+
* **Android :** 4.6.3+

Les SDK plus anciens reviendront au rendu Center Modal.

### Les messages in-app fonctionnent-ils hors ligne ?

Non. Les messages nécessitent une connexion Internet active pour récupérer et afficher le contenu.

***