Ajouter du contenu dynamique et personnalisé avec Emailify

Ajoutez du contenu dynamique à vos emails en combinant les merge tags de votre plateforme d’emailing et des blocs de code personnalisé dans sa syntaxe.

Tutoriel vidéo : ajouter du contenu dynamique à des emails HTML dans Figma

Cette vidéo montre comment ajouter du contenu dynamique à des emails HTML dans Figma avec le plugin Emailify.

Tutoriel vidéo : ajouter un flux de produits dynamique à vos emails Klaviyo dans Figma

Cette vidéo montre comment ajouter des flux de produits Klaviyo personnalisés à des modèles HTML personnalisés avec le plugin Figma Emailify.

Tutoriel vidéo : créer dans Figma un modèle d’email Klaviyo de relance de panier abandonné

Cette vidéo montre comment ajouter des flows Klaviyo de relance de panier abandonné à des modèles HTML personnalisés avec le plugin Figma Emailify.

Ajouter du contenu personnalisé propre à votre plateforme ​

Vous pouvez personnaliser le texte, par exemple avec le prénom des destinataires, en ajoutant les merge tags de votre plateforme d’emailing (par exemple MailChimp, Klaviyo, etc.). Il suffit d’insérer votre merge tag dans vos calques de contenu texte Emailify.

Par exemple, si vous ajoutez Hello, %FIRSTNAME% ou Hello, *|FNAME|* (selon la syntaxe et les valeurs de votre plateforme) au contenu de votre calque de texte Figma, le merge tag sera automatiquement remplacé par les vraies données à l’envoi de l’email.

Ces balises variant selon la plateforme que vous utilisez pour envoyer vos emails, consultez la documentation des modèles de votre propre plateforme d’emailing pour savoir quelles balises sont disponibles.

Documentation des variables de modèle de quelques plateformes ​

Voici des liens vers quelques plateformes populaires (la liste n’est pas exhaustive) :

Ajouter une logique if/else entre vos calques Row, Wrapper ou Hero ​

Le type de calque 🧑‍💻 Custom Code vous permet d’insérer une logique de modèle personnalisée entre les rangées de vos designs. Veillez à utiliser la syntaxe correcte pour votre plateforme d’emailing ; cela ressemblerait par exemple à ceci :

{% if customer_type == 'premium' %}

Rangée Emailify ici

{% else %}

Autre rangée Emailify ici

{% endif %}

Ajouter des images personnalisées ou dynamiques ​

