Passer au contenu principal
Toutes les collectionsSignatures, CampagnesSignaturesCréation
Comment personnaliser votre signature mail avec le langage HTML?
Comment personnaliser votre signature mail avec le langage HTML?

Optimisez vos signatures Letsignit grâce à des codes HTML adaptés à vos besoins.

Delpech avatar
Écrit par Delpech
Mis à jour il y a plus d’une semaine

Dans ce guide, notre objectif est de vous fournir tous les éléments essentiels pour créer facilement des codes HTML adaptés à vos besoins spécifiques en matière de signature électronique. Que ce soit pour ajouter des images dynamiques, des attributs conditionnels, ou pour personnaliser le style de vos variables, vous trouverez ici les outils nécessaires pour optimiser vos signatures Letsignit.

Le HTML dans les signatures Letsignit

Comme vous le savez, notre plateforme de conception de signatures génère automatiquement vos signatures dans un format HTML. Ces signatures sont élaborées à l'aide du langage de programmation Jinja, offrant ainsi une grande flexibilité pour personnaliser et ajuster chaque aspect de votre signature selon vos préférences et vos besoins graphiques.

Interprétation des outils de messagerie

Il est important de noter que les clients de messagerie tels que Outlook et Gmail interprètent parfois différemment les styles CSS appliqués dans notre designer de signatures. Cette interprétation peut conduire à des variations dans l'apparence des signatures lorsqu'elles sont affichées dans votre environnement de messagerie. Ces différences sont souvent plus marquées sur les appareils mobiles, où les styles sont adaptés pour s'ajuster aux contraintes d'affichage sur des écrans plus petits.

Les styles CSS systématiquement réinterprétés dans les outils de messagerie sont :

  • Le soulignement des liens hypertextes et des numéros de mobiles

  • Le radius imposé sur une photo (bords arrondis)

Que souhaitez vous faire ?

AMÉLIORER LA DÉFINITION D’IMAGES OU DE LOGO

La balise à utiliser :

  • <img src="https://adresse de mon image.png" width="15" height="15" style="width: 15px; height: 15px; border: 0;" alt=""> : Cette balise vous permet d’insérer votre image via un code HTML directement dans votre signature.

La demande fréquente :

Je veux résoudre des problèmes d'affichage d'images (floues ou non affichées à l'ouverture d'un mail).

  • Ce que l'on veut faire dire au code HTML :

    • Exemple avec un logo qui serait un peu flou et dont on voudrait améliorer la netteté : "Je veux que tu affiches mon image sans dégradation dans ma signature grâce à un lien SRC."

  • Le code HTML associé :

<img src="https://adresse de mon image.png" width="15" height="15" style="width: 15px; height: 15px; border: 0;" alt="">

  • Comment intégrer ce code au designer ?

    • Se rendre sur la signature de son choix

    • Copier-coller sur une note l’adresse de l’image (clique droit > copier l’adresse de l’image)

    • Supprimer l’image qui va être remplacée par le code HTML

    • Venir y mettre à la place un bloc HTML (onglet texte > bloc HTML)

    • Venir y copier le code ci-dessus en remplaçant les éléments suivants :

      • Le lien de l’image : <img src="https://adresse de mon image.png"

      • Le format de l’image : width="15" height="15" style="width: 15px; height: 15px; border:0;"

RAJOUTER DES IMAGES CONDITIONNELLES

Les balises à utiliser :

  • {% if condition %} : Cette balise permet d'ouvrir une structure conditionnelle. Le contenu entre {% if %} et {% endif %} sera exécuté uniquement si la condition est vraie.

  • {% else %} : Cette balise est utilisée dans une structure conditionnelle pour spécifier le bloc de code à exécuter si la condition n'est pas vraie.

  • {% elif condition %} : Cette balise est utilisée pour ajouter une condition supplémentaire dans une structure conditionnelle, elle est utilisée après {% if %} et avant {% else %}.

  • {% endif %} : Cette balise est utilisée pour marquer la fin d'une structure conditionnelle ou d'une boucle {% if %}.

Les demandes fréquentes :

