Message Builder

• Vue d’ensemble
• Affichage
• Menu (contenu, blocs, paramètres)
• Ajouter et manipuler des blocs
• Aperçu
• Voir la structure
• Timeline : Annuler et revenir
• Première étape - choisir les paramètres de votre email
• Les propriétés des blocs de contenu
• Couleurs et sauvegarde des couleurs
• Deuxième étape - glisser les blocs dans votre email
• Sélectionner des éléments de structure
• Supprimer et dupliquer des blocs
• Sections
• Paramètres des blocs et des colonnes
• L’option “ne pas empiler sur mobile »
• Espacement
• Bordure
• Contenus sauvegardés
• Troisième étape - ajouter du contenu dans vos blocs 
• Blocs de texte
• Police globale
• Liens miroir et de désinscription
• Fusionner les balises et autres options de personnalisation
• Les images et le gestionnaire de fichiers
• Le gestionnaire de fichiers
• Actions
• Images dynamiques
• Boutons
• Séparateurs
• Liens sociaux
• Blocs HTML
• Syntaxe HTML dans les blocs
• Vidéo
• Icônes
• Sélectionner un contenu
• Déplacer, dupliquer et supprimer des éléments
• Quelques mots de bonnes pratiques pour finir...
• Taille optimale de l'e-mail
• Taille de l'écran lors de l'utilisation de Email Builder

Vue d’ensemble

Le Message Builder est un éditeur email intuitif et drag and drop intégré dans le module Designer. Son objectif principal est de vous offrir de la souplesse dans votre création, en séparant le message de son contenu. Chaque bloc du message peut avoir un style différent.

Pour accéder au Message Builder, cliquez dans l'onglet ci-dessous quand vous créez ou modifiez un email.

Veuillez noter que le Message Builder et l'éditeur HTML fonctionnent séparément, si vous commencez à créer un design dans Message Builder, l'onglet Éditeur HTML sera grisé et vice-versa.

Affichage

Le Message Builder est constitué de deux parties principales. L’éditeur sur la gauche, où vous pouvez placer et modifier du contenu, et le menu sur la droite.

Pour utiliser le Message Builder, glissez des éléments de contenu et de structure depuis le panneau de configuration vers l’éditeur puis modifiez leurs paramètres dans le menu de droite. Vous pouvez également insérer directement des images depuis votre ordinateur vers les blocs d’image, faire un copier coller ou même glisser directement une image depuis une autre fenêtre web (au lieu d’avoir à les télécharger).

Menu (contenu, blocs, paramètres)

Le Menu est contextuel : il affiche toujours les propriétés de l’élément sélectionné dans l’éditeur. Si il n’y a pas d’élément sélectionné, le panneau contient la liste des différents contenus que vous pouvez glisser-déposer.

Le panneau est divisé en trois parties : contenus, blocs et paramètres

• Les contenus (content) sont les éléments que vous pouvez placer dans votre message, comme du texte, des images...
• Les blocs (rows) définissent la structure du message et offrent des espaces pour insérer du contenu
• Les paramètres (settings) sont des options qui s’appliquent à l’ensemble de votre email.

Ajouter et manipuler des blocs

Pour ajouter un nouvel élément, glissez-le depuis le menu vers l’éditeur. Quand vous déplacez l’élément, l’éditeur met en surbrillance l’endroit où il va être déposé.

"Faites-le glisser ici" signale l’endroit où l’élément sera inséré.

Aperçu

Quand vous cliquez sur "Aperçu" vous pouvez voir comment le message que vous êtes en train de créer sera affiché sur les clients email sur ordinateur ou sur les appareils mobiles.

Vous pouvez passer de la vue "bureau" à la vue "mobile".

Remarque : vous pouvez avoir des aperçus sur Android et Iphone via le bouton Outils (bouton bleu à droite, puis bouton de prévisualisation).
Vous devrez tout d’abord enregistrer votre email, puis ce bouton apparaîtra, vous permettant d’avoir des aperçus sur toutes sortes d'appareils.
Veuillez noter que ce lien vous emmènera à une page séparée qui n’est pas hébergée sur notre plateforme.