Vous pouvez remplacer l’URL d’un calque d’image de vos designs d’email en renseignant le champ Override Image Src. Utilisez soit l’URL d’une image déjà hébergée quelque part (par exemple, https://mycdn/img.jpg), soit une variable dynamique du langage de modèles de votre plateforme d’emailing (par exemple, { variable.my_image }). Cette valeur est automatiquement ajoutée à l’attribut src de la balise <img /> lors de l’export HTML.

Définir si besoin la hauteur d’une image dynamique (avec une largeur « auto ») ​

Pour les images dynamiques dont vous voulez contrôler la hauteur tout en laissant la largeur s’adapter naturellement (les dimensions du fichier image derrière l’URL dynamique n’étant pas forcément connues à l’avance), procédez comme suit dans Figma :

  1. Activez Lock aspect ratio sur le calque d’image dans l’interface de Figma.
  2. Définissez une valeur Max height pour le calque d’image dans l’interface de Figma.

Une fois ces réglages faits, l’image s’affiche avec une hauteur fixe (égale à votre hauteur maximale dans Figma) et une largeur ajustée automatiquement, au lieu du comportement par défaut (largeur fixe, hauteur automatique). Vos images dynamiques occupent ainsi le bon espace vertical tout en conservant leurs proportions naturelles.

Ce comportement ne s’applique qu’aux images qui utilisent des URL dynamiques ; les images statiques exportées par Emailify et les images des plateformes MJML ne sont pas concernées.

Tronquer les longs contenus texte personnalisés ​

Ajouter de longues balises de contenu texte dynamique à vos designs d’email peut parfois perturber le design, en augmentant artificiellement la hauteur de certains éléments ou images d’arrière-plan, alors que le contenu final de votre envoi (qui remplacera ces balises de contenu dynamique) sera peut-être plus court que la balise elle-même.

Pour limiter cet effet, vous pouvez tronquer votre calque de texte Figma au nombre maximal de lignes de votre choix, en suivant les étapes ci-dessous :

  1. Cliquez sur votre calque de texte dans le frame Emailify de votre design Figma
  2. Réglez le redimensionnement du texte du calque de texte sur Auto width
  3. Ouvrez le panneau Type settings (en cliquant sur l’icône ...)
  4. Réglez l’option Truncate text sur Truncate enabled
  5. Réglez la propriété Max lines (juste en dessous) sur le nombre maximal de lignes que votre texte peut occuper
  6. Réglez la propriété Horizontal resizing de l’Auto layout du calque de texte sur Fill container

La troncature ne s’applique que sur votre canevas Figma, pour éviter que la valeur complète du texte dynamique occupe plus de hauteur que nécessaire. L’export HTML final ne contient aucune troncature : le texte dynamique est automatiquement remplacé par le vrai contenu lorsque l’email final est envoyé à votre audience via la plateforme d’emailing dont vous utilisez les balises de contenu dynamique.

Garder les boutons étroits avec un long texte de remplacement ​

Si un bouton contient une longue variable ou un long texte de remplacement qui sera plus tard remplacé par une date ou un libellé plus court, dimensionnez son calque de texte pour le libellé final. Sinon, le texte de remplacement risque de rendre le bouton exporté trop large, et Outlook peut conserver cette largeur même après que votre plateforme d’emailing l’a remplacé.

  1. Sélectionnez le calque de texte à l’intérieur du Button dans Figma.
  2. Réglez le Horizontal resizing de ce calque de texte sur Fixed width, avec une largeur adaptée à la date ou au libellé final attendu.
  3. Ouvrez Type settings, activez Truncate text et réglez Max lines sur 1.
  4. Laissez la variable ou le texte de remplacement complet dans le calque de texte, puis exportez de nouveau l’email.
  5. Envoyez un test depuis votre plateforme d’emailing pour vérifier le bouton avec le texte final, y compris dans Outlook si vous êtes concerné.

La troncature ne modifie que l’affichage du texte de remplacement sur le canevas Figma. Le texte complet reste dans le HTML exporté pour que votre plateforme d’emailing le remplace. Prévoyez une largeur suffisante pour le plus long libellé final que vous comptez envoyer.

Ajouter des variables dynamiques de couleur et de police ​

Variables de couleur dynamiques ​

Pour qu’une couleur d’arrière-plan, de texte ou de contour de vos designs d’email s’affiche sous forme d’extrait de code dynamique (par exemple, {{ primary_color }}) au lieu de sa valeur hexadécimale habituelle issue de la couleur Figma (par exemple, #000000), créez un style de couleur Figma dont le Name contient des doubles accolades (par exemple, {{ my_color_var_name }}). Cette valeur Name de votre style de couleur sera automatiquement utilisée comme valeur CSS color, background-color ou border-color lors de la génération du HTML par le plugin Emailify.

Variables de police dynamiques ​

De même, pour qu’une valeur CSS font-family s’affiche sous forme d’extrait de code dynamique (par exemple, {{ customer.font_family }}) au lieu de sa valeur de police habituelle issue de Figma (par exemple, Arial, sans-serif), créez un style de texte Figma dont le Name contient des doubles accolades (par exemple, {{ my_font_var_name }}). Cette valeur Name de votre style sera automatiquement utilisée comme valeur CSS font-family lors de la génération du HTML par le plugin Emailify.

Répéter une Data Table Row en boucle avec des données dynamiques ​

Pour parcourir des données de votre plateforme d’emailing, sélectionnez une Data Table Row et ouvrez Settings. Ajoutez la syntaxe de boucle dans Opening Code Wrapper (par exemple, {% for product in collection.products %}) et dans Closing Code Wrapper (par exemple, {% endfor %}). Emailify insère ces balises autour de l’élément <tr></tr> de cette rangée dans le HTML exporté.

Une fois les balises d’encadrement ajoutées au calque Data Table Row, vous pouvez renseigner le contenu dynamique dans les calques de votre rangée selon vos besoins.

Vous pouvez appliquer des réglages en masse : ouvrez Settings, puis sélectionnez dans Figma plusieurs calques Emailify du même type. Chaque réglage que vous modifiez s’applique alors à tous les calques sélectionnés.