Créer un courriel HTML

Modifié le : Jeu, 31 Oct., 2024 à 2:45 H

Pourquoi créer un message en mode HTML ?

La création d'un message HTML est la façon la plus ancienne de créer un message dans Dialog Insight. En général, vous utiliserez ce type d'éditeur seulement si vous avez déjà des messages qui ont été créés ainsi et que vous les utilisez encore, ou que vous souhaitez construire vous-même votre message en code HTML.

Tous les modèles de messages sont offerts en mode Glisser-Déposer, beaucoup plus visuels et faciles à utiliser. Reportez-vous à Créer un message en mode Glisser-Déposer (Drag-and-Drop) pour savoir comment faire.

Comment faire, en détail

Chemin d'accès	Communications > Courriels
	Notes pour les message V1 L'option de création d'un nouveau message en version 1 n'existe plus. Toutefois, il est toujours possible d'en créer de nouveaux en dupliquant un message V1 existant et en le modifiant par la suite. Les messages V1 sont identifiables par la colonne V2 qui est vide. Pour dupliquer un message, il suffit de cliquer sur l'icône du message à dupliquer.

Définir la structure du message

Dans la page listant tous les messages, cliquez sur Créer un message.
Pour créer un message HTML, vous avez le choix de copier un message HTML existant ou encore de créer un message vierge, en choisissant le modèle HTML.
Sélectionnez ensuite le type de communication applicable et cliquez sur Continuer. Le type de communication peut servir à catégoriser vos messages, ou si vous avez mis en place un centre de consentements, il permettra de définir les consentements et les abonnements que doivent avoir les contacts pour recevoir ce message.
L'éditeur de message s'ouvre, en mode plein écran, et cache le menu de gauche, le volet de droite et l'en-tête de l'application pour vous offrir un maximum d'espace pour éditer le message.
*Pour retourner à la liste des message et à l'affichage des menus, cliquez sur dans la barre d'options de l'éditeur.

Définir l'objet et l'expéditeur

Une fois l'éditeur affiché, commencez par préciser l'objet de votre message.
Identifiez ensuite l'expéditeur, en fournissant son nom et son adresse courriel ainsi qu'une adresse courriel de retour si elle est différent de celle déjà indiquée.
Au besoin, vous pouvez personnaliser chacun de ces éléments en y ajoutant des variables en cliquant sur l'icône de personnalisation associée. Les variables sont créées à partir de données figurant sur la fiche d'un contact, des infos sur le projet, sur la compagnie ou sur le système. Les variables utilisées pour nommer un destinataire dans la salutation sont les plus courantes. Par exemple : Bonjour [[=Contact.f_FirstName;]],
Par défaut, seul l'objet et le nom de l'expéditeur sont affichés. Cliquez dans cette section pour afficher les autres options.

Pour plus d'infos, consultez la description des champs.

Créer le contenu du message

Le plus souvent, si vous utilisez ce mode d'édition, c'est que vous comptez y copier le code HTML d'un message déjà créé ailleurs. Mais vous pouvez aussi créer un message de toute pièce en code HTML si vous le souhaitez.

Commencez par choisir l'éditeur de votre choix, soit HTML ou WYSIWYG. Si vous copiez du code, assurez-vous de choisir le mode HTML. Il est également possible de copier directement le code d’un message construit dans l’un des nombreux outils de création de page Web tels Dreamweaver, Composer, Expression (Frontpage), etc.
Au besoin, cochez l'option Version alternative texte si vous voulez permettre aux destinataires qui ont cette préférence de recevoir le message dans ce format.
Dans le volet central de l'éditeur, tapez le texte du message.
Ajoutez au texte les éléments désirés en vous servant des options disponibles dans le volet de gauche de l'éditeur. Ce volet présente les options d'édition les plus courantes. Les autres options d'édition s'affichent en cliquant sur l'icône qui figure dans la barre d'informations de l'éditeur.

Description des options d'édition courantes

