Éditeur d'emails

TimePick envoie neuf emails différents (invitation, connexion, confirmations, notifications système…). Le contenu de huit d'entre eux se personnalise depuis un éditeur visuel intégré à l'application, sans toucher au code. Cette fiche décrit cet éditeur : où l'ouvrir, comment est structuré un email, ce qui est libre et ce qui est verrouillé, les variables à ne pas supprimer, la surcharge par événement, l'envoi d'un test et la compatibilité avec les clients de messagerie.

Cette fiche ne couvre pas :

• le logo, les couleurs, la police et l'arrondi des boutons (réglages d'identité visuelle communs à toute l'instance) — voir Identité visuelle des emails ;
• la liste des neuf emails, leurs déclencheurs et leur contenu par défaut — voir Emails automatiques.

Accès à l'éditeur

L'éditeur s'ouvre depuis Paramètres → onglet Modèle d'email. Un sélecteur propose les huit modèles personnalisables : Invitation, Connexion, Confirmation, Création de compte, Annulation, Désinscription, Promotion admin, Retour membre. Choisir un modèle affiche une carte d'aperçu (variables disponibles, avertissement de compatibilité éventuel) ; le bouton Personnaliser avec l'éditeur ouvre l'éditeur plein écran sur ce modèle.

Le neuvième email, envoyé lors de la modification d'un créneau, n'apparaît pas dans ce sélecteur : son contenu est composé dynamiquement à partir du diff des changements et n'est pas personnalisable depuis cet éditeur — voir Emails automatiques.

Accès réservé aux administrateurs

L'écran Paramètres, y compris l'éditeur d'emails, n'est accessible qu'aux comptes ayant le rôle admin — voir Sécurité.

Un éditeur par blocs pensé pour l'email

L'éditeur repose sur un moteur d'édition visuelle par blocs (GrapesJS) associé à un langage de mise en page dédié à l'email (MJML) : plutôt que d'écrire du HTML, l'administrateur glisse-dépose des blocs dans le canvas, et ce qu'il voit à l'écran correspond à ce que reçoit le destinataire. Cinq types de blocs sont disponibles dans le corps d'un email libre : Image, Texte, Bouton, Séparateur, Espace. Ce choix technique (plutôt que du HTML libre) garantit que tout email produit reste lisible dans les principaux clients de messagerie, y compris ceux qui interprètent mal le CSS moderne — voir la section Compatibilité avec les clients de messagerie plus bas.

Vue d'ensemble de la barre d'outils

De gauche à droite, la barre d'outils de l'éditeur propose :

• le titre du modèle en cours d'édition (ou le nom de l'événement, en mode surcharge par événement) ;
• Identité visuelle — logo, couleurs, police, arrondi (voir Identité visuelle des emails) ;
• Envoyer un test (voir plus bas) ;
• le sélecteur de modèle, pour passer d'un modèle à l'autre sans quitter l'éditeur (uniquement dans l'éditeur ouvert depuis Paramètres) ;
• à droite : Revenir au modèle par défaut (uniquement dans l'éditeur d'un événement, et seulement quand une personnalisation existe), Enregistrer, Fermer.

Structure d'un email : trois zones fixes

Chaque email généré par TimePick est composé de trois zones fixes, dans cet ordre : en-tête, corps, pied de page. Ces trois zones ne peuvent être ni ajoutées, ni supprimées, ni réordonnées, quel que soit le modèle ouvert : dans l'éditeur, chacune porte une étiquette permanente (« En-tête », « Corps », « Pied ») et, à la sélection, un badge « Élément structurel — modifiable, non supprimable » rappelle que seule la structure est figée — le contenu, lui, reste librement personnalisable (couleurs, textes, images, boutons).

Le contenu de ces zones se personnalise à trois niveaux qui se superposent :

1. La marque — l'identité de toute l'instance (le point de départ de tous les emails).
2. Le modèle — un type d'email donné (Invitation, Connexion, Confirmation…).
3. L'événement — uniquement pour l'email d'invitation, propre à un événement précis.

Le niveau le plus spécifique défini l'emporte ; une zone laissée vide à un niveau retombe sur le niveau juste au-dessus, jusqu'au contenu livré par défaut avec l'application (le filet de sécurité).

Particularité : l'en-tête est partagé entre les 8 modèles