Je veux rajouter l'image dynamique de mon choix dans ma variable.

  • Ce que l'on veut faire dire au code HTML :

    • Exemple avec une image dynamique devant ma variable {{phone.mobile}} :
      “Si la valeur de la variable {{ phone.mobile }} est présente dans le profil du collaborateur alors je veux que tu affiches l’image “ https://storage.letsignit.com/5e9efe6bb01abb0007a64720/181523649408367161211721023172540718298.png”, en revanche, si la valeur de la variable n’est pas renseignée alors n’affiche rien.”

  • Le code HTML associé :

<div>
{% if nom de ma variable %}
<img src="https://adresse de mon image.png" width="15" height="15" style="width: 15px; height: 15px; border: 0; display: inline-block; vertical-align: middle;" alt="">
<span style="font-size: 10pt; color: #0B0B0B; font-family: Arial, Helvetica, sans-serif; vertical-align: middle;">
{{ nom de ma variable }}</span>
{% endif %}
</div>

  • Comment intégrer ce code au designer ?

    • Se rendre sur la signature de son choix

    • Venir télécharger l’image en .png sur l’onglet image que l’on souhaite mettre devant la variable, par exemple ici un icone de téléphone

    • Copier-coller sur une note l’adresse de l’image voulue (clique droit > copier l’adresse de l’image)

    • Supprimer l’attribut qui va être remplacé par le code HTML

    • Venir y mettre à la place un bloc HTML (onglet texte > bloc HTML)

    • Venir y copier le code ci-dessus en remplaçant les éléments suivants :

      • Le nom de la variable à deux endroits : {% if nom de ma variable %}

      • Le lien de l’image : "https://adresse de mon image.png"

      • Le format de l’image : width="15" height="15"

      • Le style de ma variable (La taille, la couleur et la typographie voulue) : <span style="font-size: 10pt; color: #0B0B0B; font-family: Arial, Helvetica, sans-serif;

Je veux rajouter une image dynamique dans ma signature avec une variable cliquable derrière.

  • Ce que l'on veut faire dire au code HTML :

    • Exemple avec l’ajout d’un pictogramme LinkedIn qui renvoie vers un compte personnel d'un collaborateur : “Si la valeur de la variable est présente dans le profil du collaborateur alors je veux que tu affiches l’image, en revanche, si la valeur de la variable n’est pas renseignée alors n’affiche rien. “

  • Le code HTML associé :

<div style="font-size: 11pt; font-family: Arial;">
{% if nom de la variable %}
<a href="{{ nom de la variable }}">
<img height="20" width="20" alt="{{ nom de la variable }}" src=" https://adresse de mon image.png ">
</a>
{% endif %}
</div>

  • Comment intégrer ce code au designer ?

    • Se rendre sur la signature de son choix

    • Créer l’attribut qui sera hébergé derrière le pictogramme dynamique sur l’onglet “Attribut de l’utilisateur” > Attribut Letsignit > “LinkedIn perso” par exemple

    • Venir télécharger l’image en .png sur l’onglet “Image” par exemple le pictogramme “LinkedIn”

    • Copier-coller sur une note l’adresse de l’image voulue (clique droit > copier l’adresse de l’image)

    • Venir y mettre à la place un bloc HTML (onglet texte > bloc HTML)

    • Venir y copier le code ci-dessus en modifiant les éléments en vert, notamment :

      • Le nom de la variable à trois endroits : {{ nom de la variable }}

      • La taille de l’image dynamique : <img height="20" width="20"

      • Le lien de l’image (Se rendre sur l’onglet image > faire clic droit sur l’image téléchargée)

CHANGER L’APPARENCE /LE STYLE D’UNE VARIABLE

