# Créer le contenu d'un e-mail avec l'éditeur de code HTML

<YouTube id="DryThwJHYxk" params="start=258&end=355" playlabel="Vidéo Youtube : Créer le contenu de votre e-mail à partir de zéro avec HTML"/>

Si vous maîtrisez le HTML et préférez écrire votre propre code, vous pouvez créer des e-mails en utilisant l'éditeur de code HTML de Pushwoosh.

<Aside type="note">
Vous n'avez pas de compétences en codage ? Utilisez l'éditeur Drag & drop pour créer sans effort le contenu de vos e-mails. Aucune compétence en codage n'est requise. [En savoir plus](/fr/product/content/email-content/drag-and-drop-email-editor)
</Aside>

<Aside type="caution" title="Important">
Avant de commencer à créer le contenu de votre e-mail, il est essentiel de configurer correctement votre e-mail dans l'éditeur que vous choisissez. Cela implique de configurer les langues, de spécifier la ligne d'objet, de fournir les informations sur l'expéditeur, et plus encore. [Apprenez comment faire](/fr/product/content/email-content/set-up-your-email-in-the-editor)
</Aside>


## Créer le contenu de l'e-mail

Pour commencer à créer le contenu de l'e-mail, collez votre code HTML dans l'onglet HTML. L'éditeur fournit des aperçus en temps réel de l'e-mail pendant que vous travaillez dessus.

<video src="/emails-html-code-editor-1.webm" title="Interface de l'éditeur de code HTML montrant un aperçu en temps réel de l'e-mail pendant la saisie du code" autoplay loop muted playsinline />

Alternativement, vous pouvez télécharger un fichier HTML en cliquant sur **Upload HTML File** situé dans le panneau inférieur.

Pour ajouter une touche personnalisée à vos e-mails, utilisez des tags personnalisés. Pour ce faire :

1. Cliquez sur l'icône **Tag** située en bas de l'éditeur.
2. Sélectionnez le Tag désiré, son modificateur, et fournissez une valeur par défaut si nécessaire.
3. Cliquez sur **Insert** pour inclure le tag personnalisé dans le contenu de votre e-mail.

<img src="/emails-html-code-editor-2.webp" alt="Interface d'insertion de tag personnalisé montrant la sélection de tag et les options de valeur par défaut"/>

Pour inclure un emoji dans votre e-mail, cliquez sur l'icône **Emoji** située en bas de l'éditeur.

### Ajouter des images

Pour ajouter une image à votre e-mail, incluez une balise `<img>` dans votre HTML et définissez l'attribut `src` sur l'URL de l'image.

Pour réutiliser une image de votre [Médiathèque](/fr/product/content/media-store/), copiez son URL et collez-la dans l'attribut `src`. Consultez [Copier l'URL d'une image](/fr/product/content/media-store/#copy-an-image-url) pour les étapes.

```
<img src="YOUR-MEDIA-STORE-URL" alt="Summer sale banner" width="600" style="display:block;max-width:100%;height:auto;" />
```

Remplacez `YOUR-MEDIA-STORE-URL` par l'URL que vous avez copiée depuis la Médiathèque.

## Utiliser la localisation

La localisation vous permet d'offrir des expériences personnalisées aux utilisateurs dans différentes langues.

Dans l'éditeur de code HTML, vous pouvez utiliser la localisation en définissant une langue par défaut et en ajoutant plusieurs options de langue. Par exemple, vous pouvez définir un message par défaut en anglais, puis inclure des traductions en allemand et en espagnol. Cela garantit que le contenu de votre e-mail s'adapte aux préférences linguistiques de chaque utilisateur.

Voici un exemple de la manière de structurer vos données de localisation. Cet exemple utilise l'anglais comme langue par défaut et des traductions en allemand et en espagnol.