L'en-tête (et le fond général de l'email) du modèle Invitation sert de référence commune aux sept modèles système. Modifier l'en-tête depuis l'onglet Invitation se répercute donc automatiquement sur les emails de connexion, de confirmation, de création de compte, etc. — sauf si l'un d'eux dispose déjà de sa propre personnalisation. C'est pourquoi l'en-tête et le pied de page ne sont modifiables que depuis l'onglet Invitation : dans les sept autres éditeurs (Connexion, Confirmation…), ils apparaissent verrouillés en lecture seule (voir ci-dessous ce que voit l'administrateur dans ce cas).

Le corps, en revanche, reste toujours strictement propre à chaque modèle : personnaliser le corps de l'invitation ne modifie jamais le corps de l'email de confirmation, et réciproquement.

Ce qui s'affiche quand un contenu est hérité

Cliquer sur un en-tête ou un pied de page verrouillé (hérité d'un niveau supérieur) ouvre un panneau Bloc verrouillé avec un texte du type : « Ce contenu est défini au niveau supérieur. » suivi de la précision de l'origine — « Ce contenu est défini au niveau du modèle d'invitation. », « Ce contenu est défini au niveau de la marque (Paramètres > Email). » ou « Ce contenu est le contenu d'origine fourni avec l'application. » selon le cas. Ce panneau remplace toute tentative d'édition silencieuse : TimePick n'accepte jamais une modification sur un contenu qui ne serait pas réellement sauvegardé.

Réinitialiser tous les modèles d'emails

Dans l'onglet Modèle d'email (en dehors de l'éditeur, à côté du sélecteur de modèle), le bouton Réinitialiser tous les modèles d'emails ramène l'en-tête et le fond partagés ainsi que le contenu des huit modèles à leur valeur d'usine, en une seule opération transactionnelle.

Action destructive et immédiate

« Le design partagé (en-tête, fond, marges) et le contenu des 8 modèles reviendront à l'usine. Les événements et l'identité visuelle sont préservés. Cette action est immédiate et écrase le contenu courant. » (texte affiché dans la boîte de confirmation). Les personnalisations créées au niveau d'un événement précis, ainsi que le logo/couleurs/police (identité visuelle), ne sont pas concernés.

Cette action est limitée à 10 requêtes par minute et par compte admin ; au-delà, l'interface affiche « Trop de requêtes. Veuillez patienter avant de réessayer. »

Mode système : personnalisation restreinte

Les sept modèles système (Connexion, Confirmation, Création de compte, Annulation, Désinscription, Promotion admin, Retour membre) s'ouvrent dans un éditeur en mode contraint : seules deux zones de texte, à l'intérieur du corps, sont éditables — une accroche (le texte d'introduction, juste après la salutation « Bonjour {{user_first_name}}, ») et une signature (le texte de fin, sous le bouton d'action). Contrairement au modèle Invitation, ces deux zones n'acceptent que du texte brut : pas de mise en forme riche, pas de blocs à glisser-déposer, pas d'image, pas de bouton additionnel. Le bouton d'action (« Voir les créneaux disponibles », « Se connecter »…) et le reste de la mise en page restent figés — seul leur emplacement varie selon le modèle.

Le canvas affiche malgré tout l'en-tête et le pied de page hérités (verrouillés, voir ci-dessus) pour que l'admin visualise l'email complet ; mais comme le corps ne propose aucune zone de dépôt libre, la palette de blocs n'y a aucune utilité pratique.

Signaler une variable indispensable manquante

Si l'accroche ou la signature d'un modèle système ne contient plus une variable jugée indispensable (par exemple {{event_name}} sur l'email de confirmation), l'enregistrement affiche un avertissement non bloquant — l'email reste envoyable, mais son contenu peut être incomplet pour le destinataire.

Variables {{...}} : le contenu qui vient d'ailleurs

Chaque modèle expose une liste de variables — des jetons {{nom_variable}} remplacés automatiquement par le serveur au moment de l'envoi (prénom du destinataire, nom de l'événement, lien de connexion…). Elles sont visibles dans le panneau « Variables disponibles » de chaque carte de modèle, et peuvent être insérées dans le corps de l'invitation en glissant le bloc correspondant depuis la palette (catégorie « Variables »).

Ne jamais supprimer une variable indispensable

Retirer une variable marquée indispensable (colonne ci-dessous) casse la fonction de l'email : un lien de connexion sans {{magic_link}}, une confirmation sans {{event_name}}/{{slot_date}}/{{slot_time}} prive le destinataire de l'information essentielle. L'éditeur avertit à l'enregistrement, mais n'empêche pas la sauvegarde.

Variable	Signification
{{user_first_name}}	Prénom du destinataire
{{user_last_name}}	Nom de famille du destinataire (peut être vide)
{{user_full_name}}	Prénom et nom du destinataire
{{event_name}}	Nom de l'événement concerné
{{event_description}}	Description de l'événement concerné
{{slot_date}}	Date du créneau réservé
{{slot_time}}	Heure du créneau réservé
{{magic_link}}	Lien de connexion sécurisé, généré automatiquement
{{expiration_date}}	Date et heure d'expiration du lien de connexion
{{login_url}}	Lien de connexion à l'espace, généré automatiquement
{{cancellation_reason}}	Motif d'annulation pré-formaté (peut être vide)
{{calendar_url}}	Lien vers la page de l'événement pour gérer la réservation

Variables disponibles par modèle (* = indispensable ; les variables portées par le bouton d'action figé des modèles système ne peuvent pas être retirées, elles ne sont donc pas comptées comme indispensables côté éditeur) :

Modèle	Variables disponibles
Invitation	{{user_first_name}}, {{event_name}}, {{event_description}}, {{magic_link}}*, {{expiration_date}}*
Connexion	{{user_first_name}}, {{user_last_name}}, {{user_full_name}}, {{magic_link}} (bouton figé), {{expiration_date}}*
Confirmation	{{user_first_name}}, {{user_last_name}}, {{user_full_name}}, {{event_name}}*, {{slot_date}}*, {{slot_time}}*, {{calendar_url}} (bouton figé)
Création de compte	{{user_first_name}}, {{user_last_name}}, {{user_full_name}}, {{login_url}} (bouton figé)
Annulation	{{user_first_name}}, {{user_last_name}}, {{user_full_name}}, {{event_name}}, {{slot_date}}, {{slot_time}}, {{cancellation_reason}}, {{calendar_url}} (bouton figé)
Désinscription	{{user_first_name}}, {{user_last_name}}, {{user_full_name}}, {{event_name}}*, {{slot_date}}*, {{slot_time}}*, {{calendar_url}} (bouton figé)
Promotion admin	{{user_first_name}}, {{user_last_name}}, {{user_full_name}}, {{login_url}} (bouton figé)
Retour membre	{{user_first_name}}, {{user_last_name}}, {{user_full_name}}, {{login_url}} (bouton figé)

Personnaliser l'invitation pour un événement précis

Le modèle d'invitation peut être surchargé pour un événement donné, sans toucher au modèle général ni aux autres événements : depuis la fiche de l'événement, onglet Template.

Cet écran affiche :

• un badge Personnalisé ou Défaut à côté du titre, selon qu'une personnalisation existe déjà pour cet événement ;
• un aperçu de l'email tel qu'il sera envoyé aux participants (iframe), avant toute ouverture de l'éditeur ;
• le bouton Personnaliser avec l'éditeur, qui ouvre le même éditeur plein écran, cette fois scopé à cet événement.

Dans cet éditeur, le corps de l'invitation est librement personnalisable pour cet événement (mêmes blocs, mêmes variables que le modèle général). L'en-tête et le pied de page restent affichés selon la cascade décrite plus haut ; à ce jour, l'interface ne propose pas encore de créer une surcharge de l'en-tête ou du pied au niveau d'un événement (un clic dessus ouvre le panneau « Bloc verrouillé », qui indique explicitement que cette fonctionnalité n'est pas encore disponible).

Le bouton Revenir au modèle par défaut, dans la barre d'outils de l'éditeur, efface en une seule opération toute personnalisation propre à cet événement et fait retomber l'email sur le modèle général (lui-même retombant sur la marque, puis sur le contenu d'origine, selon la même cascade). Il est désactivé tant qu'aucune personnalisation n'existe pour cet événement, et une boîte de confirmation (« Revenir au modèle par défaut ? ») rappelle que les éditions non sauvegardées seront perdues avant de valider.

Insérer une image dans le corps

Le bloc Image de la palette permet de téléverser une illustration directement dans le corps d'un modèle (invitation uniquement — les modèles système n'acceptent pas d'image). Le fichier envoyé passe par le même pipeline de traitement que le logo de l'identité visuelle (limite de taille, redimensionnement, conversion au format WebP) et est soumis aux mêmes contraintes de format — voir Identité visuelle des emails.

Envoyer un email de test

Le bouton Envoyer un test, dans la barre d'outils de l'éditeur, ouvre un petit formulaire :

• une adresse de destination, pré-remplie avec l'adresse email du compte admin connecté, mais modifiable ;
• un bouton Envoyer le test, qui envoie le modèle actuellement affiché avec des données de démonstration — les liens contenus dans l'email (connexion, gestion de réservation…) ne sont pas fonctionnels.

Le bouton est désactivé tant que l'éditeur contient des modifications non enregistrées (« Enregistrez vos modifications avant d'envoyer un test. ») : le test porte toujours sur la version réellement sauvegardée, jamais sur un brouillon en cours d'édition. L'envoi de test est limité à 5 emails par minute et par compte admin.

