Comprendre l'Éditeur IA Unisoft

Pour :Administrateur

Vue de la page « comprendre editeur ia »

L'Éditeur IA d'Unisoft est une nouvelle façon de produire du contenu pour votre communauté : au lieu de glisser-déposer des blocs à la souris, vous décrivez à l'IA ce que vous voulez dans un chat, et l'éditeur génère le HTML correspondant en quelques secondes. Vous voyez le résultat se construire en direct dans le panneau d'aperçu, et vous l'affinez par des messages successifs ("change la couleur du bouton en bleu", "ajoute une section témoignages", "fais quelque chose de plus sobre"…).

Cette page vous explique le concept, comment ça fonctionne sous le capot, les trois variantes disponibles (emails, pages web, blocs de contenu) et les limites actuelles liées au statut bêta.

ℹ

Disponibilité

L'Éditeur IA est en bêta. Le sélecteur Éditeur IA lors de la création d'un modèle d'email ou d'une page web n'est visible que dans les environnements non-production (staging, test). Il sera ouvert progressivement à toutes les organisations une fois la phase bêta terminée.

Si vous ne voyez pas le choix « Éditeur IA » dans votre backoffice, c'est normal : votre organisation utilise l'éditeur classique et la bascule se fera automatiquement plus tard.

L'idée en une phrase

Avec l'Éditeur IA, vous parlez, l'IA dessine. Vous restez maître du brief (votre prompt), de l'image que vous fournissez, du contexte de votre organisation, et vous validez visuellement chaque itération. L'IA s'occupe de la mise en forme HTML, des couleurs, des marges, de la structure responsive — tout ce qui prend du temps quand on conçoit à la main.

C'est utile dans trois cas typiques :

• Vous n'êtes pas designer et vous voulez un rendu professionnel sans passer des heures sur les marges.
• Vous êtes pressé : un email à envoyer ce soir, une page à publier avant un événement.
• Vous voulez itérer vite : tester plusieurs idées de mise en page sans tout refaire à chaque fois.

Les trois variantes

L'Éditeur IA existe en trois déclinaisons, chacune optimisée pour son usage. Le moteur est le même, mais les règles de génération appliquées au HTML diffèrent.

Variante	À quoi ça sert	Page dédiée
Éditeur IA – Email	Générer des modèles d'email réutilisables dans vos campagnes de messages. HTML compatible Gmail, Outlook, Apple Mail (tables + styles inline, largeur 600 px).	Éditeur IA pour les emails
Éditeur IA – Page web	Générer des pages CMS affichées sur votre site public (qui sommes-nous, projets, présentation du rabbin, événement…). HTML moderne, responsive, container 1200 px.	Éditeur IA pour les pages web
Éditeur IA – Bloc de contenu	Générer un fragment HTML autonome à insérer dans une page existante via un champ « Bloc IA ». Styles encapsulés (classes préfixées aicb-*) pour éviter les collisions avec la page hôte.	(intégré aux formulaires et autres modules selon votre configuration)

Le choix de la variante n'est pas un réglage à faire vous-même : il dépend de l'endroit où vous lancez l'éditeur.

• Vous créez un modèle d'email (/app/templates/email) et choisissez Éditeur IA → vous arrivez sur l'Éditeur IA – Email.
• Vous créez une page CMS (/app/web/pages) et choisissez Éditeur IA → vous arrivez sur l'Éditeur IA – Page web.
• Un champ de configuration plus avancé peut ouvrir l'Éditeur IA – Bloc de contenu pour produire un fragment réutilisable.

⚠

Choix figé à la création

Une fois un modèle d'email ou une page web créé en mode Éditeur IA, le mode est figé : on ne peut pas basculer vers l'éditeur classique (et inversement). Si vous avez créé un brouillon dans le mauvais mode, le plus simple est de supprimer et recréer.

Comment ça fonctionne

L'Éditeur IA est un chat assisté d'outils. Voici les étapes côté coulisses chaque fois que vous appuyez sur Envoyer :

1. 1

   Vous tapez un prompt

   Vous décrivez ce que vous voulez : « Crée un email pour annoncer le menu de Pessah avec une image en haut et un bouton S'inscrire ». Vous validez avec Entrée (ou avec le bouton flèche).