Section	Description
Images	Section qui permet d’ajouter dans le message une image se trouvant dans l'espace d'hébergement de votre entreprise sur le serveur Dialog Insight ou encore une image sur votre propre ordinateur ou serveur. La liste affichée présente tous les fichiers d'image qui sont hébergés sur le serveur de l'application. Pour trouver une image, on peut utiliser la zone de recherche pour y saisir le nom de l'image ainsi que spécifier une catégorie de fichiers au besoin. Il faut ensuite cliquer sur l'icône pour actualiser le résultat. Pour insérer une image dans un message, vous devez placer le curseur à l'endroit désiré dans le message, sélectionner l'image dans la liste et cliquer sur le bouton Insérer. On peut également télécharger de nouveaux fichiers en cliquant sur le bouton Téléverser une image. Au besoin, il est possible de modifier une image grâce à l'éditeur d'image intégré. Pour ce faire, cliquez sur pour ouvrir l'éditeur d'image, sélectionnez l'image à modifier et cliquez sur l'icône d'édition qui figure dans la barre d'icônes au haut de l'éditeur.L'option Héberger les images sert à indiquer que l'on veut copier les images qui ne sont pas hébergées sur le serveur Dialog Insight lors de l'envoi du message. En principe, les clients qui possèdent un espace d'hébergement Dialog Insight activeront cette option. Si vous ajoutez une image dans un message, assurez-vous d'ajouter un texte alternatif qui sera affiché lorsque les images ne s'afficheront pas ou lorsque le pointeur de la souris sera sur l'image. Cette option est importante lorsque le destinataire du message reçoit le courriel puisque les images sont souvent bloquées par mesures préventives. Le texte alternatif permettra alors de rejoindre le destinataire en présentant de l'information sur le sujet du message sans que les images s'affichent dans le courriel. Une fois l'image ajoutée dans le message, la fenêtre des propriétés permet également d'en ajuster la largeur, la hauteur, l’alignement et le texte alternatif. L'option Prévisualiser avec du texte permet de voir comment l'image est alignée au texte.
Personnalisation	Section qui permet de personnaliser le contenu du message à partir des données figurant sur la fiche d'un contact ou des informations sur le projet, la compagnie ou le système. Les variables utilisées pour nommer le destinataire dans la salutation sont les plus courantes. Exemple Bonjour [[=Contact.f_FirstName;]], Voir Comment faire
Librairie de liens	Section qui permet d’ajouter un hyperlien dans le courriel. Les liens opérationnels permettent, entre autres, d’ajouter des fonctions sur un clic, de modifier la fiche, d’envoyer un message à un administrateur ou à l’abonné. Les types de liens possibles sont les suivants : Voir Comment faire
	Lien opérationnel	Type de lien qui permet d’ajouter un lien codé dans le message qui engendre une action automatique. Un lien opérationnel pourrait ainsi servir dans le cas d'un message qui comporterait les options Je serai présent et Je ne serai pas présent et que, lorsque l’utilisateur clique sur un de ces liens, l’information est enregistrée directement dans le champ correspondant dans la fiche d’un contact. Ces hyperliens sont créés depuis la section Configuration > Messages > Liens opérationnels. * Si vous utilisez des messages en V1 et V2, vous devrez préciser également la version du lien à utiliser.
	Lien à une version Web	Type de lien qui ajoute tout simplement un hyperlien dans le message permettant à l’internaute de visualiser le contenu identique dans une fenêtre de navigateur. Les options de personnalisation et de statistiques demeurent fonctionnelles lorsque cette version est affichée. Vous avez l'option pleine page qui permet de ne pas afficher la personnalisation (c'est-à-dire sans De, À,Objet, Date), ainsi qu'une option permettant de ne pas afficher le lien dans la version Web. Le texte des en-têtes sera généralement adapté à la langue du navigateur du destinataire. Donc un navigateur français présentera les en-têtes en français, et un navigateur anglais les présentera en anglais. Les cultures disponibles sont fr-CA et en-US (pour français et anglais respectivement).
	Lien de désabonnement	Type de lien qui permet d’ajouter le lien de désabonnement requis dans tous les messages sauf ceux qui sont automatisés (envoyés sur inscription). Cela ajoutera cette ligne au code source de votre message. Exemple <a href="[[=Message.Optout("fr-CA");]]">Désabonnement</a>
	Lien à un formulaire Envoyer à un ami	Type de lien qui s'ajoute dans le message et qui ouvre un formulaire à remplir par le destinataire afin de transmettre le message à un ami. Voir Fonction de transfert de message à un ami
	Lien à un concours	Type de lien qui ouvre la page d'un concours.
	Lien à un sondage	Type de lien qui ouvre la page d'un sondage.
	Lien à un processus d'activité	Type de lien qui donne accès à un formulaire d'inscription créé dans le module de gestion des activités.
	Lien à un processus de mise à jour de profil	Type de lien qui donne un accès sécurisé à un formulaire de mise à jour du profil intégré ailleurs que dans Dialog Insight.
	Lien à un processus d'affaires	Type de lien qui dirige le destinataire vers un processus d'affaires.