Voir la structure

La fonction "voir la structure" vous permet d’afficher les blocs et leurs colonnes, surtout s’ils sont tous de la même couleur. Les contours sont affichés sous forme de pointillés.

Timeline : Annuler et revenir

Voici trois icônes disponibles en bas à gauche de l’éditeur.

La flèche de gauche vous permet d’annuler vos actions les plus récentes. La flèche de droite permet de revenir à l’action que vous venez d’annuler. Vous pouvez visualiser l’ensemble de l'historique avec le bouton de gauche.

Vous pouvez cliquer sur n’importe quelle action pour revenir à une version précédente de votre email.

Première étape - choisir les paramètres de votre email

Cet onglet du menu vous permet de modifier les paramètres de votre email en entier.

Vous pouvez définir, entre autres, la largeur du message, les couleurs du fond et des liens, ainsi que la police par défaut.

Il faut éviter de dépasser les 600 pixels de largeur, qui est un maximum pour la plupart des clients mail.

Les propriétés des blocs de contenu

Certains paramètres du Message builder sont les mêmes pour plusieurs éléments.

Couleurs et sauvegarde des couleurs

Vous pouvez sélectionner des couleurs grâce au code hexadécimal, ou bien manuellement. Le Message Builder se souviendra des couleurs que vous avez utilisé précédemment dans votre univers, ce qui vous fera gagner du temps à vous et à vos collègues.

Quand vous passez votre souris sur une couleur, vous verrez son code.

Deuxième étape - glisser les blocs dans votre email

Une fois que vous avez configuré les paramètres globaux de votre email, vous pouvez créer la structure en faisant glisser les blocs que vous souhaitez ajouter.

Les blocs peuvent être sélectionnées à partir de la section " blocs " du menu de droite, glissé vers la gauche dans le contenu à l’endroit où vous voulez les ajouter.

Glissez un bloc pour construire la structure de votre email

Le bloc que vous choisissez définira le nombre de colonnes, ce qui permet des agencements variés. Vous pouvez prendre un bloc à une seule colonne pour afficher une image large d’une collection de produits, puis une série de bloc à deux colonnes pour montrer des produits de cette collection. Veuillez noter que la limite est pour le moment de quatre colonnes par bloc.

Sélectionner des éléments de structure

Quand vous passez votre souris sur un bloc, le Message Builder le met en surbrillance. Il y a à nouveau un bouton, cette fois-ci à gauche, pour déplacer le bloc.

Cliquez sur le bloc pour le sélectionner. Le menu vous proposera alors les options pour le personnaliser.

Supprimer et dupliquer des blocs

Quand vous avez sélectionné un bloc, vous pouvez le dupliquer ou le supprimer.

Sections

En ajoutant et en dupliquant des blocs avec la même configuration de colonnes, vous pouvez créer des sections distinctes dans votre message.

Paramètres des blocs et des colonnes

Sélectionner un bloc vous permet d’en modifier les paramètres, comme la couleur du fond ou encore l’image.

Pour chaque bloc, vous pouvez changer les paramètres de chacune des colonnes : la couleur, l’espacement et la bordure.

L’option “ne pas empiler sur mobile »

Quand un bloc contient plus d’une colonne, le contenu de chaque colonne sera affiché horizontalement sur les ordinateurs, et verticalement sur les téléphones. Vous pouvez désactiver ce comportement en cliquant sur l’option « ne pas empiler sur mobile ».

Espacement

C’est la distance interne dans un bloc qui sépare le contenu de la bordure. Il peut être défini pour beaucoup d’éléments et pour les colonnes.

En cliquant sur "plus d’options", vous pouvez définir un espacement différent pour chacun des côtés.

Bordure

Pour rendre visible la bordure, elle doit faire au moins un pixel de large et ne pas être transparente.

Par défaut, toutes les bordures sont les mêmes. Avec "plus d’options", vous pouvez avoir une bordure différente pour chaque côté.