Compatibilité avec les clients de messagerie

Parce que les blocs de l'éditeur compilent vers un format de mise en page pensé pour l'email plutôt que vers du HTML/CSS libre, chaque email respecte automatiquement un ensemble de contraintes qui garantissent un rendu correct sur les principaux clients :

• couleurs en hexadécimal uniquement (pas de dégradés) ;
• polices choisies dans une liste fermée avec repli générique (jamais de police non standard sans repli) ;
• images en PNG ou JPEG uniquement — le format SVG est refusé, car invisible dans Outlook ;
• largeur de section plafonnée à 600 pixels ;
• arrondi des boutons plafonné à 8 pixels (au-delà, le rendu se déforme dans Outlook) ;
• aucune ombre portée, aucun dégradé, aucun CSS avancé (grille, flexbox, variables CSS) — ces effets sont silencieusement ignorés ou aplatis par les clients les plus stricts, donc refusés à la sauvegarde plutôt que laissés produire un rendu trompeur dans l'aperçu ;
• aucun HTML brut : tout le contenu passe par les blocs validés de l'éditeur.

Dégradations connues et acceptées sur Outlook 2016 et antérieur :

Élément	Rendu Outlook	Sévérité
Coins arrondis sur une image	Coins carrés	Cosmétique
Coins arrondis sur un bouton (≤ 8 px)	Correct (rendu VML)	—
Image au format SVG	Invisible	Bloquant — refusé à la sauvegarde
Police sans repli générique	Repli sur Times New Roman	Cosmétique — refusé à la sauvegarde
Dégradé de couleur	Aplati en couleur unie	Cosmétique — refusé à la sauvegarde
Ombre portée	Ignorée	Cosmétique — refusé à la sauvegarde
Bordure sur une section ou sur le cadre du corps	Invisible	Cosmétique — acceptée

