L’éditeur d’emails permet de concevoir, de manière responsive et très visuelle, le contenu des emails qui seront envoyés à vos clients depuis votre compte, via des workflows créés à cet effet.
Comment y accéder ?
Vous pouvez accéder à l’éditeur d’emails de deux façons :
1. Depuis “Contenu > Emails”. Cliquez sur Créer un nouvel email pour générer un nouveau contenu, ou sur Plus puis sélectionnez Modifier pour modifier un email existant.
2. Depuis le nœud "Envoyer un email" dans un workflow, en cliquant sur (Modifier la configuration du nœud). Cliquez sur Créer un nouveau contenu ou sur Modifier pour modifier un email existant.
Interface
L’éditeur d’emails se compose de trois panneaux :
1. Prévisualisation et sauvegarde : pour enregistrer ou annuler les modifications effectuées et prévisualiser le rendu final de l’email qui sera envoyé.
2. Conception : pour construire visuellement l’email en utilisant les structures et composants du panneau 3 (outils).
3. Outils : pour configurer toutes les propriétés de l’email, accéder aux modèles et ajouter des variables. Ce panneau peut être agrandi ou réduit en cliquant sur (Ouvrir les outils) ou (Fermer les outils).
Fonctionnement
L’éditeur d’emails utilise le principe de conception « glisser-déposer » (drag and drop), ce qui permet de créer des emails de manière rapide, simple et très visuelle.
1. Classer l’email
Dans le panneau de conception (2), catégorisez votre email et retrouvez-le rapidement en cliquant sur Ajouter des étiquettes et en ajoutant des mots-clés qui vous aideront à l’identifier.
Les étiquettes sont très utiles pour retrouver vos workflows plus rapidement et pour extraire des rapports via Data Explorer. Nous vous recommandons d’ajouter des étiquettes telles que :
— Nom de la campagne.
— Date de lancement.
— Public cible.
— Objectif de la campagne (vente, fidélisation, acquisition…).
Par exemple, en utilisant les étiquettes “Noël 2022”, “Clients B2B” et “Acquisition”.
2. Modifier le style général
Dans le panneau Outils (3), cliquez sur l’onglet Général pour modifier les paramètres de l’apparence générale. Vous pouvez aussi y accéder depuis le panneau de conception (2) en cliquant sur Propriétés générales.
Les paramètres à définir sont :
-
Nom du contenu : nom que vous souhaitez attribuer au contenu pour l’identifier dans votre compte Connectif.
Le nom du contenu ne correspond pas à l’objet de l’email. Pour configurer l’objet, consultez l’article Campagne d’email massive.
-
Couleurs : couleur de fond du contenu et couleur de fond générale.
-
Disposition : largeur du contenu en pixels et seuil responsive (jusqu’à quelle largeur d’écran on considère un appareil mobile).
-
Texte : police ou typographie par défaut des textes de l’email.
Vous pouvez ajouter de nouvelles polices pour personnaliser vos emails au maximum. Pour cela, nous vous recommandons de faire appel à un expert en mise en page et en conception CSS et HTML.
-
Résumé : texte qui apparaîtra au client dans l’aperçu de l’email, après l’objet.
-
Header : titre qui s’affichera dans l’onglet du navigateur lorsque le contact cliquera sur “voir dans le navigateur”.
-
Options HTML : configuration générale basée sur les styles CSS et HTML.
Il est recommandé de ne pas modifier cette section sauf si vous êtes accompagné d’un expert en mise en page et en design CSS et HTML.
3. Construire l’email par blocs
Dans le panneau Outils (3), cliquez sur l’onglet Composants pour créer votre mise en page en glissant-déposant des structures ou des éléments dans le panneau de conception (2).
Structure
Répartition qu’adoptera un bloc de contenu dans l’email. Il peut être présenté en une ou plusieurs colonnes, de proportions égales ou différentes.
La structure doit être insérée en premier. Si vous ne l’incluez pas, une structure à une seule colonne sera utilisée par défaut.
Une fois la structure créée, survolez-la avec la souris et cliquez sur (Modifier le bloc) pour le modifier, (Dupliquer le bloc) pour en créer une copie identique, ou (Supprimer le bloc) pour l’éliminer.
Éléments
Contenus multimédias que vous pouvez ajouter à votre email en les faisant glisser dans le panneau de conception (2). Comme pour les structures, vous pouvez les modifier en les survolant avec la souris et en cliquant sur (Modifier l’élément) ou sur le contenu lui-même. Vous pouvez aussi les dupliquer avec (Dupliquer l’élément) ou les supprimer avec (Supprimer l’élément).
Les éléments disponibles sont :
-
"Texte"
Rédigez votre contenu avec un format enrichi (gras, italique, liens...), insérez des variables dynamiques ou modifiez l’alignement dans le bloc inséré.
Les variables dynamiques permettent de personnaliser le texte en fonction des données enregistrées dans le profil de chaque contact. Pour en savoir plus sur les variables et améliorer les performances de vos emails, consultez l’article Variables prédéfinies pour personnaliser les emails et contenus.
Le bouton (Convertir en HTML) de cet élément (et des suivants) transforme le bloc de texte en format HTML de manière irréversible. Pour utiliser cette fonction, des connaissances de base en HTML & CSS sont nécessaires. Si vous n’avez pas d’expert à disposition, il est recommandé de ne pas effectuer cette conversion.
-
"Image"
Si votre image est déjà hébergée sur Internet, collez l’URL de l’image pour l’inclure dans le contenu. Si vous préférez la télécharger depuis votre appareil, cliquez sur Téléverser une image ou sur l’icône en forme de montagne, puis sélectionnez le fichier depuis la fenêtre de votre navigateur qui s’ouvrira. Une fois chargée, l’URL de l’image sera automatiquement remplie.
Vous pouvez aussi configurer le texte alternatif (affiché si l’image ne se charge pas), le texte du "title" (aussi appelé attribut alt, qui s’affiche au survol de l’image) et sa disposition dans le bloc.Si vous avez besoin de modifier votre image, vous pouvez utiliser l’éditeur d’image.
-
"Bouton"
Définissez le texte à afficher sur votre bouton, l’attribut ‘title’ et le lien (il peut être spécifique ou prédéfini pour exécuter une action). Pour configurer son apparence, sélectionnez les couleurs de texte et de fond et ajustez la disposition dans le bloc. -
"Réseaux sociaux"
Sélectionnez les réseaux sociaux à inclure et modifiez l’URL du lien, ainsi que la disposition dans le bloc. -
"Séparateur"
Configurez la couleur et la disposition de la ligne horizontale pour séparer visuellement les contenus. -
"Espace"
Définissez la distance d’espace blanc à insérer entre deux blocs. -
"Produits" (ANCIEN)
Insérez un bloc de produits que vous pourrez compléter via un workflow avec des articles d’intérêt pour le contact. Vous pouvez choisir un des trois modèles prédéfinis (Produit basique, Produit avec marque ou Produit avec prix) ou personnaliser son apparence finale dans l’éditeur de texte ou en HTML. Il est aussi possible de définir la structure en lignes et colonnes pour les vues desktop et mobile.
-
"Produits" (NOUVEAU)
Insérez un bloc de produits que vous pourrez compléter via un workflow avec les articles d’intérêt pour le contact. Vous pouvez l’éditer en utilisant un modèle ou l’éditeur HTML. En choisissant un modèle, sélectionnez une des trois options : Vertical, Image à gauche ou Image à droite, et personnalisez chaque élément pour définir quels attributs produits afficher dans la carte, les ordonner, les styliser, etc. Vous pouvez aussi définir le nombre de lignes et colonnes à afficher en mode bureau ou mobile. Vous verrez à tout moment un aperçu du rendu final dans l’éditeur.
Pour que le bloc de produits soit rempli avec les articles qui intéressent le contact, il est indispensable d’utiliser un nœud “Obtenir des produits” avant le nœud “Envoyer un email”. Pour en savoir plus, consultez les articles Afficher des produits personnalisés dans l’email de panier abandonné et Nœud “Obtenir des produits”.
-
"HTML"
Intégrez un code HTML personnalisé et ajustez sa disposition.
Pour insérer cet élément, l’aide d’un expert en mise en page CSS et HTML est recommandée afin d’assurer un rendu correct du contenu.
-
"Voir dans le navigateur"
Texte prédéfini permettant d’insérer un lien pour afficher le contenu de l’email dans une fenêtre de navigateur. Lors de l’édition du lien, vous pouvez modifier le texte affiché, le titre et indiquer s’il doit s’ouvrir dans une nouvelle fenêtre.
Le lien est toujours “#__cn_view_in_browser” et est configuré par défaut. Vous pouvez y accéder via l’option Insérer/Éditer un lien dans l’éditeur.
-
"Pied de page"
Texte prédéfini permettant d’insérer un pied de page à votre email, où vous pouvez spécifier les données de votre entreprise et offrir à vos clients la possibilité de se désabonner ou de transférer l’email.
Le RGPD impose d’offrir à vos clients la possibilité de se désabonner de manière visible. Le lien “Se désabonner” doit donc toujours être présent dans les newsletters. Le lien doit être “#__cn_unsubscribe”.
4. Créer, modifier ou supprimer un bloc global
Enregistrez un bloc en tant que global pour pouvoir l’utiliser dans tous vos emails et le modifier simultanément dans tous ceux où il est inséré.
Les blocs globaux sont très utiles, par exemple, pour créer l’en-tête de vos emails, des blocs de produits consultés, et d’autres éléments fréquemment utilisés.
Pour ce faire, une fois que vous avez ajouté les éléments souhaités à votre bloc, survolez-le avec la souris et cliquez sur le bouton Créer un bloc global.
Ensuite, dans la fenêtre contextuelle, la boutique dans laquelle le bloc sera créé s’affichera. Indiquez un nom et cliquez sur le bouton Créer un bloc global.
Une fois créé, enregistrez l’email et vous pourrez l’utiliser dans vos contenus d’email. Pour l’utiliser, dans l’onglet Composants de l’éditeur, accédez à Mes blocs globaux et localisez le bloc que vous avez créé. Glissez-le dans l’éditeur comme n’importe quel autre composant.
Tant que l’email dans lequel vous avez créé ou ajouté un bloc global n’est pas enregistré, il ne sera pas considéré comme utilisé.
Vous pouvez modifier le bloc au niveau global afin qu’il soit mis à jour dans tous vos emails, en cliquant sur le bloc et en sélectionnant l’option Édition globale.
Si vous souhaitez modifier le bloc uniquement pour l’email actuel, cliquez sur Dissocier et modifier pour effectuer les changements.
Une fois modifié, cliquez sur Publier les modifications pour enregistrer le nouveau design et le publier automatiquement dans tous les emails où il est utilisé.
Pour supprimer un bloc global, dans l’onglet Composants de l’éditeur, allez dans Mes blocs globaux, localisez le bloc que vous souhaitez supprimer et cliquez sur (Supprimer).
Dans la fenêtre contextuelle, vous verrez les utilisations de ce bloc. Pour confirmer la suppression, cliquez sur le bouton Supprimer le bloc global.
Le bloc sera dissocié de tous les contenus dans lesquels il est utilisé, mais ne sera pas supprimé de ceux-ci. De plus, cette action est irréversible.
Vous pouvez également accéder à tous vos Blocs globaux à tout moment sans avoir à entrer dans l’Éditeur d’email, depuis "Contenu > Blocs globaux d’email".
5. Créer et personnaliser un bloc de produits
Le bloc Produits vous permet d’insérer un élément que vous pourrez remplir dans un workflow avec des produits personnalisés pour le contact, selon vos intérêts (produits en promotion, produits du panier, derniers produits consultés, etc.).
Pour ce faire, dans le panneau Outils (3), cliquez sur l’onglet Composants et localisez le bloc Produits (Nouveau). Sélectionnez-le et glissez-le dans le panneau de Conception (2), à l’endroit souhaité.
Cliquez sur l’élément ou sur (Modifier).
(Facultatif) Donnez-lui un nom et sélectionnez un des trois modèles : Vertical, Image à gauche ou Image à droite.
Dans notre exemple, le modèle Vertical a été choisi.
Dans Lien vers la page produit, vous pouvez indiquer l’ID de la variable qui redirigera vers la page du produit. Par défaut, buttonURL est utilisé.
Apprenez ce que sont les variables et comment elles fonctionnent dans Connectif dans cet article.
Si vous cochez la case Lier toute la carte produit (activée par défaut), tout élément inclus dans la carte du produit dans l’email redirigera vers la page produit.
À l’inverse, si vous ne souhaitez pas que tous les éléments soient liés, décochez la case et, dans le menu déroulant de chaque élément, personnalisez la section Lien pour décider s’il doit être cliquable (via Lien vers la page produit) ou non (option Sans lien).
Dans notre exemple, nous activons le lien vers la page produit dans son Nom.
Pour modifier chacun des éléments qui composent la carte Produit, cliquez sur leur menu déroulant.
Personnalisez facilement chacun de ces éléments pour définir leur apparence finale sans avoir à utiliser du code HTML. Chacun contient des options liées à son style et son contenu, ainsi que l’ID de la variable qu’il contient, que vous devrez compléter via l’assignation de variables dans le nœud "Envoyer un email".
Découvrez étape par étape comment afficher des produits personnalisés dans un email avec ce cas d’usage sur les variables.
Si vous devez ajouter plus d’informations à la carte Produit, cliquez sur l’option Ajouter une variable et, dans le nouvel élément créé (nommé par défaut variable1), éditez le contenu comme pour les autres éléments.
Une fois votre bloc Produits configuré, vous pouvez l’enregistrer comme Bloc global (voir point 3.3) afin de le réutiliser dans d’autres emails avec le même design et objectif.
6. Appliquer une condition à un bloc
Appliquez une condition aux blocs que vous souhaitez, afin de ne les afficher que si le contact remplit la condition définie. Vous pouvez établir une condition en fonction de l'appartenance ou non à un segment, ou en fonction de la valeur d'un champ du contact.
Pour cela, passez le curseur sur le bloc que vous souhaitez afficher ou masquer selon les conditions, puis cliquez sur le bouton Ajouter une condition.
Pour définir une condition basée sur la valeur d’un champ du contact, choisissez l’option Champs du contact. Ensuite, sélectionnez le champ, l’opérateur et la valeur que le champ doit contenir pour que le bloc soit affiché au contact.
Pour définir une condition en fonction de l’appartenance ou non du contact à un ou plusieurs segments, choisissez l’option Segment. Dans Sélectionner l'opérateur, choisissez s’il doit appartenir à un des segments indiqués, à tous, ne pas appartenir à certains des segments sélectionnés ou à tous. Enfin, sélectionnez le ou les segments qui serviront de filtre conditionnel.
Cliquez sur Sélectionner, puis sur Appliquer. De cette manière, Connectif n’affichera ce bloc qu’aux contacts remplissant la condition.
7. Utiliser un modèle existant ou en enregistrer un nouveau
Créez rapidement vos emails en utilisant les modèles prédéfinis par Connectif ou créés par vous-même depuis le panneau Outils (3), dans l’onglet Modèles, en cliquant sur Utiliser un modèle. Vous pouvez également enregistrer le design que vous avez créé en tant que modèle en cliquant sur Créer un modèle à partir de ce contenu.
8. Ajouter des liens prédéfinis à un bouton
En plus des éléments prédéfinis expliqués dans le point 3, (Voir dans le navigateur et Se désabonner), Connectif propose plusieurs liens prédéfinis que vous pouvez ajouter aux boutons des emails, offrant ainsi certaines fonctionnalités sans avoir à les créer manuellement.
Pour ajouter un de ces liens, ajoutez un bouton à votre modèle d'email, ajoutez un composant Bouton à votre email et modifiez sa configuration.
Dans la section Bouton du lien, cliquez sur le bouton Ajouter un lien prédéfini.
Cliquez sur le menu déroulant et sélectionnez le lien prédéfini que vous souhaitez ajouter à votre bouton. Sont disponibles :
- Confirmer l’abonnement à la newsletter : si un contact clique sur ce lien, Connectif changera son "Statut d’abonnement à la newsletter" en "Abonné". L’abonnement sera également notifié automatiquement au backoffice de votre site web.
- Se désabonner de la newsletter : si un contact clique sur ce lien, Connectif changera son "Statut d’abonnement à la newsletter" en "Désabonné" et en informera le backoffice de votre site.
- Voir dans le navigateur : si un contact clique sur ce lien, il verra l’email dans un onglet de son navigateur. Cette page est générée automatiquement par Connectif.
- Transférer l’email : si un contact clique sur ce lien, il pourra transférer l’email via son client de messagerie par défaut.
Une fois sélectionné, cliquez sur Accepter et le lien prédéfini sera ajouté à votre bouton.
9. Vérifier les variables
Consultez les variables créées et le nombre de fois qu'elles sont utilisées dans les éléments de texte depuis le panneau Outils (3), dans l’onglet Variables. Pour modifier leur format, cliquez sur .
Si vous avez récemment ajouté une nouvelle variable et qu'elle n'apparaît pas, cliquez sur pour actualiser.
Pour en savoir plus sur le format des variables, cliquez ici.
10. Prévisualiser le résultat final et enregistrer
Dans le panneau de prévisualisation et d’enregistrement (1), vous pourrez voir le résultat final de votre email. Tout le contenu créé est responsive, vous pouvez donc cliquer sur Aperçu pour afficher un nouveau panneau et examiner le résultat final. Cliquez sur (Vue ordinateur) pour voir le résultat sur un ordinateur, ou cliquez sur (Vue mobile) pour le voir sur un mobile.
Vous pouvez également vous envoyer un email de prévisualisation en cliquant sur (Envoyer un email de prévisualisation) pour recevoir un email test à l’adresse de votre choix et vérifier comment le client le recevra.
Une fois satisfait du résultat, cliquez sur Enregistrer.
Connectif est conçu pour récupérer le contenu fermé accidentellement. Toutefois, afin d'éviter la perte de données due à l’appareil ou au réseau utilisé, nous vous recommandons d’enregistrer votre email toutes les quelques minutes.
Félicitations !
Vous êtes arrivé à la fin de la leçon.
Des doutes non résolus ?
N'oubliez pas que vous pouvez faire appel à nos spécialistes Connectif. Pour les contacter, il vous suffit d’ouvrir un ticket au Support en cliquant sur le bouton bleu “Aide” de votre tableau de bord.
Continuez à apprendre !
Pour exploiter tout le potentiel de votre compte Connectif, nous vous recommandons de consulter les articles suivants :
-
Créer un bloc de produits personnalisés dans un email, pour envoyer à vos clients des produits susceptibles de les intéresser.
- Liens dans les emails : voir dans le navigateur, se désabonner et boutons, pour configurer les liens prédéfinis.
- Campagne hebdomadaire de produits recommandés, pour planifier des envois automatiques à vos clients avec des articles recommandés.
-
Coupon de réduction massif par email, pour envoyer une remise exclusive à vos clients.