Aperçu du studio

Le studio est le créateur d'emails visuel de MailInApp. Chaque projet de votre tableau de bord s'y ouvre.

Partir d'un objectif

Les nouveaux projets peuvent partir d'un objectif : enquête, promotion, newsletter, événement, transactionnel, tableau de bord, classe, ou équipe sportive, choisi à la création du projet. En choisir un ouvre un carrousel des véritables modèles de démarrage de ce sujet, chacun étant un aperçu réel et de grande taille, pas une maquette. Parcourez-les et choisissez-en un, et il amorce le canevas avec une mise en page de démarrage construite à partir de blocs ordinaires (un bloc de notation pour les enquêtes, un héros et un coupon pour les promotions, etc.). Rien de spécial ne les distingue ensuite : modifiez-les, supprimez-les ou ajoutez-en comme n'importe quel autre bloc. Partir de zéro ignore cette étape et ouvre le canevas par défaut simple.

Voir Démarrage rapide pour le sélecteur, Réponses et webhooks pour la façon dont l'objectif façonne le tableau de bord des réponses, et Modèles de démarrage et votre propre bibliothèque pour enregistrer vos propres modèles en privé ou les publier dans la galerie communautaire.

L'espace de travail

Canevas — le centre de l'écran : un rendu en direct de votre email. Cliquez sur n'importe quel élément pour le sélectionner ; une barre de fil d'Ariane affiche le chemin depuis le corps de l'email jusqu'à lui, et chaque ancêtre est cliquable.
Panneau latéral gauche — quatre panneaux, ouverts un à la fois en cliquant sur leur icône : Insérer (la bibliothèque de blocs — glissez des blocs de mise en page comme section, texte, image, bouton, séparateur, espaceur, et des blocs interactifs comme carrousel, sondage, formulaire, compte à rebours, quiz sur le canevas ; une zone de recherche filtre tout par nom), Arborescence (la structure complète de l'email — réorganisez les blocs, sélectionnez des éléments imbriqués comme une seule diapositive de carrousel, réduisez les conteneurs, masquez un bloc de la sortie avec son bouton œil sans le supprimer, ou laissez-vous une note via un double-clic pour renommer ; chaque conteneur porte aussi un + qui ouvre un sélecteur recherchable exactement des types d'enfants qu'il accepte — celui d'un formulaire s'ouvre sur les mêmes variantes de saisie que la section Saisies du panneau Insérer — pour ajouter sans glisser, et le même sélecteur apparaît à la place du texte d'espace réservé « Déposer ici » d'un conteneur vide sur le canevas), Données (Sources de données et balises de fusion — connectez des sources, choisissez l'audience, parcourez les champs), et Thème (voir Thématisation ci-dessous).
Inspecteur — le panneau de droite pour ce qui est sélectionné, divisé en quatre onglets : Contenu (texte, liens, champs spécifiques au bloc comme les choix d'un sondage), Style (couleurs, espacement, bordures, CSS personnalisé), Logique (liaison de répétition, conditions d'affichage), et Actions (déplacer, dupliquer, supprimer, ⧉ Envelopper dans… — l'inverse du + du panneau Arborescence : déposez la sélection actuelle dans une nouvelle Section, Colonnes, Répétition ou un élément HTML qui peut légalement la contenir juste là où elle se trouve, par exemple donner à un bouton isolé son propre arrière-plan, ou transformer un bloc en mise en page à deux colonnes — et Enregistrer comme composant, voir Composants réutilisables). Une zone de recherche au-dessus des onglets filtre les champs des quatre à la fois.

Modes d'aperçu

Au-dessus du canevas, un commutateur Modifier / Aperçu contrôle ce que vous regardez :

Modifier — la structure des blocs, sélectionnable et modifiable.
Aperçu résout les balises de fusion, les conditions d'affichage et les répétitions par rapport à une ligne de destinataire choisie, avec un sélecteur de niveau en dessous : Vue en direct (la même page React sur laquelle atterrissent les destinataires), Envoyé — moderne et Envoyé — Outlook rendent le HTML compilé réel que recevraient les boîtes de réception de vos destinataires — le niveau Outlook force les mêmes branches de commentaires conditionnels qu'un vrai client Outlook emprunterait, afin que vous puissiez vérifier le repli sans posséder de copie d'Outlook. Un commutateur de mode sombre simule le niveau de vue en direct de la façon dont le mode sombre d'un client de messagerie le rendrait.

Un contrôle de zoom (50–150 %, ou ajustement à la largeur) redimensionne le canevas sans changer la conception sous-jacente.

Annuler, rétablir et sauvegarde automatique

Chaque modification de la conception — glisser un bloc, taper dans un champ, changer une couleur — peut être annulée avec Ctrl/Cmd+Z (rétablir : Maj+Ctrl/Cmd+Z ou Ctrl/Cmd+Y), y compris depuis l'intérieur d'un champ de texte. Les modifications rapides (taper une phrase, glisser un curseur) fusionnent en une seule étape d'annulation au lieu d'une par frappe.

Le studio sauvegarde en continu — il n'y a pas de bouton d'enregistrement, et fermer l'onglet ne perd rien ; le projet se rouvre exactement là où vous l'avez laissé. Si vous et un coéquipier avez le même projet ouvert en même temps, la deuxième sauvegarde affiche une bannière « Modifié ailleurs » au lieu d'écraser silencieusement la première. Rechargez pour récupérer la dernière version, ou Enregistrer comme copie pour conserver vos modifications en tant que nouveau projet.

Thématisation

Le panneau Thème définit une poignée de jetons à l'échelle du projet (couleurs marque, accent, texte, atténué et arrière-plan, une police, et le rayon d'angle par défaut des boutons), afin qu'un changement de marque soit une seule modification plutôt que de traquer le champ de couleur de chaque bloc. Un champ de couleur peut contenir une référence de jeton, affichée sous forme de sélecteur de nuancier à côté de la saisie de couleur habituelle, ou sa propre couleur littérale. Les blocs livrés avec une référence de jeton — boutons, icônes sociales, boutons d'envoi de formulaire/quiz — se restylent automatiquement lorsque vous changez le jeton, tandis que tout bloc sur lequel vous avez défini une couleur littérale la conserve. Les projets non thématisés se rendent exactement comme avant ; le panneau ne fait que rendre les couleurs de marque explicites au lieu de codes hexadécimaux copiés-collés.