Contenu dynamique	Section qui permet d'insérer du contenu selon des conditions précisées. On peut par exemple vouloir afficher les adresses du bureau de l'expéditeur selon la région du contact. Pour intégrer ce type de contenu, il faut définir les règles d’affichage basées sur des conditions. Les options offertes permettent d'entrer le contenu du texte, de sélectionner le champ à utiliser, l’opérateur et la valeur. En cochant l'option Sinon, il est également possible d’ajouter un texte alternatif advenant que la condition ne soit pas satisfaite. Exemple Si le Courriel contient "repsolution.com", afficher le texte ABC, sinon afficher 123, donnera [[ if (Contact.f_EMail CONTAINS "repsolution.com") { ]]ABC[[ } else { ]]123[[ } ]] Voir Comment faire

Comment éditer un message

Personnaliser le message en ajoutant des variables

Vous voudrez peut-être aussi personnaliser le contenu du message. La personnalisation la plus fréquente est la salutation initiale.

ExempleBonjour [[=Contact.f_FirstName;]], donnera Bonjour Pierre, Bonjour Michelle,

On peut insérer des éléments personnalisés n’importe où dans le message en insérant des champs de la fiche contact, que ce soit une adresse, un numéro de téléphone ou même une note enregistrée dans la fiche.

Positionnez d'abord le curseur à l'endroit souhaité d'insertion du texte personnalisé.
Sous l'onglet Personnalisation, sélectionnez la source des données. Par défaut, la source est la fiche du contact, mais vous pouvez aussi choisir des variables dans les données sur le projet ou l'entreprise ou encore des données système. Sélectionnez ensuite le champ dont vous souhaitez insérer la valeur.
Cliquez sur le bouton Insérer.

Ajouter un lien

Positionnez d'abord le curseur à l'endroit où vous voulez insérer le lien dans le message.
Sous l'onglet Librairie de liens, sélectionnez le type de lien, le nom du lien et l'étiquette que vous souhaitez lui attribuer et voir dans le message.
Cliquez sur le bouton Insérer.

Personnaliser le message à l'aide de contenu dynamique

Si vous voulez personnaliser le contenu du message à l'aide de contenu dynamique et conditionnel, il faut sélectionner les options désirées sous la section Contenu dynamique. Par exemple, on pourrait vouloir présenter l’adresse du bureau de l'entreprise qui est situé dans la même région que le destinataire.

ExempleSi la région du contact est Estrie, afficher l’adresse de la rencontre à Sherbrooke; Sinon indiquer l’adresse de la rencontre à Montréal.

Description des types de conditions

Catégorie	Description
Fiche du contact	Cette catégorie permet d'ajouter un contenu basé sur un des champs figurant dans le profil du contact.
Info sur le projet	Cette catégorie permet d'insérer un contenu spécifique lorsqu'une donnée sur le projet est satisfaite, telles que le nom, numéro d'identification et la clé du projet, sa date de création et de modification.
Info sur l'entreprise	Cette catégorie permet de choisir parmi les données sur l'entreprise pour insérer un contenu spécifique. Ces données proviennent du module de Gestion du compte.
Info système	Cette catégorie permet d'insérer un contenu spécifique à une date de système donnée.
Appareil	Cette catégorie permet de personnaliser le contenu en fonction du type d'appareil utilisé pour ouvrir le message et/ou la plateforme utilisée pour lire le message. Voir la description des choix dans la rubrique Appareil

Positionnez d'abord le curseur à l'endroit souhaité d'insertion du texte conditionnel.
Si vous avez besoin de plus d'espace pour taper votre texte ou souhaitez simplement agrandir cette section, cliquez sur pour voir la section en mode Plein écran.
Dans Ajouter ce contenu, tapez le texte à insérer si la condition est satisfaite. ExempleL'adresse du bureau de Sherbrooke. Vous pouvez également sélectionner un texte dans le volet central de l'éditeur afin de le copier et y ajouter une condition en cliquant sur l'icône .
Sous Si..., sélectionnez la source des données en cliquant sur , de sorte à afficher la liste de sources possibles. Par défaut, la source est la fiche du contact, mais vous pouvez aussi choisir des variables dans les données sur le projet ou l'entreprise ou encore des données système. Sélectionnez ensuite le champ et l'opérateur et précisez la valeur recherchée.
Si vous désirez spécifier une texte alternatif si la condition stipulée n'est pas satisfaite, cochez la case Sinon et indiquez le texte à utiliser en remplacement. Exemple L'adresse du bureau de Montréal si la région du contact n'est pas Sherbrooke
Cliquez sur le bouton Insérer.

Insérer une ou plusieurs images

Pour insérer des images dans votre message, allez à la section Images.