```json
{
  "default": {
    "button": "Shop now",
    "description": "For a limited time, you can enjoy a 20% discount on all our premium coffee blends",
    "subtitle": "Don't miss it",
    "title": "☕ Coffee Promotion Alert!"
  },
  "de": {
    "button": "Jetzt einkaufen",
    "description": "Für kurze Zeit erhalten Sie einen Rabatt von 20% auf alle unsere Premium-Kaffeemischungen",
    "subtitle": "Verpassen Sie es nicht",
    "title": "☕ Kaffee-Promotion Benachrichtigung!"
  },
  "es": {
    "button": "Comprar ahora",
    "description": "Por tiempo limitado, puedes disfrutar de un descuento del 20% en todas nuestras mezclas de café premium",
    "subtitle": "No te lo pierdas",
    "title": "☕ ¡Alerta de Promoción de Café!"
  }
}
```

Une fois que vos données de localisation sont structurées et ajoutées dans l'**onglet Localisation** de l'éditeur, incorporez-les dans votre contenu HTML à l'aide de placeholders. Les placeholders insèrent dynamiquement le texte localisé dans votre contenu, en fonction de la préférence linguistique de l'utilisateur. Voici comment l'implémenter dans votre HTML

```
{{title|text|}}
{{subtitle|text|}}
{{description|text|}}
{{button|text|}}
```

Considérez ce scénario : vous faites la promotion d'une réduction à durée limitée sur des mélanges de café. En utilisant la structure de localisation mentionnée ci-dessus, vous pouvez communiquer efficacement votre message promotionnel aux utilisateurs parlant différentes langues. Votre code HTML pour la promotion pourrait ressembler à ceci :

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>☕ Coffee Promotion Alert</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
  }
  .container {
    background-color: #fff;
    padding: 20px;
    margin: 10px auto;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #ff6f61;
    color: white;
    text-decoration: none;
    border-radius: 5px;
  }
  .button:hover {
    background-color: #ff5733;
  }
  .footer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8em;
    color: #888;
  }
</style>
</head>
<body>
  <div class="container">
    <h1>{{title|text|}}</h1>
    <p>{{description|text|}}</p>
    <a href="https://www.example.com/promotion" class="button">{{button|text|}}</a>

  </div>
</body>
</html>
```

Avec cette configuration, si la langue d'un utilisateur est l'allemand, il verra l'e-mail en allemand. Les utilisateurs qui ont choisi de recevoir des e-mails en anglais le verront en anglais. Ceux qui ont choisi de le recevoir en espagnol le recevront en espagnol. Cela garantit que tous les destinataires reçoivent votre message dans leur langue préférée.

<video src="/emails-html-code-editor-3.webm" title="Démonstration de la localisation montrant le contenu de l'e-mail dans différentes langues" autoplay loop muted playsinline />

## Insérer et combiner des blocs de contenu d'e-mail

Pushwoosh vous permet de combiner le contenu des e-mails en insérant un élément de contenu d'e-mail dans un autre. Cela facilite la réutilisation d'éléments tels que les en-têtes, les pieds de page ou des blocs de contenu spécifiques dans différents e-mails.

Par exemple, si vous avez un **Contenu d'e-mail A** (un en-tête) et un **Contenu d'e-mail B** (une newsletter), vous pouvez insérer le **Contenu d'e-mail A** dans le **Contenu d'e-mail B** sans avoir à copier manuellement le contenu à chaque fois.

### Syntaxe

Pour insérer un élément de contenu dans un autre, utilisez la syntaxe suivante :

```
{% email_content "AAAAA-BBBBB" %}
```

Où « AAAAA-BBBBB » est l'ID du contenu de l'e-mail que vous souhaitez insérer. Vous pouvez trouver l'ID situé sous le nom du contenu dans votre liste de contenus d'e-mail.

<img src="/emails-html-code-editor-4.webp" alt="Affichage de l'ID du contenu de l'e-mail montrant le nom du contenu et l'identifiant unique"/>

<Aside type="caution" title="Important">
* Vous pouvez insérer du contenu de manière récursive, ce qui signifie qu'un bloc de contenu peut en inclure un autre, jusqu'à une profondeur maximale de 3 niveaux. Par exemple :
  * Le **Contenu A** peut insérer le **Contenu B**.
  * Le **Contenu B** peut insérer le **Contenu C**.
  * Cependant, le **Contenu C** ne peut pas insérer un autre bloc.
* Les **insertions cycliques** (par exemple, où le **Contenu A** insère le **Contenu B** et le **Contenu B** essaie d'insérer le **Contenu A**) ne sont pas autorisées et entraîneront une erreur.
</Aside>  

**Exemple**

Supposons que vous ayez deux éléments de contenu :

* **Contenu d'en-tête** (ID : « AAAAA-BBBBB ») avec un design d'en-tête prédéfini.
* **Contenu de la newsletter**, où vous souhaitez inclure l'en-tête.

Pour insérer l'en-tête dans la newsletter, vous utiliseriez ce qui suit :

```