Contenus sauvegardés

Une fois que vous avez ajouté du contenu à votre ligne, vous pouvez facilement l'enregistrer en cliquant en dehors de la ligne du contenu, sur la structure de la ligne, pour trouver l'icône "disquette" (voir capture 1 ci-dessous).

Si vous cliquez sur l'icône "disquette", vous enregistrerez votre bloc et pourrez le réutiliser dans vos prochains designs. Les blocs enregistrés seront stockés sous "Designer> Contenus sauvegardés", qui est la bibliothèque de tous les blocs enregistrés prêts à être utilisés dans vos designs.

Troisième étape - ajouter du contenu dans vos blocs 

Maintenant que vous avez configuré les paramètres globaux de votre e-mail puis ajouté les blocs de votre e-mail, vous pouvez ajouter du contenu à l’intérieur des blocs.

Cette section se concentre sur les outils et options qui sont disponibles lorsque vous travaillez avec des blocs de contenu spécifiques.

Veuillez noter qu’il est essentiel d’ajouter des blocs au sein de la même ligne si vous souhaitez que leur contenu s'affiche de manière responsive (par exemple l'image et son CTA ensemble). Si vous ajoutez vos blocs dans des lignes séparées, ils seront considérés comme un contenu séparé et par conséquent ne seront pas affichés ensemble sur les formats mobiles.
Par exemple, lors de l'ajout de vos blocs, si vous souhaitez afficher le nom d'un produit ou un prix sous une image, vous devez ajouter un bloc de texte sous l'image correspondante et ce dans la même ligne.

Quelques éléments à prendre en compte concernant les blocs de contenu:

• Les blocs peuvent être dupliqués, y compris les blocs contenant des variables (magasins, produits, reçus, boucles de paniers abandonnées).
• Les blocs ne peuvent pas être superposés et doivent être affichés de la manière suggérée dans le menu de droite.
• Si vous souhaitez ajouter un effet groupé à vos blocs, vous pouvez jouer avec le remplissage, il vous suffit pour cela de sélectionner le bloc et d'aller dans le menu de contrôle > remplissage (voir section plus bas 'remplissage').
• Actuellement, il n'est pas possible d'ajouter des effets de survol lorsque la souris est sur un bloc spécifique.
• Enfin, il n’est pas possible de rendre un bloc entier cliquable, mais vous pouvez insérer des liens derrière les images, CTA, bloc de texte, etc.

Blocs de texte

Lorsque vous sélectionnez un bloc de texte, une barre s’affiche, qui vous permet de sélectionner la police, la couleur de votre texte, et bien d’autres options encore.

La barre et ses options de formatage

Police globale

Si vous sélectionnez "global font", le bloc de texte utilisera la police sélectionnée dans les paramètres. Cela vous donne un contrôle global sur les polices de votre email.

Remarque: il n'est pas possible de télécharger vos propres polices. La raison pour laquelle vous ne pouvez pas utiliser vos propres polices est due au fait que les polices disponibles dans Message Builder sont les polices recommandées en termes de déliverabilité des e-mails.

Liens miroir et de désinscription

Pour insérer une page miroir et un lien de désinscription, sélectionnez le texte et ouvrez les liens spéciaux dans la barre d’options.

Fusionner les balises et autres options de personnalisation

Le bouton "fusionner les balises" vous offre les syntaxes de personnalisation pour tous les champs système et custom de votre base de données. Le bouton "plus" ouvre le menu "fonctions" qui contient la librairie complète des syntaxes de personnalisation, incluant les blocs conditionnels et les boucles de produits.

Si vous tapez @ puis les premières lettres du champ que vous voulez afficher, une fonction de remplissage automatique vous aidera à écrire la bonne syntaxe. C’est la manière la plus rapide de taper vos personnalisations, à moins que vous ne connaissiez vos variables par cœur.

Les images et le gestionnaire de fichiers