2. 2

   Unisoft compose le contexte

   Avant d'appeler le modèle IA, le backoffice ajoute discrètement à votre prompt :

   • Le système prompt propre à la variante (règles HTML, contraintes de design, variables obligatoires…).
   • Les informations de votre organisation (nom, logo, adresse, téléphone, e-mail, site web, contact principal) pour que l'IA personnalise le rendu.
   • Le HTML actuel du document (pour que l'IA modifie au lieu de repartir de zéro).
   • Les images que vous avez importées (l'IA peut les « voir » et les utiliser dans le design).
3. 3

   L'IA génère le HTML

   Le modèle reçoit toutes ces infos et appelle un outil interne set_full_html qui contient le nouveau HTML complet. Le contenu est streamé : vous voyez un compteur de tokens monter en direct (~500 tok) pendant la génération.

4. 4

   L'aperçu se met à jour

   Le HTML est immédiatement injecté dans l'iframe d'aperçu à droite (mode Desktop par défaut, mais vous pouvez basculer en Mobile pour vérifier le responsive). Vous voyez le résultat en quelques secondes.

5. 5

   Un second appel résume les changements

   Une fois le HTML appliqué, un deuxième appel à l'IA produit un récapitulatif en français des modifications apportées (« ✅ Bandeau de couleur ajouté, bouton centré, footer mis à jour… ») et propose 2-3 suggestions concrètes pour la suite.

6. 6

   Vous itérez ou vous enregistrez

   Vous pouvez relancer un prompt (« Mets le bouton en vert » ; « Ajoute une image de matsot »), revenir à une version précédente via le bouton Historique, ou cliquer Enregistrer quand le rendu vous convient.

L'interface en bref

Sur ordinateur, l'éditeur occupe la totalité de l'écran (la sidebar du backoffice est masquée le temps de l'édition pour vous laisser de la place). Il se compose de deux grandes zones séparées par une barre de redimensionnement que vous pouvez tirer à la souris :

• À gauche – le panneau de discussion : c'est là que vous écrivez vos prompts. On y trouve aussi un panneau Images repliable pour glisser-déposer vos visuels, et (pour l'email uniquement) une barre Variables qui copie en un clic des balises comme {{prenom}} ou {{mailing_unsubscribe}} à coller dans vos messages.
• À droite – l'aperçu en direct : une iframe qui rend le HTML généré. Au-dessus, une barre d'outils permet de basculer Desktop / Mobile, de revenir à la version précédente (←), d'avancer (→), de consulter l'Historique complet, d'envoyer un email de test (variante email uniquement), de cliquer Enregistrer ou de Quitter l'éditeur.

Sur mobile (écran < 640 px), les deux panneaux deviennent deux onglets en bas de l'écran : Chat et Aperçu. Vous basculez d'un onglet à l'autre selon que vous écrivez un prompt ou que vous vérifiez le rendu.

Le modèle IA utilisé

Unisoft utilise un modèle IA propriétaire optimisé pour la génération de contenu HTML, hébergé sur les serveurs de l'éditeur. Vous n'avez pas besoin de fournir de clé d'API, de payer un service externe, ou de configurer quoi que ce soit : l'accès est inclus dans votre abonnement Unisoft.

Quelques propriétés importantes côté utilisateur :

• Multilingue : le modèle comprend et génère du français, de l'anglais, de l'hébreu et d'autres langues. Vous pouvez écrire vos prompts dans la langue de votre choix.
• Vision : le modèle peut « voir » les images que vous importez dans l'éditeur (panneau Images). Vous pouvez lui demander de référencer un visuel précis (« mets cette photo en haut, centrée, avec un léger arrondi »).
• Streaming : la réponse arrive en flux continu. Le compteur de tokens (~500 tok) vous indique la longueur estimée pendant la génération.
• Pas de génération d'images : l'IA crée du HTML et du CSS, mais ne fabrique pas d'images. Pour illustrer un email ou une page, vous devez importer vos propres visuels dans le panneau Images.

Sauvegarde et historique

À chaque fois que l'IA modifie le HTML, une nouvelle entrée d'historique est créée. Vous pouvez naviguer dans l'historique :

• Bouton ← / → dans la barre d'outils : version précédente / suivante.
• Bouton Historique : ouvre une popup listant toutes les versions avec leur horodatage et le début du prompt qui les a générées. Vous cliquez sur une entrée pour y revenir.

L'historique est local à votre session d'édition : il vit tant que vous restez sur la page de l'éditeur. Une fois que vous enregistrez, c'est la version courante (celle affichée à l'écran) qui est persistée en base de données.

★

Le bouton Enregistrer change d'aspect

Tant que vous n'avez rien modifié, le bouton Enregistrer est gris (inactif). Dès qu'un prompt produit une nouvelle version, il devient noir pour vous indiquer qu'une sauvegarde est en attente. Si vous essayez de quitter sans enregistrer, le navigateur vous demandera confirmation.

À l'enregistrement, le serveur effectue plusieurs opérations selon la variante :

• Pour les pages web et les blocs de contenu : Unisoft injecte automatiquement des clés de traduction (data-i18n="auto_1", data-i18n="auto_2"…) sur chaque texte visible qui n'en a pas encore. Cela permet de traduire la page plus tard en français, anglais, hébreu… sans avoir à modifier le HTML manuellement.
• Pour les modèles d'email : Unisoft génère une vignette PNG du rendu de l'email, qui sera utilisée comme image de couverture dans la liste des modèles. (Cette génération de vignette est propre aux emails : elle ne s'applique pas aux pages web ni aux blocs de contenu.)
• Les images importées sont sauvegardées en même temps que le HTML, sous forme d'une liste d'assets liés au document.

★

À quoi ressemblent les clés `data-i18n` générées ?

L'IA peut produire des clés sémantiques quand elle le juge utile (par exemple data-i18n="hero_title"), mais chaque texte qui n'a pas de clé reçoit automatiquement une clé technique auto_1, auto_2, auto_3… au moment de l'enregistrement. Du point de vue utilisateur, le nom de la clé n'a aucune importance : les traductions fonctionnent et restent stables dans tous les cas. Vous n'avez jamais à manipuler ces clés manuellement.

Variables et personnalisation

Selon la variante, l'IA reçoit ou propose différents éléments de personnalisation :

• Variables d'insertion (emails uniquement) : {{nom}}, {{prenom}}, {{prenomHE}}, {{mailing_unsubscribe}}. Vous pouvez les coller dans un prompt ou directement dans le HTML pour personnaliser chaque envoi avec les données du destinataire.
• Contexte de l'organisation : nom, logo, adresse, téléphone, e-mail, site web, contact principal sont injectés automatiquement dans le contexte de l'IA. Vous pouvez dire : « Mets le logo de l'organisation en haut, à gauche » sans avoir à fournir l'URL — l'IA la connaît.
• Système multilingue automatique : pour les pages web, chaque texte généré reçoit une clé data-i18n côté serveur. Le bandeau de langues au-dessus de l'aperçu vous permet de basculer entre les langues activées pour votre organisation et de remplir les traductions manquantes (l'IA peut les traduire toutes en un clic).

Limites actuelles

L'Éditeur IA est en bêta. Quelques points à connaître avant de vous lancer :

• Disponibilité : visible uniquement dans les environnements non-production pour l'instant. Le déploiement en production se fera progressivement.
• Pas de génération d'images par l'IA : tous les visuels doivent être importés manuellement dans le panneau Images.
• Pas d'édition bloc-par-bloc dans l'interface : pour modifier une partie précise, vous devez demander la modification dans le chat (« Change la couleur du bouton en bleu ») ou revenir à une version précédente via l'Historique.
• Pas de bascule entre éditeur IA et éditeur classique : le mode choisi à la création est figé.
• Versions complètes uniquement : l'historique enregistre des versions complètes du HTML, pas des micro-modifications individuelles. Si vous voulez annuler un détail, vous reculez d'une version complète et vous itérez à partir de là.
• Pas de quota explicite affiché à ce jour. Restez raisonnable et privilégiez des prompts précis : moins d'allers-retours, c'est aussi plus rapide pour vous.
• Variables d'email obligatoires : pour les emails, le lien {{mailing_unsubscribe}} doit être présent dans le footer pour la conformité légale. L'IA l'ajoute par défaut, mais vérifiez bien qu'il y est toujours après vos modifications.

Les autres assistants IA d'Unisoft

L'Éditeur IA est l'une des trois briques IA d'Unisoft. Les deux autres :

• Yossi — l'assistant IA accessible depuis WhatsApp, pour exécuter des actions rapides en mobilité (créer un rappel, enregistrer une promesse, retrouver un contact).
• Zalmi — l'assistant IA intégré au dashboard du backoffice, pour vous aider à comprendre le produit, retrouver une fonctionnalité, ou lancer une génération via les éditeurs IA.

Les trois partagent le même moteur IA propriétaire d'Unisoft.

Pour aller plus loin

• Éditeur IA pour les emails — toutes les spécificités quand vous générez un email (variables, structure obligatoire, envoi d'un test).
• Éditeur IA pour les pages web — toutes les spécificités quand vous générez une page CMS (multilingue, design moderne, container 1200 px).
• Modèles d'email — la page de gestion des modèles, point de départ pour créer un email en mode IA.
• Mes pages — la page de gestion des pages CMS, point de départ pour créer une page en mode IA.