{% email_content "AAAAA-BBBBB" %}
```

Cela vous permet de réutiliser facilement un en-tête prédéfini dans plusieurs campagnes d'e-mails. Cela permet de gagner du temps et d'assurer la cohérence de vos e-mails.


## Ajouter un lien de désabonnement

Incluez un lien de désabonnement dans votre e-mail afin que les destinataires puissent se désinscrire conformément à la réglementation et à leurs préférences. Pushwoosh fournit trois variables que vous pouvez utiliser dans votre HTML.

### Lien de désabonnement 

Ajoutez ce lien pour que les utilisateurs puissent se désinscrire du message qu'ils ont reçu :

```
<a href=%%PW_EMAIL_UNSUBSCRIBE%%> Unsubscribe </a>
```

La variable est remplacée par l'URL de désabonnement de Pushwoosh lorsque vous envoyez l'e-mail.

- Lorsque le centre de préférences d'abonnement est activé, les destinataires ne sont désabonnés que de la catégorie assignée à cet e-mail (par exemple, *Newsletter*). Un écran de confirmation apparaît où ils peuvent se **Réabonner** à cette catégorie ou **Gérer les préférences** pour ajuster toutes les catégories d'e-mails. [En savoir plus](/fr/product/messaging-channels/emails/email-preferences/#default-behavior-unsubscribe-from-a-category)

- Lorsque le centre de préférences d'abonnement n'est pas activé, les destinataires se désabonnent de tous les e-mails marketing.

Les clics sont comptabilisés dans le taux de désabonnement pour ce message dans l'[Historique des messages](/fr/product/statistics-and-analytics/message-history).

### Se désabonner de toutes les catégories 

Ajoutez un lien qui désabonne l'utilisateur de toutes les catégories d'e-mails en une seule fois :

```
<a href=%%PW_EMAIL_UNSUBSCRIBE_ALL%%> Unsubscribe from all emails </a>
```

<Aside type="note">
Pour vous permettre de livrer des e-mails importants à vos clients, nous ne supprimons pas les utilisateurs désabonnés de votre base d'utilisateurs. Pour les utilisateurs qui se sont complètement désinscrits (par exemple, via le lien de désabonnement par défaut lorsque le centre de préférences n'est pas activé, ou via le lien Se désabonner de tout), le [tag par défaut **E-mails désabonnés**](/fr/product/audience-data-and-segmentation/user-data-tags) est défini sur « true ». 

Envisagez de créer un [segment](/fr/product/audience-data-and-segmentation/segmentation/) d'utilisateurs qui ne se sont pas désabonnés (valeur de tag « false ») pour continuer à leur envoyer des messages. Pour éviter les plaintes, n'envoyez pas d'e-mails aux utilisateurs qui se sont désabonnés.
</Aside>

### Lien vers le centre de préférences 

Ajoutez un lien direct vers le [centre de préférences](/fr/product/messaging-channels/emails/email-preferences/#optional-setup-full-preference-center) où les utilisateurs gèrent les catégories qu'ils reçoivent :

```
<a href=%%PW_EMAIL_PREFERENCE_CENTER_LINK%%> Manage preferences </a>
```
[Apprenez comment fonctionne le centre de préférences](/fr/product/messaging-channels/emails/email-preferences/#how-to-let-users-unsubscribe-from-a-category-or-manage-preferences)

La capture d'écran ci-dessous montre un pied de page qui utilise les trois types de liens.

<img src="/emails-html-code-editor-6.webp" alt="Exemple de pied de page d'e-mail avec les trois liens de désabonnement : Se désabonner, Gérer les préférences, Se désabonner de tous les e-mails"/>

<Aside type="caution">
Si vous utilisez votre propre lien de désabonnement au lieu des variables Pushwoosh, les utilisateurs qui se désinscrivent via votre lien ne sont pas inclus dans le taux de désabonnement dans l'[Historique des messages](/fr/product/statistics-and-analytics/message-history). Seuls les utilisateurs qui ont suivi le lien Pushwoosh sont comptabilisés dans les statistiques de cet e-mail.
</Aside>

## Enregistrer le contenu de l'e-mail

Après avoir terminé la création de votre e-mail, cliquez sur le bouton **Save** situé en haut de l'éditeur.

<img src="/emails-html-code-editor-5.webp" alt="Boîte de dialogue d'enregistrement du contenu de l'e-mail montrant les champs de nom et d'étiquette"/>

Dans la nouvelle fenêtre qui apparaît, donnez à votre e-mail un nom clair, qui pourrait être le même que votre ligne d'objet. Créez également une étiquette pour vous aider à le retrouver facilement dans votre liste d'e-mails.

Si vous n'avez pas encore [configuré les détails de l'expéditeur](/fr/product/content/email-content/set-up-your-email-in-the-editor), assurez-vous de le faire également. Ensuite, cliquez sur **Save.**

Maintenant que le contenu de votre e-mail est prêt, il peut être utilisé dans des campagnes d'e-mails. [En savoir plus](/fr/product/messaging-channels/emails/sending-emails)

## Envoyer un e-mail de test

Avant d'envoyer votre campagne d'e-mails, vous pouvez envoyer un e-mail de test pour prévisualiser comment le contenu apparaîtra dans les boîtes de réception des destinataires. Cela vous permet de vérifier la mise en page, le contenu et tout élément personnalisé pour garantir l'exactitude avant de finaliser la campagne. Si nécessaire, ajustez le contenu en fonction des résultats du test.

<Aside type="note">
Si le KYC **(Know Your Customer)** n'est pas terminé, vous pouvez toujours envoyer des e-mails de test en vérifiant une adresse e-mail de test. Pour ce faire, allez dans la section [Appareils de test](/fr/developer/first-steps/test-your-integration/test-devices/), ajoutez l'adresse e-mail que vous souhaitez utiliser pour les tests, et terminez le processus de vérification.
</Aside>

Pour envoyer un e-mail de test, cliquez sur **Test email** dans l'éditeur d'e-mail.

<img src="/shared-14.webp" alt="Bouton d'e-mail de test dans l'interface de l'éditeur d'e-mail"/>

 Dans la fenêtre qui s'ouvre :

1. Dans le champ **Email address**, saisissez l'adresse e-mail où vous souhaitez recevoir l'e-mail de test.

Si le KYC n'a pas été complété, vous devrez sélectionner une adresse e-mail vérifiée dans la liste des adresses de test au lieu de saisir un e-mail.

<img src="/shared-50.webp" alt="Menu déroulant de sélection d'adresse e-mail de test vérifiée"/>

2. Si votre e-mail contient du contenu dynamique (placeholders pour des données personnalisées), ajoutez des valeurs d'exemple à des fins de test.

Par exemple :

* **Age (entier)** : Saisissez un nombre pour représenter le placeholder de l'âge (par ex., `21`).
* **FirstName (chaîne de caractères)** : Saisissez un prénom d'exemple (par ex., `David`).

Ces valeurs remplaceront les données réelles des destinataires dans l'e-mail de test, vous permettant de vérifier comment le contenu dynamique apparaît.

3. Une fois que vous avez rempli les détails nécessaires, cliquez sur **Send test email** pour envoyer le message de test à l'adresse e-mail fournie.

<img src="/shared-34.webp" alt="Boîte de dialogue de confirmation d'envoi d'e-mail de test avec des champs de données d'exemple"/>