Bibliothèque de médias

Certains champs existent uniquement pour contenir une image : le bloc Image, l'image d'affiche/de couverture d'un bloc Vidéo/Audio, l'image d'une diapositive de Carrousel, l'image recto/verso d'une Carte mémo, et la photo du bloc Produit. Ceux-ci affichent une miniature et un bouton Choisir une image… dans l'Inspecteur au lieu d'une zone d'URL. Cliquer dessus ouvre une grille de tout ce que vous avez déjà téléversé sur votre compte (pas seulement ce projet), avec un bouton Téléverser un nouveau juste là pour un PNG, JPEG, WebP ou GIF jusqu'à 5 Mo. Choisissez-en un et il est immédiatement écrit dans le champ, comme si vous aviez tapé une URL. Le sélecteur est purement une commodité de création, donc rien ne change dans la façon dont le bloc se rend dans le courrier, la vue en direct, ou le canevas.

Les téléversements sont partagés sur tous les projets de votre compte : téléversez un logo ou une photo de produit une fois et réutilisez-le partout où le sélecteur apparaît. La bibliothèque complète est aussi consultable depuis Médias dans la navigation du tableau de bord, où vous pouvez téléverser, consulter et supprimer des ressources en dehors de tout projet spécifique. Supprimer une ressource ne l'enlève que de la bibliothèque — un bloc qui avait déjà son URL continue d'afficher l'image jusqu'à ce que vous la remplaciez vous-même par autre chose.

Le stockage compte dans le quota de votre forfait (voir tarifs), affiché comme un compteur à côté de votre autre utilisation dans les Paramètres. Certains champs prennent plutôt un lien qu'une image — le lien de clic facultatif d'une diapositive, le src de fichier propre d'un bloc vidéo/audio, l'URL de participation d'un lien de réunion. Ceux-là restent de simples zones d'URL : MailInApp ne stocke que des images, pas des fichiers vidéo/audio ni des pages arbitraires.

Composants réutilisables

Vous avez créé quelque chose qui vaut la peine d'être réutilisé — un en-tête stylé, une section coupon, une ligne de produit ? Sélectionnez-le, ouvrez l'onglet Actions de l'Inspecteur, et Enregistrer comme composant. Il est enregistré sur votre compte (pas seulement ce projet) et apparaît sous Mes composants en haut du panneau Insérer dans chaque projet à partir de ce moment. Glissez ou cliquez pour insérer une copie neuve et entièrement indépendante ; renommez ou supprimez le composant enregistré depuis la même liste. Ceci est différent des compositions intégrées de la section Prédéfini (voir Blocs interactifs) : celles-ci sont livrées avec MailInApp pour tout le monde, tandis qu'un composant enregistré est le vôtre, construit à partir de vos propres conceptions.

Vue en direct

Le bouton Vue en direct ↗ de la barre d'outils ouvre la version web hébergée de l'email — une page entièrement interactive rendue à partir de votre conception actuelle. C'est à la fois un outil d'aperçu pour vous et le repli universel que reçoivent les destinataires lorsque leur client de messagerie ne peut pas rendre l'interactivité. Le lien est signé et valide pendant 30 jours ; voir Liens de vue en direct.

Texte assisté par IA

Coincé sur une ligne d'objet ? Cliquez sur ✨ Suggérer à côté du champ objet sur la page d'envoi. MailInApp rédige quelques options ancrées dans le nom du projet, son objectif, et un court extrait du texte existant de l'email.

Les suggestions sont uniquement à cliquer pour remplir — rien n'est jamais écrit automatiquement dans votre projet. Les demandes de suggestion comptent dans l'allocation mensuelle de votre compte (voir tarifs), partagée entre tous les projets et tous ceux qui les modifient. Pour construire ou modifier l'email lui-même — pas seulement un champ — voir Copilote IA.

Budget de taille

Gmail tronque les messages de plus d'environ 102 Ko — et un email tronqué perd sa balise <style>, ce qui désactive silencieusement toute l'interactivité CSS. Le studio suit la taille compilée de votre email par rapport à ce budget pendant que vous construisez et vous avertit avant que cela ne devienne un problème. Plus de détails dans Exporter et envoyer.