Aller au contenu principal

Éditeur IA pour les emails

Pour :Administrateur
Vue de la page « editeur ia emails »

L'Éditeur IA – Email d'Unisoft est un éditeur de modèles d'email qui fonctionne par conversation : vous décrivez l'email que vous voulez, l'IA le génère sous vos yeux, vous l'affinez par messages successifs jusqu'à ce qu'il vous plaise. Pas de glisser-déposer de blocs, pas de réglages techniques — uniquement du langage naturel.

Cette page détaille comment l'utiliser au quotidien, les règles imposées par l'IA (structure HTML compatible Outlook/Gmail), les variables disponibles, l'envoi d'un email de test et toutes les particularités à connaître.

Quand l'utiliser​

L'Éditeur IA – Email est particulièrement utile dans ces cas :

  • Vous démarrez un nouveau modèle sans idée précise de mise en page : un prompt court suffit à obtenir une base soignée.
  • Vous avez un brief simple (« newsletter de Tichri avec image en haut, deux paragraphes et un bouton ») : l'IA produit en quelques secondes ce qui vous prendrait 20 minutes à la souris.
  • Vous voulez tester plusieurs idées : un même brief peut donner trois variantes en trois prompts — vous gardez celle qui vous plaît via l'historique.

À l'inverse, si vous avez un HTML très spécifique (modèle envoyé par un graphiste, intégration pixel-perfect d'une charte stricte), l'éditeur classique reste plus adapté : vous y collez votre HTML et le contrôlez à 100 %.

Activer le mode IA à la création​

L'Éditeur IA se choisit au moment de la création d'un modèle d'email.

  1. 1

    Ouvrir Modèles d'email

    Rendez-vous sur /app/templates/email (entrée Mes Modèles d'email dans la sidebar admin).

  2. 2

    Cliquer Ajouter un modèle

    Bouton bleu en haut à droite. La fenêtre d'ajout s'ouvre.

  3. 3

    Sélectionner Éditeur IA

    Dans le champ Type d'éditeur, choisissez Editeur IA au lieu de Editeur Classique. Ce champ n'est visible qu'en environnement non-production le temps de la bêta.

  4. 4

    Donner un nom au modèle

    Champ requis. Exemple : Newsletter mensuelle (Tichri 5786) ou Invitation Brit Mila — David Cohen.

  5. 5

    Laisser le champ HTML vide

    Vous pouvez ignorer le champ Code HTML — l'IA va générer le HTML pour vous. Si vous y collez quand même du HTML, il servira de point de départ que l'IA pourra modifier.

  6. 6

    Valider

    Cliquez sur Valider. Le modèle est créé en base et vous êtes redirigé vers l'Éditeur IA (route /editor/ai/email?id=[ID]).

L'interface en détail​

L'éditeur prend tout l'écran : la barre latérale du backoffice est masquée le temps de l'édition pour vous donner de la place. Il est divisé en deux panneaux :

Panneau de gauche – la discussion​

De haut en bas :

  • En-tête : avatar IA + nom du modèle (cliquable pour rappel) + sous-titre « Créez votre email par la discussion ».
  • Barre Variables : quatre boutons qui copient en un clic une balise dans le presse-papier (vous la collez ensuite dans votre prompt ou directement dans le HTML via un prompt) :
    • {{nom}} — Nom du destinataire
    • {{prenom}} — Prénom
    • {{prenomHE}} — Prénom hébraïque (si présent dans la fiche contact)
    • {{mailing_unsubscribe}} — Lien de désinscription
  • Panneau Images (repliable) : zone de glisser-déposer pour vos visuels. Cliquez sur l'en-tête Images (N) pour le déployer.
  • Historique de la conversation : vos prompts (en bulles noires à droite) + les badges de génération (« ✅ Email généré — HTML complet ») + les récapitulatifs IA en français.
  • Champ de prompt en bas : un textarea qui s'agrandit jusqu'à 160 px de hauteur, un bouton flèche pour envoyer (ou Entrée), et un bouton Stop carré pendant la génération si vous voulez interrompre.

Panneau de droite – l'aperçu​

De gauche à droite dans la barre d'outils :

  • Quitter (rouge) : revient à la page Modèles d'email. Vous demande confirmation si vous avez des modifications non enregistrées.
  • Desktop / Mobile : bascule le rendu en largeur fixe 390 px (frame iPhone) pour vérifier le responsive.
  • Tester : ouvre une fenêtre qui vous permet d'envoyer un email de test à l'adresse de votre choix (très utile pour vérifier le rendu réel dans Gmail ou Outlook, voir plus bas).
  • Enregistrer : noir si des modifications sont en attente, gris sinon.
  • ← → : navigation dans l'historique des versions.
  • Historique : ouvre une popup listant toutes les versions générées avec leur horodatage et le début du prompt qui les a produites.

En dessous, l'iframe d'aperçu affiche le rendu en direct. Tous les liens cliqués s'ouvrent dans un nouvel onglet (l'éditeur intercepte les clics) — cela évite que vous quittiez l'éditeur en cliquant accidentellement sur un bouton du rendu.

