Le mode Source permet aux créateurs de contenu de créer leurs messages en HTML en partant de zéro ou de modifier directement le code d'un fichier HTML importé. En plus, l'éditeur de contenu HTML permet également aux utilisateurs de glisser-déposer des composants de contenu standard dans le code source.
Remarque importante: L'utilisation de tildes dans le code source peut entraîner un comportement indésirable lors de l'envoi du message. Pour permettre l'utilisation des tildes, qui sont par exemple utilisés dans CSS, il est important d'« échapper » le caractère.
Exemple :
Au lieu d'utiliser ce qui suit :
<a href="https://support.google.com/android/answer/9075928?hl=en#:~:text=1%20Open%20the%20screen" target="_blank" style="color:#000000;">Android</a>
Faites ceci :
<a href="https://support.google.com/android/answer/9075928?hl=en#:~~:text=1%20Open%20the%20screen" target="_blank" style="color:#000000;">Android</a>
Lorsque vous ajoutez manuellement du code HTML standard dans le message, le même contenu est utilisé pour toutes les versions de langue de l'e-mail.
Par contre, l'utilisation des composants Selligent vous offre les avantages suivants:
- Dans le composant Selligent, vous pouvez créer un contenu propre à chaque langue, afin que le texte, les boutons ou les images s'affichent correctement en fonction de la langue du message. Dans la source, les composants Selligent sont identifiés par la balise <SG> très spécifique.
- Vous disposez d'un accès direct aux propriétés et aux options de style du composant, ce qui simplifie la mise à jour du composant.
Remarque: Lors de la création ou de la modification du contenu en mode Source, un éditeur WYSIWYG est disponible dans l'onglet Conception, qui permet à l'utilisateur d'apporter des modifications au contenu de manière visuelle.
L'utilisateur peut basculer entre les deux modes, qui répercutent les modifications effectuées dans l'autre mode.
Avertissement: Lorsque le code HTML importé est très complexe et contient des balises personnalisées, le passage entre le mode Source et le mode Conception peut poser des problèmes. Il est conseillé de NE PAS basculer entre les deux modes, car certains éléments de la source ne seront pas traduits correctement dans le mode Conception et vice versa. Après l'importation, il est préférable de s'en tenir soit au mode Source, soit au mode Conception.
Dans cette rubrique:
Ajouter des composants au code source
Lorsque les composants de contenu sont ajoutés au code source du template ou de l'e-mail, une balise <SG> est automatiquement ajoutée à la source. Ces balises SG sont propres à Selligent. Lorsque vous cliquez sur ce type de balise dans la source, vous pouvez éditer le contenu directement dans la fenêtre Propriétés, sur la droite.
Remarque : Vous pouvez également insérer les balises SG manuellement. Le mode Source est pourvu de la fonction de saisie semi-automatique:
Pour plus d'informations sur les différents types de composants, consultez le chapitre 'Composants de contenu de base'.
En outre, les composants Texte, Bouton, Image, Répéteur, Smart Content, Vidéo, Code-barres et Bloc de contenu ajoutés à la source sont également répertoriés parmi les « composants disponibles » à droite :
- L'icône Crayon vous permet d'éditer le composant dans la fenêtre Propriétés
- L'icône Œil permet de mettre en évidence le composant dans le code
- La Corbeille vous permet de supprimer le composant de la source
Exemple: Ajoutez un composant Texte.
Déplacez le composant Texte dans le corps du message.
Une boîte de dialogue s'ouvre pour vous permettre de modifier l'ID du composant. Vous pouvez également le laisser tel quel.
Nous l'appelons Salutation puis cliquons sur OK.
Une balise SG:content vient s'ajouter dans le code source ; le composant texte est désormais répertorié dans la section Composants disponibles.
Balises spécifiques de Selligent
Les balises <SG> suivantes sont créées dans la source pour chaque type de contenu glissé-déposé dans le code source.
- Texte— <sg:content id="" expression="" allowhtml=""/>
- Image— <sg:image id=""/>
- Livecontent — <sg:livecontent id="Coupon" />
- Vidéo — <sg:video id=""/>
- Bouton— <sg:button id="" style=""/>
- Barcode — <sg:barcode id=""/>
- Diviseur— <sg:divider id=""/>
- Séparateur— <sg:spacer id=""/>
- Espace réservé— <sg:placeholder id=""/>
- Bloc de contenu — <sg:contentblock id=""/>
- Répéteur—
<sg:repeater id="" structure="1" dataselection="" columns="" responsive="true" orientation="horizontal" item-mode="">
<sg:repeaterheader visible="" ></sg:repeaterheader>
<sg:repeateritem id:"" name="">< /sg:repeateritem>
<sg:repeaterfooter visible="" ></sg:repeaterfooter>
<sg:repeaterempty visible="">< /sg:repeaterempty>
< /sg:repeater> - dataselection — Nom de la sélection de données utilisée pour ce Répéteur
- columns — Nombre de colonnes du Répéteur (ce nombre peut être 0). Ainsi, aucune balise de table supplémentaire, TR et TD n'est ajoutée.
- responsive — Est ou non responsive sur les appareils mobiles
- orientation — Manière dont le contenu doit s'afficher sur les appareils mobiles (horizontalement ou verticalement)
- item-mode — utilisation ou non d'une mise en page variable pour la section Élément
- visible — Si la section telle que l'en-tête ou le pied de page s'affiche dans le message.
où les attributs suivants sont utilisés:
Remarque: Toutes les propriétés du Répéteur ou des sections de mise en page sont ajoutées à la source.
Exemple: L'option de mise en page est définie sur Alternance, la visibilité sur mobile, le nombre de colonnes sur deux. La sélection de données choisie est également ajoutée à la source.
Pour définir le contenu de l'en-tête, de l'article et du pied de page du Répéteur, il vous suffit de déposer les composants Texte, Bouton ou image sur le code source, dans la balise SG correspondante.
- Des contraintes de visibilité peuvent être ajoutées à un composant de contenu (texte, bouton, image, etc.) à l'aide d'une expression dans un attribut.
Exemple:
<sg:content expression="all(eq(tobool([VARIABLE.Loyal]),tobool('true')))"> — Texte visible uniquement par les contacts si la variable booléenne Loyal est définie sur True.
<sg:button expression="all(ne([MASTER.TESTUSER], toint('1')))" > — Bouton visible uniquement si le contact n'est pas un utilisateur test.
Quand une ligne ou une colonne entière nécessite une contrainte de visibilité, une balise conditionnelle renfermant une expression est créée autour de ladite ligne ou colonne.
Exemple:
<sg:conditional id="1" expression="all(isnotempty([MASTER.NAME]))"> </sg:conditional>
Remarque : Double-cliquez sur les balises SG dans la source pour afficher la fenêtre Propriétés, à droite, et éditer le contenu.