Une tentative de saisir une propriété non autorisée (via le sélecteur de style de l'éditeur) est rejetée à l'enregistrement avec un message explicite.

Rendu garanti vs rendu acceptable

Le rendu est garanti identique au pixel près sur Gmail (web, iOS, Android) et Apple Mail (iOS, macOS). Sur Outlook 2016 et antérieur, une dégradation cosmétique est acceptée et documentée : les coins arrondis peuvent devenir carrés, une image peut ne pas s'afficher (SVG), un dégradé peut être aplati en couleur unie. Sur Outlook.com, Yahoo Mail, Orange, Free : rendu au mieux, sans garantie ni test systématique.

Quand l'éditeur détecte un contenu susceptible de mal s'afficher dans Outlook (par exemple un arrondi supérieur à 8 pixels sur l'en-tête, une bordure sur une section), un bandeau Compatibilité Outlook apparaît au-dessus du canvas, listant les éléments concernés (en-tête, corps ou pied) et le problème détecté. Le bouton en haut à droite du bandeau (Masquer l'avertissement de compatibilité Outlook) le referme ; il ne réapparaît pas pour le même ensemble de problèmes sur ce modèle tant que le contenu concerné n'a pas changé.

Enregistrer et fermer

Le bouton Enregistrer n'est actif que lorsque l'éditeur contient des modifications (un point apparaît sur le bouton). Le bouton Fermer (ou le changement de modèle via le sélecteur, quand l'éditeur en propose un) déclenche, s'il reste des modifications non sauvegardées, une boîte de confirmation (« Quitter sans enregistrer ? » / « Changer de modèle sans enregistrer ? ») avant d'abandonner les changements.

Où ces personnalisations sont stockées

Le contenu par défaut des huit modèles vit en base de données (une ligne par modèle) ; les personnalisations de l'en-tête, du corps et du pied à chaque niveau (marque, modèle, événement) sont stockées séparément, ce qui permet à une surcharge de disparaître (bouton de réinitialisation) sans effacer les niveaux au-dessus. Le neuvième email (modification de créneau) n'a pas de ligne dédiée : son texte est assemblé au moment de l'envoi. Détail des tables concernées : Modèle de données.

Voir aussi

• Identité visuelle des emails — logo, couleurs, police, arrondi ; upload d'images.
• Emails automatiques — liste des neuf emails et de leurs déclencheurs, y compris l'email de modification de créneau (non personnalisable).
• Paramètres in-app — vue d'ensemble de l'écran Paramètres.
• Sécurité — rôles et accès à l'écran Paramètres.