Les balises à utiliser :

  • {{ Nom de la variable | trimRight/Left(nombre de caractères à enlever) }} :
    Cette balise permet de supprimer des éléments à gauche ou à droite d’une chaîne de caractères.

  • <p style="font-family: 'Arial Black'; font-size: 13pt; color: #000000;">{{ name.fullName }}</p> :
    Cette balise permet de rajouter du style à une variable, vous allez pouvoir modifier la typographie (font-family: 'Arial Black), la taille de la police (font-size: 13pt) et la couleur (color: #000000).

  • {% set modified_mobile = phone.mobile.replace('+33', '06') %} :
    Cette balise vous permettra de remplacer toutes les occurrences de '+33' par '06' dans la variable phone.mobile. Le résultat est stocké dans une nouvelle variable appelée modified_mobile.

Les demandes fréquentes :

Je veux tronquer l'affichage de mes variables.

  • Ce que l'on veut faire dire au code HTML :

    • Exemple avec le troncage de 3 caractères à droite de la variable {{ Title }} :
      "Je veux que tu enlèves les 3 derniers caractères de ma variable “Title"."

  • Le code HTML associé :

<div style="font-size: 11pt; font-family: Arial;">
{{ Nom de ma variable | trimLeft/Right (nombres de caractères à enlever) }}<br>
</div>

  • Comment intégrer ce code au designer ?

    • Se rendre sur la signature de son choix

    • Supprimer la variable visée par le code

    • Venir y mettre à la place un bloc HTML (onglet texte > bloc HTML)

    • Venir y copier le code ci-dessus en modifiant les éléments en vert, notamment :

      • Le style de l’attribut : <div style="font-size:11pt; font-family: Arial">

      • La nomenclature de la variable : { { Nom de la variable | trimRight(4) }}

      • Le troncage gauche ou droite : {{ title | trimLeft/Right(4) }}

      • Le nombre de caractères tronqués : {{ title | trimRight(4) }}

  • Astuces : le troncage par la gauche est également possible, il vous suffit de mettre 'Left' à la place de 'Right' = {{title | trimLeft(4)}}

Je veux imposer une typographie particulière à ma signature.

  • Ce que l'on veut faire dire au code HTML :

    • Exemple avec une signature composée verticalement avec 4 variables différentes : "Je veux que tu imposes un style particulier à mes variables.
      Style : Typographie Arial Black, taille de police 13, couleur noire.
      Les variables qui la composeront seront :

      {{ name.givenName }} {{ name.familyName }}

      {{ title }}

      {{ phone.mobile }}".

  • Le code HTML associé :

<p style="font-family: 'Arial Black'; font-size: 13pt; color: #000000;">{{ Nom de ma variable 1 }} {{ nom de ma variable 2 }}</p>
<p style="font-family: 'Arial Black'; font-size: 13pt; color: #000000;">{{ Nom de ma variables 3 }}</p>
<p style="font-family: 'Arial Black'; font-size: 13pt; color: #000000;">{{ Nom de ma variables 4 }}</p>

  • Comment intégrer ce code au designer ?

    • Se rendre sur la signature de son choix

    • Supprimer les variables visées par le code

    • Venir y mettre à la place un bloc HTML (onglet texte > bloc HTML)

    • Venir y copier le code ci-dessus en modifiant les éléments suivants, notamment :

      • Les nomenclatures des variables qui composent votre signature : {{nom de ma variable}}

      • Le style de votre variable: <p style="font-family: 'Arial Black', Arial; font-size: 10pt; color: #000000;">{{ name.fullName }}</p>

Astuces pour aller plus loin : je veux imposer une typographie particulière dans ma signature avec un préfixe dynamique devant une variable"

  • Ce que l'on veut faire dire au code HTML :

    • Exemple avec une image dynamique devant une variable {{ phone.mobile }} :
      "Je veux que tu imposes un style particulier à mes variables.
      Style : Typographie Arial Black, taille de police 13, couleur noire.
      Les variables qui la composeront seront :

      {{ Nom de ma variable 1 }} {{ Nom de ma variable 2 }}

      {{ Nom de ma variable 3 }}

      {{ Nom de ma variable 4 }}

      Si la valeur de la variable {{ Nom de la variable 4 }} est présente dans le profil du collaborateur alors je veux que tu affiches l’image “https://Adresse de mon image.png”, en revanche, si la valeur de la variable n’est pas renseignée alors n’affiche rien."

  • Le code HTML associé :

<div style="font-family: 'Arial Black'; font-size: 13pt; color: #000000;">
<p>{{ Nom de la variable 1 }} {{ Nom de la variable 2 }}</p>
<p>{{ Nom de la variable 3 }}</p>
{% if Nom de la variable 4 %}
<p style="display: inline-block; margin-left: 5px;">
<img src="https://Adresse de mon image.png" alt="Work Icon" width="20" height="20" style="vertical-align: middle;"> {{ Nom de la variable 4 }}
</p>
{% endif %}
</div>

Je veux remplacer un caractère par un autre dans ma variable.

  • Ce que l'on veut faire dire au code HTML :

    • Exemple avec un ‘+33’ que l’on voudrait remplacer par un ‘06’ dans la variable {{phone.mobile}} :
      "Si ma variable {{phone.mobile}} contient un ‘+33’, alors remplace le ‘+33’ en ‘06’, exemple, si mon numéro est le +33685650872 je veux voir affiché 0685650872. Le style de ma variable doit être le suivant : Arial, 11 et noir"

  • Le code HTML associé :

<div style="font-family: Arial; font-size: 11pt; color: black;">

{% if phone.mobile %}

{% set modified_mobile = phone.mobile.replace('+33', '06') %}

{{ modified_mobile }}

{% endif %}

</div>

  • Comment intégrer ce code au designer ?

    • Se rendre sur la signature de son choix

    • Supprimer la variable visée par le code

    • Venir y mettre à la place un bloc HTML (onglet texte > bloc HTML)

    • Venir y copier le code ci-dessus en modifiant les éléments suivants, notamment :

      • Le style de votre variable : <div style="font-family: Arial; font-size: 11pt; color: black;">

      • Le nom de la variable : {% phone.mobile %}

      • Le nom des caractères à modifier {% set modified_phone = phone.primary.replace('+33 ', '0') %} et le caractère qui doit le remplacer

RAJOUTER DES ATTRIBUTS CONDITIONNELS

Je veux mettre une condition d'affichage de valeur avec des variables à plusieurs niveaux (poste 1, poste 2, poste 3).

  • Ce que l'on veut faire dire au code HTML :

    • Exemple avec une variable dont il y aurait plusieurs sous niveaux, comme poste 1, poste 2, poste 3 :
      "Si {{nom de la variable 1}} existe alors afficher {{nom de la variable 1}}
      Sinon
      Si {{nom de la variable 2}} existe alors afficher {{nom de la variable 2}}
      Sinon
      Si {{nom de la variable 3}} existe alors afficher {{nom de la variable 3}}"

  • Le code HTML associé :

<div>
<p style="font-family: 'Arial'; font-size: 11pt; color: #000000;">
{% if Nom de la variable 1 %}
{{Nom de la variable 1}}
{% elif Nom de la variable 2 %}
{{Nom de la variable 2}}
{% elif Nom de la variable 3 %}
{{Nom de la variable 3}}
{% endif %}
</div>

  • Comment intégrer ce code au designer ?

    • Se rendre sur la signature de son choix

    • Supprimer les variables visées par le code

    • Venir y mettre à la place un bloc HTML (onglet texte > bloc HTML)

    • Venir y copier le code ci-dessus en modifiant les éléments suivants, notamment :

      • Le style de votre variable : <p style="font-family: 'Arial'; font-size: 11pt; color: #000000;">

      • Le nom des différentes variables de votre condition : {% if nom de la variable %}

Je veux mettre une condition d'affichage de valeur en fonction d'un caractère spécial dans ma variable (comme un tiret)

  • Ce que l'on veut faire dire au code HTML :

    • Exemple avec une variable qui comporterait des caractères spéciaux tel un tiret et qu’on voudrait remplacer par une autre valeur :
      "Si la valeur de la variable contient un ‘-’, alors n’affiche rien mais si la valeur de la variable contient une suite numérique, alors affiche la valeur de la variable."

  • Le code HTML associé :

<div style="font-family: Arial; font-size: 11pt; color: #000000;">
{% if nom de la variable|replace('-', ' ') == nom de la variable %}
<a href="{{ nom de la variable }}" style="text-decoration: none;">
{{ nom de la variable }}
</a>
{% endif %}
</div>

  • Comment intégrer ce code au designer ?

    • Se rendre sur la signature de son choix

    • Supprimer la variable visée par le code

    • Venir y mettre à la place un bloc HTML (onglet texte > bloc HTML)

    • Venir y copier le code ci-dessus en modifiant les éléments suivants, notamment :

      • Le style de la variable : <div style="font-family: Arial; font-size: 8pt; color: #000000;">

      • Le nom de la variable à 4 endroits {{ Nom de la variable }}

      • La valeur de base et celle à remplacer : {% if phone.primary|replace('-', ' ') == phone.primary %}

Astuces pour aller plus loin : Je veux mettre une ⁠condition d'affichage de valeur en fonction d'un caractère spécial dans ma variable + ajout d'un préfixe dynamique devant cette variable “

  • Le code HTML associé :

<div style="font-family: Arial; font-size: 8pt; color: #000000;">
{% if Nom de ma variable|replace('-', ' ') == Nom de ma variable %}
<a href="{{ Nom de ma variable }}"style="text-decoration: none;">
<img height="20" width="20" alt="Icon" src="https://storage-demo.letsignit.dev/5aec82ed072cd900064d9325/logo_5aec82ed072cd900064d9325_14521ba3c7215250defcc086b579b23d.png">
{{ Nom de ma variable }}
</a>
{% endif %}
</div>

Je veux mettre une condition d'affichage de valeur avec le rajout d'un caractère spécial entre deux variables (|)/(-)



-> J’ai volontairement laissé le nom des variables et les liens des images dynamiques pour une meilleure compréhension de la condition

  • Ce que l'on veut faire dire au code HTML :

    • Exemple avec une condition d’affichage de deux variables avec ajout d’un caractère spécial entre les deux + ajout d’images dynamique devant chaque variable :

      "Si variable {{ phone.primary }} et {{ phone.mobile }} complétées alors affiche ces deux variables avec un caractère '|" entre les deux + met des images conditionnelles à gauche des deux variables.

      - Pour {{ phone.mobile }} met : https://storage.letsignit.com/5e9efe6bb01abb0007a64720/100985606310390911352718004622510488210.png
      - Pour {{ phone.primary }} met : https://storage.letsignit.com/5e9efe6bb01abb0007a64720/226026475615956430281769404634851472608.png

      Mais si variable {{ phone.primary }} non complété et {{ phone.mobile }} complété alors affiche {{ phone.mobile }} + son image

      Si variable {{ phone.mobile }} non complété et {{ phone.primary }} complété alors affiche {{ phone.primary }} + son image Si aucune des variables de complétées alors n'affiche rien."

  • Le code HTML associé :

<div>

{% if phone.primary and phone.mobile %}

<div>

<img src="https://storage.letsignit.com/5e9efe6bb01abb0007a64720/226026475615956430281769404634851472608.png" alt="Primary Icon" width="20" height="20">

<span>{{ phone.primary }}</span>

<span> | </span>

<img src="https://storage.letsignit.com/5e9efe6bb01abb0007a64720/100985606310390911352718004622510488210.png" alt="Mobile Icon" width="20" height="20">

<span>{{ phone.mobile }}</span>

</div>

{% elif phone.primary %}

<div>

<img src="https://storage.letsignit.com/5e9efe6bb01abb0007a64720/226026475615956430281769404634851472608.png" alt="Primary Icon" width="20" height="20">

<span>{{ phone.primary }}</span>

</div>

{% elif phone.mobile %}

<div>

<img src="https://storage.letsignit.com/5e9efe6bb01abb0007a64720/100985606310390911352718004622510488210.png" alt="Mobile Icon" width="20" height="20">

<span>{{ phone.mobile }}</span>

</div>

{% endif %}

</div>

POUR ALLER PLUS LOIN : CHAT GPT !

L'outil Chat GPT, l’IA générative qui a le vent en poupe, peut maintenant vous aider à personnaliser vos signatures Letsignit, on vous explique tout ci-dessous😉

Chat GPT est bien plus qu'une simple IA générative. C'est un compagnon virtuel capable de générer du contenu diversifié, du texte aux images, en passant par le code HTML. Son fonctionnement repose sur des "prompts", des instructions que vous lui fournissez pour guider sa création.

Imaginez simplement formuler vos requêtes sur Chat GPT, lui demandant de créer du code HTML spécifique pour vos signatures, grâce à ses capacités d'analyse de données impressionnantes (Data Web, informations que vous lui fournissez - types de balises, nom des variables etc...) il sera capable de vous le fournir dans un temps record.

Vous pourriez par exemple lui formuler le prompt suivant : “Entoure la variable '{{ title }}' avec la balise <i> pour la mettre en italique, et place-la à l'intérieur d'une balise <p> avec un style inline définissant une famille de police 'Arial', une taille de police de 11 points, et une couleur de texte noire (#000000)."

Et voilà ! En quelques instants, Chat GPT vous livre le code HTML correspondant, prêt à être intégré dans vos signatures Letsignit :

<p style="font-family: Arial; font-size: 11pt; color: #000000;"> <i>{{ title }}</i> </p>

Avez-vous trouvé la réponse à votre question ?