Importer des images​

L'IA ne fabrique pas d'images ; vous devez fournir vos propres visuels.

  1. 1

    Ouvrir le panneau Images

    Cliquez sur l'en-tête Images (0) dans le panneau de gauche pour le déployer.

  2. 2

    Importer

    Glissez-déposez vos fichiers dans la zone pointillée, ou cliquez dessus pour ouvrir le sélecteur de fichiers. Les formats acceptés sont tous les formats image (image/*).

  3. 3

    Attendre l'upload

    Une barre de chargement s'affiche pendant que l'image est envoyée sur les serveurs Unisoft (validation, conversion, URL finale).

  4. 4

    Référencer l'image dans un prompt

    Une fois importée, l'image apparaît en miniature dans le panneau. L'IA peut la « voir » : vous pouvez écrire des prompts comme « Utilise la première image en bannière en haut de l'email » ou « Mets l'image que je viens d'importer dans une carte centrée ».

Pour retirer une image, cliquez sur la petite croix noire en haut à droite de sa miniature.

Règles imposées par l'IA (structure HTML)​

L'IA suit des règles strictes pour garantir que les emails s'affichent correctement dans tous les clients mail (Gmail, Outlook, Apple Mail, Thunderbird, web et mobile). Vous n'avez pas à les connaître pour les utiliser, mais elles expliquent certaines limitations.

RèglePourquoi
Tables HTML uniquement pour la mise en page (pas de flexbox, pas de grid)Outlook ignore les CSS modernes et casserait toute mise en page non basée sur des tables.
Styles inline uniquement (style="..." directement sur la balise)Pas de balise <style> ni de fichier CSS externe : Gmail les supprime ou les ignore.
Largeur fixe 600 px, centrée sur un fond #f4f4f4C'est la largeur standard supportée par tous les clients mail.
Polices système uniquement (Arial, Helvetica, sans-serif)Les polices web (Google Fonts, etc.) ne sont pas chargées dans les emails.
Largeur/hauteur des images en attribut HTML (width=, height=) en plus du CSSOutlook ignore certaines règles CSS d'image.
Pas de JavaScript, pas de formulaires complexesLes clients mail bloquent toute exécution de script et la plupart des formulaires interactifs.
Pas de :hover ni d'animationsNon supporté par la majorité des clients mail.

Structure obligatoire : chaque email généré contient toujours 3 blocs verticaux :

  1. Header : bandeau coloré en haut avec le logo ou le nom de l'organisation.
  2. Body : contenu principal sur fond blanc.
  3. Footer : bandeau du bas avec mentions légales et le lien {{mailing_unsubscribe}} (obligatoire pour respecter le RGPD et les règles anti-spam).

Les variables disponibles​

Vous pouvez insérer dans l'email des variables de personnalisation qui seront remplacées à l'envoi par les données du contact destinataire.

VariableRemplacée par
{{prenom}}Le prénom du contact (David)
{{nom}}Son nom de famille (Cohen)
{{prenomHE}}Son prénom hébraïque s'il existe sur la fiche contact (דוד)
{{mailing_unsubscribe}}Le lien de désinscription personnalisé (obligatoire en footer)

Deux façons de les insérer :

  • Cliquer sur la variable dans la barre Variables → elle est copiée dans le presse-papier → vous la collez dans votre prompt (« Commence l'email par Bonjour {{prenom}} »).
  • Demander à l'IA directement : « Personnalise le début avec le prénom du destinataire » — elle utilisera {{prenom}} automatiquement.

Pour la liste complète des variables et les contextes où elles s'appliquent, voir Variables des modèles d'email.

Multilingue : pas d'injection automatique pour les emails​

Contrairement à l'Éditeur IA pour les pages web, les modèles d'email ne reçoivent pas d'injection automatique de clés data-i18n au moment de la sauvegarde. Un modèle d'email = une langue.

Envoyer un email de test​

L'aperçu dans l'iframe donne une bonne idée du rendu, mais rien ne vaut un vrai envoi pour vérifier ce que vos destinataires verront — surtout pour Outlook qui a souvent des surprises.

  1. 1

    Cliquer sur Tester

    Dans la barre d'outils au-dessus de l'aperçu, cliquez sur le bouton Tester (icône avion en papier).

  2. 2

    Saisir une adresse

    Une fenêtre s'ouvre. Saisissez l'adresse de votre choix — la vôtre, celle de votre direction, celle d'une boîte test Outlook…

  3. 3

    Envoyer

    Validez : l'email part immédiatement avec le HTML courant (la version affichée à l'écran). Les variables {{prenom}}, {{nom}} ne sont pas remplacées dans un test — vous verrez les balises brutes. C'est normal : à l'envoi réel via une campagne, elles seront substituées par les données du contact.

Bonnes pratiques de prompting​

L'IA produit ce que vous lui demandez. Plus votre demande est précise, meilleur est le résultat.

Commencez par un brief général​

Crée une newsletter mensuelle pour notre communauté avec :
- Un bandeau de couleur bordeaux en haut avec notre nom
- Une zone centrale pour 3 paragraphes
- Une carte mise en avant avec image + bouton "En savoir plus"
- Un footer sobre avec nos contacts

L'IA va produire une base complète. Ensuite, vous affinez par petites touches.

Affinez par messages courts​

Mets le bandeau du haut en bleu marine plutôt
Ajoute une signature avec "L'équipe de la communauté Beth David"
Le bouton est trop pâle, mets-le en orange vif

Chaque prompt regénère un email complet, mais comme l'IA a le HTML courant en contexte, elle ne touche qu'à ce que vous demandez.

Exemples de prompts utiles pour une communauté​

  • Annonce de fête : « Crée un email pour annoncer le menu de Pessah à la communauté, avec l'horaire du Seder (lundi 22 avril à 20h30), le menu sur fond clair, et un bouton S'inscrire au repas en couleur chaude ».
  • Rappel de don : « Email sobre pour rappeler une promesse de don non honorée, ton bienveillant, bouton Régler en ligne en bas ».
  • Invitation événement : « Invitation pour une conférence du rabbin Yossi Mizrahi sur la paracha, jeudi 18h30, image en haut, lieu et plan en bas, bouton Je viens ».
  • Voeux de fête : « Voeux de Roch Hachana sobres, fond doré, calligraphie élégante, un seul paragraphe en hébreu suivi de sa traduction ».
  • Confirmation d'inscription : « Email transactionnel pour confirmer une inscription, ton chaleureux, infos pratiques (date, lieu, contact) en gras, signature de l'équipe ».

Donnez le ton​

Précisez dans le prompt si vous voulez quelque chose de sobre, chaleureux, festif, institutionnel, moderne, traditionnel. L'IA adapte les couleurs, les marges et le ton du texte.

Chaque prompt produit une nouvelle entrée d'historique. Trois boutons en haut à droite de l'aperçu :

  • ← : reculer d'une version.
  • → : avancer (si vous étiez revenu en arrière).
  • Historique : ouvre une popup avec la liste complète. Chaque entrée affiche le début du prompt qui l'a générée (« Mets le bandeau en bleu marine… ») et son heure de génération.

Enregistrer et quitter​

Le bouton Enregistrer change d'aspect selon l'état :

  • Gris : aucune modification depuis le dernier enregistrement (ou depuis l'ouverture si vous n'avez encore rien changé).
  • Noir : modifications en attente — un clic les enregistre.

À l'enregistrement, le serveur :

  1. Stocke le HTML courant et la liste des images importées.
  2. Régénère la vignette : un screenshot PNG du rendu de l'email est produit côté serveur (via un navigateur headless) et utilisé comme image de couverture sur la page Modèles d'email.

Si vous tentez de quitter l'éditeur sans enregistrer (bouton Quitter, fermeture d'onglet, retour navigateur), une confirmation s'affiche pour éviter une perte involontaire.

Utiliser le modèle dans une campagne​

Une fois enregistré, votre modèle apparaît dans la grille Mes Modèles d'email comme n'importe quel autre modèle, avec sa vignette générée. Vous pouvez ensuite :

  • Le renommer (clic sur le titre).
  • Le dupliquer (icône bleue) pour partir d'une base et créer une variante.
  • Le réutiliser dans une campagne : sur /app/messages/campagnes → Créer une Campagne → canal Email → champ Modèle d'email.

Voir Modèles d'email pour la gestion complète des modèles et Créer une campagne de messages pour la suite.

Limites à connaître​

  • Fonctionnalité en bêta : visible uniquement dans les environnements non-production pour l'instant.
  • Pas de génération d'images par l'IA : importez vos visuels via le panneau Images.
  • Pas de bascule Éditeur IA ↔ Éditeur Classique : le choix fait à la création est figé.
  • Pas d'édition bloc-par-bloc dans l'UI : tout passe par le chat (« Change la couleur du bouton ») ou par un retour à une version précédente via l'Historique.
  • Pas de support multi-langue intégré côté email : un modèle = une langue (voir l'encart dédié ci-dessous).
  • Variables non substituées dans le test : à l'envoi de test, {{prenom}} reste affiché tel quel. La substitution se fait à l'envoi réel via une campagne.

Pour aller plus loin​