Positionnez d'abord le curseur à l'endroit souhaité d'insertion de l'image.
Sous la section Images, sélectionnez l'image désirée en la choisissant dans la liste des images hébergées ou encore en cliquant sur Téléverser une imagepour en récupérer une ailleurs. **Il est possible de voir un aperçu miniature des images en survolant les images avec le curseur.
Rechercher une image
Si vous avez beaucoup d'images, il peut s'avérer utile de faire une recherche afin de trouver plus rapidement l'image à insérer. Pour ce faire, saisissez le nom recherché dans la zone de recherche et cliquez sur l'icône pour actualiser les résultats.
Télécharger une nouvelle image
Pour aller chercher une image sur votre ordinateur, cliquez sur Téléverser une image. Il faut savoir que les images que vous souhaitez héberger devraient être au format PNG, GIF et JPG . Dans la fenêtre de transmission de fichier, sélectionnez une catégorie au besoin pour classer l'image et cliquez sur Choisir un fichier pour ouvrir l'explorateur Windows et y choisir l'image en question. Une fois l'image choisie, cliquez sur Ouvrir. Vérifiez que les dimensions de l'image conviennent pour le message et au besoin, apportez-y les modifications nécessaires en cliquant sur l'icône d'édition . N'oubliez pas d'enregistrer vos changements dans l'éditeur d'images. De retour dans l'application, cliquez sur Sélectionner.
L'image sera alors ajoutée à la liste et vous pourrez la sélectionner pour l'ajouter au message.
Ouvrir le sélecteur d'images
Le sélecteur d'images permet de voir la liste des images dans une fenêtre distincte, plus grande, qui offre des options supplémentaires de gestion des images. De cette fenêtre, on peut modifier l'image via l'éditeur d'images, l'actualiser, la remplacer, en voir un aperçu de taille normale, modifier son adresse URL, la télécharger et même supprimer l'image.
Une fois l'image sélectionnée, cliquez sur le bouton Insérer.
Au besoin, modifiez la largeur, la hauteur et l'alignement du texte avec l'image, et ajoutez un texte alternatif advenant que l'image ne soit pas affichée. Pour voir comment l'image est alignée au texte, cliquez sur l'option Prévisualiser avec du texte pour voir un échantillon.
Si vous êtes satisfait du résultat, cliquez sur le bouton Insérer.
Il ne vous reste qu'à effectuer la mise en page du message, soit par le biais des diverses fonctions de mise en page offertes dans l'éditeur WYSIWYG ou encore en ajoutant les balises nécessaires dans l'éditeur HTML.
Il ne faut surtout pas oublier d'enregistrer vos changements en cliquant sur Sauvegarder. D'ailleurs, il est conseillé d'enregistrer vos modifications au fur et à mesure, histoire de ne pas les perdre.

Informations importantes sur les images

Notez que la majorité des clients courriel n’affichent plus les images automatiquement à moins de les avoir préalablement autorisées (souvent individuellement pour chaque expéditeur).
Les images doivent donc être téléchargées après l’ouverture du message et il peut y avoir un délai avant qu’elles ne s’affichent. Il est donc très important que vos balises <img src=…> contiennent les informations sur la hauteur et la largeur des images pour ne pas altérer la structure du message le temps qu’elles soient visibles. Il est recommandé aussi d’ajouter un texte alternatif à vos images.
Comme vos images seront appelées à l’ouverture, elles doivent être accessibles d’Internet et donc utiliser un chemin absolu complet (http://...).
Aussi, assurez-vous de réduire la taille de vos images au maximum pour qu'elles s'affichent plus rapidement.
Exemple<img src="http:// repsolution.com/images/monimage.gif" width="10" height="10" alt="Texte affiché quand l'image ne l'est pas">

Valider le message

Assurez-vous que votre message est valide et qu'il ne contient aucune erreur.

Vous pouvez en connaître la validité en regardant la barre d'outils du haut. Si vous y voyez un indicateur à cet effet, cliquez dessus pour voir le détail des erreurs et/ou des avertissements.
Vous devrez au minimum corriger les erreurs pour pouvoir procéder à un envoi. Les corrections sont facultatives pour les avertissements, bien que suggérées.
Si des notes ou des commentaires ont été inscrits par d'autres intervenants, en lien avec le message, vous pourrez les consulter ou en ajouter en cliquant sur l'icône d'options supplémentaires, et en choisissant ensuite Notes de révision.

Précisions sur les erreurs d'hameçonnage, ou « phishing » en anglais

Options d'édition supplémentaires

Pour faciliter l'édition et ne garder en évidence que les fonctions les plus courantes, plusieurs options ont été regroupées dans un espace non affiché par défaut, mais tout de même accessible pour qui en a besoin.

Pour accéder à ces autres options, il suffit de cliquer sur l'icône qui figure dans la barre d'informations de l'éditeur.

Pour en savoir plus, consultez Description des options d'édition supplémentaires.

French