Quand vous ajoutez un bloc d’image, vous pouvez déposer une image depuis une autre fenêtre, ou bien accéder au gestionnaire de fichiers via le bouton « Parcourir ».

Cela ouvrira une bibliothèque qui vous permettra de charger des images depuis votre ordinateur ou un stockage cloud, tels que OneDrive ou Google Drive.

Veuillez noter qu'il n'est pas possible d'ajouter des images au format .tiff dans le Message Builder.

Le gestionnaire de fichiers

Le gestionnaire de fichiers rassemble toutes les images chargées par tous les utilisateurs de l’univers.

Le bouton "insérer" sélectionne une image et revient au Message Builder. Vous pouvez double-cliquer sur l’image pour l’agrandir.

Vous pouvez trier les images par nom, date, taille ou encore type, et les afficher soit en blocs, comme dans la capture ci-dessus, soit en liste. Vous pouvez aussi créer des dossiers pour organiser votre collection d’images.

Il n’y a pas de limite au nombre d’images et de documents que vous pouvez charger ici.

Actions

Sélectionnez depuis le menu déroulant l’action qui se déclenchera quand le destinataire cliquera sur l’image. Le clic ouvrira le logiciel par défaut ou l’application qu’il utilise pour le canal que vous avez choisi. Si vous avez créé un email standard pour envoyer un message au Service client, le clic ouvrira Outlook si c’est le client mail par défaut de votre destinataire.

Images dynamiques

Les images dynamiques sont des images qui changent en fonction d'une ou plusieurs valeurs qui seront "transmises" au système qui les fournit. Ce type d'URL contient certaines variables, telles qu'un email, un ID client, une date, etc.

https://spliotraining.com/images/?imageBanner={{customer_ID}}

Les variables sont des champs personnalisés dans l'URL et sont remplacés par des valeurs réelles au moment de l'envoi de l'e-mail.

Les images dynamiques sont une option dans le bloque de contenu 'image'. Cette option est notamment utilisée lorsque vous souhaitez insérer des images dans des boucles de produits. Pour plus d'informations sur les boucles, vous pouvez consulter notre article à ce sujet.

Collez l’Url du contenu dynamique dans ce champ.

Les images dynamiques peuvent être par exemple des cartes personnalisées, des recommandations de produits, des publicités…

Important : le champ URL dynamique ne sera visible que lorsqu'un fichier d'image a été sélectionné dans le bloc de contenu d'image. 
Si vous activez l'option ''image dynamique'' mais laissez le champ url de votre image vide, le code HTML de votre email sera généré normalement et utilisera l'image statique, ignorant ainsi les paramètres dynamiques.
Enfin, vous pouvez utiliser la syntaxe et / ou les caractères que vous souhaitez pour utiliser cette option, à l'exception de "?" qui ne peut être utilisé qu'une seule fois dans votre URL et des guillemets qui pourraient causer la rupture de votre lien.

Boutons

Les boutons sont une méthode élégante pour masquer les liens dans le message. Avec un bouton, vous disposez d’une zone cliquable qui contient du texte.

Les boutons peuvent ouvrir de Nouvelles fenêtres de navigateur pour l’URL que vous avez choisi, envoyer des emails, des SMS, ou encore lancer des appels téléphoniques (l’effet final dépend de l’appareil utilisé par le destinataire). Vous pouvez aussi modifier le texte du bouton à l’aide d’un éditeur simplifié.

Vous pouvez définir la couleur du texte et de son arrière-plan, son alignement, l’espacement et les bordures. Avec une bordure spéciale, vous pouvez arrondir les angles du bouton.

Séparateurs

Avec les séparateurs, il est possible d’espacer les blocs de contenus dans le corps de l’email. Vous pouvez définir les paramètres pour la ligne de séparation ou la rendre transparente.
Veuillez noter qu'il n'est pas possible d'ajouter des séparateurs verticaux, pour répondre à ce besoin, il vous faudra éditer l'espacement de vos colonnes.

Les options du séparateur

