Cette page vous fournit des informations sur la manière d'ajouter un bloc qui peut gérer un code HTML personnalisé dans votre modèle d'email basé sur des blocs. Cette solution vous permet d'insérer dynamiquement un code HTML personnalisé dans vos campagnes email sans avoir à modifier le bloc dans le modèle.
Création du bloc
Tout d'abord, il est recommandé de vérifier la largeur maximale du contenu qui peut être inséré dans le bloc HTML personnalisé.
Dans l'exemple suivant, la largeur maximale du contenu HTML personnalisé inséré ne doit pas dépasser 600 px afin d'éviter toute distorsion ou dislocation du reste du contenu.
Le code à utiliser :
<tr> <td align="center" e-editable="contentA_1"><span e-token="cust_esl" token-template="%22%3C%25=%20script%20%25%3E%22" token-content="%7B%22script%22:%22%3Cdiv%3E%3C/div%3E%22%7D" token-meta="%7B%7D" style="background-color: #6597cf; border-radius: .3em; box-shadow: 0 0 0 0.2em #6597cf; color: #fff;" class="cbNonEditable" data-mce-style="background-color: #6597cf; border-radius: .3em; box-shadow: 0 0 0 0.2em #6597cf; color: #fff;" contenteditable="false">Custom HTML</span> </td> </tr>Exemple pour l'option 1
Dans cet exemple, le caractère de remplissage #body# est placé entre une balise ouverte et une balise fermée <table>.
Le code à utiliser :
<div e-editable="contentA_1"> <span e-token="cust_esl" token-template="%22%3C%25=%20script%20%25%3E%22" token-content="%7B%22script%22:%22%3Cdiv%3E%3C/div%3E%22%7D" token-meta="%7B%7D" style="background-color: #6597cf; border-radius: .3em; box-shadow: 0 0 0 0.2em #6597cf; color: #fff;" class="cbNonEditable" data-mce-style="background-color: #6597cf; border-radius: .3em; box-shadow: 0 0 0 0.2em #6597cf; color: #fff;" contenteditable="false">Custom HTML</span> </div>Exemple pour l'option 2
Dans cet exemple, le caractère de remplissage #body# est placé entre une balise ouverte et une balise fermée <div>.
- Sélectionnez l'onglet Blocs et cliquez sur le bouton Créer un nouveau bloc.
- Saisissez le nom du nouveau bloc dans le champ "Titre du bloc". Par exemple : Bloc HTML personnalisé.
- Collez le code copié précédemment dans le champ de code.
- Cliquez sur Enregistrer.
- Mettre à jour les campagnes existantes pour que le bloc nouvellement créé apparaisse dans la bibliothèque de blocs.
Ajout de CSS dans le style du modèle d'email
Si vous souhaitez ajouter du CSS dans la partie <head> du modèle, vous pouvez le faire de deux manières :
- Dans l'onglet Éditeur de style du modèle.
Remarque : les styles peuvent être définis "inline" sur des éléments ciblés (balises, classes, ID, etc.).
- Dans l'onglet Éditeur de cadres, créez un bloc
<style>supplémentaire.
Le code ajouté ici (dans la partie "Style" ou dans le "Cadre" de votre modèle) sera envoyé dans toutes les campagnes, que le bloc HTML personnalisé soit utilisé ou non.
Nous recommandons de définir des styles inline sur les balises ou, si possible, d'ajouter le bloc <style> directement dans le code HTML personnalisé au lieu de l'ajouter en tant que partie fixe du modèle.
Mettez à jour les campagnes existantes pour que les changements prennent effet.
Comment utiliser le bloc HTML personnalisé
- Glissez et déposez le bloc HTML personnalisé dans votre campagne email. Remarquez qu'il contient un élément bleu.
- Cliquez sur l'élément bleu. Cliquez sur le bouton Insérer l'extrait de langage de script Emarsys dans l'outil d'édition.
- En option, vous pouvez renommer l'extrait dans la boîte de dialogue qui apparaît.
- Remplacez le code existant dans le champ par le code HTML personnalisé que vous souhaitez utiliser.
Par défaut, le code HTML personnalisé ne contient qu'une balise<div>ouverte et fermée.
- Cliquez sur OK puis Enregistrer, si le code ESL a passé la validation du code.
Vous pouvez consulter la campagne email via testmail, aperçu de campagne ou voir l'aperçu de la campagne email en cliquant sur l'icône oeil , ou via le lien d'archivage d'une campagne.