Éditeur de code HTML

Vidéo Youtube : Créez le contenu de vos e-mails à 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.

Note

Vous n’avez pas de compétences en codage ? Utilisez l’éditeur glisser-déposer pour créer sans effort du contenu d’e-mail. Aucune compétence en codage n’est requise. En savoir plus

Important

Avant de commencer à créer du contenu d’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 de l’expéditeur, et plus encore. Découvrez comment faire

Créer le contenu de l’e-mail

Pour commencer à créer du contenu d’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.

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

Pour ajouter une touche personnalisée à vos e-mails, utilisez des balises personnalisées. Pour cela :

1. Cliquez sur l’icône Balise située en bas de l’éditeur.
2. Sélectionnez la balise souhaitée, son modificateur, et fournissez une valeur par défaut si nécessaire.
3. Cliquez sur Insérer pour inclure la balise personnalisée dans le contenu de votre e-mail.

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, copiez son URL et collez-la dans l’attribut src. Voir Copier une URL d’image pour les étapes.

<img src="VOTRE-URL-DE-MEDIATHEQUE" alt="Bannière de soldes d'été" width="600" style="display:block;max-width:100%;height:auto;" />

Remplacez VOTRE-URL-DE-MEDIATHEQUE par l’URL que vous avez copiée de 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. Ceci utilise l’anglais comme langue par défaut et des traductions en allemand et en espagnol.

{
  "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 d’espaces réservés. Les espaces réservés 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 :

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

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 le Contenu d’e-mail A (un en-tête) et le 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 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.

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.

Exemple

Disons que vous avez 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ésinscription

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

Lien de désinscription

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

<a href=%%PW_EMAIL_UNSUBSCRIBE%%> Se désinscrire </a>

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

• Lorsque le centre de préférences d’abonnement est activé, les destinataires ne sont désinscrits 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

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

Les clics sont comptabilisés dans le taux de désinscription pour ce message dans l’Historique des messages.

Se désinscrire de toutes les catégories

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

<a href=%%PW_EMAIL_UNSUBSCRIBE_ALL%%> Se désinscrire de tous les e-mails </a>

Note

Pour vous permettre de livrer des e-mails importants à vos clients, nous ne supprimons pas les utilisateurs désinscrits de votre base d’utilisateurs. Pour les utilisateurs qui se sont complètement désabonnés (par exemple, via le lien de désinscription par défaut lorsque le centre de préférences n’est pas activé, ou via le lien Se désinscrire de tout), la balise par défaut E-mails désinscrits est définie sur ‘true’.

Envisagez de créer un segment d’utilisateurs qui ne se sont pas désinscrits (valeur de balise ‘false’) pour continuer à leur envoyer des messages. Pour éviter les plaintes, n’envoyez pas d’e-mails aux utilisateurs qui se sont désinscrits.

Lien vers le centre de préférences

Ajoutez un lien direct vers le centre de préférences où les utilisateurs gèrent les catégories qu’ils reçoivent :

<a href=%%PW_EMAIL_PREFERENCE_CENTER_LINK%%> Gérer les préférences </a>

Découvrez comment fonctionne le centre de préférences

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

Attention

Si vous utilisez votre propre lien de désinscription au lieu des variables Pushwoosh, les utilisateurs qui se désabonnent via votre lien ne sont pas inclus dans le taux de désinscription dans l’Historique des messages. Seuls les utilisateurs qui ont suivi le lien Pushwoosh sont comptabilisés dans les statistiques de cet e-mail.

Enregistrer le contenu de l’e-mail

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

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, assurez-vous de le faire également. Ensuite, cliquez sur Enregistrer.

Maintenant que le contenu de votre e-mail est prêt, il peut être utilisé dans des campagnes d’e-mails. En savoir plus

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.

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, ajoutez l’adresse e-mail que vous souhaitez utiliser pour les tests, et terminez le processus de vérification.

Pour envoyer un e-mail de test, cliquez sur E-mail de test dans l’éditeur d’e-mails.

Dans la fenêtre qui s’ouvre :

1. Dans le champ Adresse e-mail, entrez 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 d’entrer un e-mail.

2. Si votre e-mail contient du contenu dynamique (espaces réservés pour des données personnalisées), ajoutez des exemples de valeurs à des fins de test.

Par exemple :

• Age (entier) : Entrez un nombre pour représenter l’espace réservé de l’âge (par exemple, 21).
• FirstName (chaîne) : Entrez un exemple de prénom (par exemple, 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 Envoyer l’e-mail de test pour envoyer le message de test à l’adresse e-mail fournie.