Remarque: il n'est pas possible d'avoir des séparateurs verticaux pour vos blocs. Toutefois, l'espace entre les colonnes peut être modifié et devrait donc couvrir ce besoin. Pour éditer cette option, sélectionnez simplement votre bloc et éditez l'espace de remplissage.

Liens sociaux

Le bloc "social" est une collection d’icônes qui cachent des liens à vos comptes sociaux. Par défaut, vous disposez de Facebook, Twitter, Instagram et LinkedIn, mais vous pouvez retirer ceux qui sont inutiles ou en ajouter d’autres.

Pour chaque icône, vous devez préciser le lien vers le compte de votre marque dans le réseau social en question. Le bouton de switch de chaque icône vous permet de le renommer et de proposer un texte alternatif.

Vous pouvez aussi ajouter d’autres réseaux sociaux, comme WeChat, Youtube ou Snapchat, en utilisant le bouton “Ajouter une autre icône”.

Remarque: veuillez noter qu'il n'est pas possible d'éditer les couleurs des icônes et qu'ils vous faudra utiliser les couleurs présente dans le Message Builder.

Blocs HTML

Ces blocs vous permettent de copier des blocs de code HTML directement dans votre message. Cela vous ouvre de nombreuses possibilités de contenu avancé, comme des recommandations produit…

Les blocs HTML peuvent être considérés comme une fonctionnalité "expert", puisque le fait d’utiliser votre propre code peut affecter l’affichage du message. Par exemple, il est de la responsabilité de l’auteur du code HTML de s’assurer que le code s’ajuste à la taille de l’écran. Assurez-vous que votre HTML répond aux bonnes pratiques de déliverabilité et qu'il est 'responsive'.

C'est ici que vous pouvez utiliser des blocs conditionnels plus avancés et des boucles de produits. En résumé, il vous faudra utiliser les blocs de texte pour la personnalisation si vous n'êtes pas un expert HTML, et le bloc HTML si vous avez plus de connaissances et que vous voulez faire une personnalisation plus complexe.

Syntaxe HTML dans les blocs

Le Message Builder permet un vocabulaire HTML limité pour assurer la délivrabilité de vos emails. Il va essayer de fermer les balises ouvertes et d'en supprimer certaines telles que iframe ou des scripts qui sont connus pour causer des problèmes de délivrabilité et ne sont pas autorisés par la majorité des clients email.

Vidéo

Pour qu'un bloc vidéo fonctionne, vous devez fournir une URL. Le Message Builder fonctionne avec les URL YouTube  et  Vimeo.  

Une fois téléchargé, le bloc affichera l'image de prévisualisation de la vidéo paramétrée par défaut sur Youtube ou Viméo.

Les options pour les blocs vidéo comprennent : la possibilité de les cacher sur ordinateurs ou appareils mobiles (de cette façon, vous pouvez avoir deux versions, une for chaque type d'appareil).

Icônes

Sélectionner un contenu

Quand vous passez votre souris sur l’éditeur, le Message Builder met en évidence les éléments que vous pouvez sélectionner.

Le bouton sur la droite vous permet de déplacer l’élément.

Quand vous cliquez sur l’élément, le menu affiche ses paramètres spécifiques.

Les trois icônes du menu permettent de supprimer, dupliquer et désélectionner l’élément.

Déplacer, dupliquer et supprimer des éléments

Un exemple de 'glisser' et 'déplacer' dans le menu de gauche

Quelques mots de bonnes pratiques pour finir...

Taille optimale de l'e-mail

Pour une livraison optimale de vos emails, nous vous recommandons de ne pas dépasser 100 Ko. Plus votre email est léger, plus vos images s'afficheront facilement sur les téléphones, en particulier si la connexion de vos clients est mauvaise.
Si votre email dépasse 100 Ko, il sera tronqué et vos utilisateurs ne pourront pas l'afficher complètement.

Taille de l'écran lors de l'utilisation de Email Builder

Nous vous conseillons d’utiliser un écran de bureau lors de la création de vos emails dans Message Builder pour obtenir une taille d’écran optimale.