In this guide, our aim is to provide you with all the essentials for easily creating HTML code tailored to your specific electronic signature needs. Whether you want to add dynamic images, conditional attributes or customise the style of your variables, you'll find here the tools you need to optimise your Letsignit signatures.
How to Customize Your Email Signature with HTML
In this guide, our goal is to provide you with all the essential elements to easily create HTML codes tailored to your specific needs for email signatures. Whether you want to add dynamic images, conditional attributes, or customize the style of your variables, you will find the necessary tools here to optimize your Letsignit signatures.
HTML in Letsignit Signatures
As you know, our signature design platform automatically generates your signatures in HTML format. These signatures are created using the Jinja programming language, offering great flexibility to customize and adjust every aspect of your signature according to your preferences and graphic needs.
Interpretation by Email Clients
It is important to note that email clients such as Outlook and Gmail sometimes interpret the CSS styles applied in our signature designer differently. This interpretation can lead to variations in the appearance of signatures when displayed in your email environment. These differences are often more pronounced on mobile devices, where styles are adapted to fit the constraints of smaller screens.
The CSS styles systematically reinterpreted in email clients are:
Underlining of hyperlinks and mobile numbers
The radius imposed on a photo (rounded edges)
What do you want to do?
IMPROVE THE DEFINITION OF IMAGES OR LOGOS
IMPROVE THE DEFINITION OF IMAGES OR LOGOS
The tag to use:
<img src="https://your-image-address.png" width="15" height="15" style="width: 15px; height: 15px; border: 0;" alt="">: This tag allows you to insert your image directly into your signature using HTML code.
Frequent Request:
I want to resolve image display issues (blurry or not displayed when opening an email).
I want to resolve image display issues (blurry or not displayed when opening an email).
What you want the HTML code to do:
Example with a slightly blurry logo that you want to sharpen: "Display my image without degradation in my signature using a SRC link."
The associated HTML code:
<img src="https://your-image-address.png" width="15" height="15" style="width: 15px; height: 15px; border: 0;" alt="">
How to integrate this code into the designer?
Go to the signature of your choice
Copy the image address to a note (right-click > copy image address)
Delete the image that will be replaced by the HTML code
Add an HTML block instead (Text tab > HTML block)
Paste the above code, replacing the following elements:
The image link:
<img src="https://your-image-address.png"The image format:
width="15" height="15" style="width: 15px; height: 15px; border:0;"
ADD CONDITIONAL IMAGES
ADD CONDITIONAL IMAGES
The tags to use:
{% if condition %}: This tag opens a conditional structure. The content between{% if %}and{% endif %}will only be executed if the condition is true.
{% else %}: This tag is used in a conditional structure to specify the code block to execute if the condition is false.{% elif condition %}: This tag is used to add an additional condition in a conditional structure, used after{% if %}and before{% else %}.{% endif %}: This tag marks the end of a conditional structure or{% if %}loop.
Frequent Requests:
I want to add the dynamic image of my choice to my variable.
I want to add the dynamic image of my choice to my variable.
What you want the HTML code to do:
Example with a dynamic image in front of the variable
{{phone.mobile}}: "If the value of the variable{{phone.mobile}}is present in the collaborator's profile, display the image 'https://storage.letsignit.com/.../image.png'. Otherwise, display nothing."
The associated HTML code:
<div>
{% if variable_name %}
<img src="https://your-image-address.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;">
{{ variable_name }}
</span>
{% endif %}
</div>
How to integrate this code into the designer?
Go to the signature of your choice
Upload the image in .png format under the Image tab that you want to place in front of the variable, for example, a phone icon
Copy the desired image address to a note (right-click > copy image address)
Delete the attribute that will be replaced by the HTML code
Add an HTML block instead (Text tab > HTML block)
Paste the above code, replacing the following elements:
The variable name in two places:
{% if variable_name %}The image link:
"https://your-image-address.png"The image format:
width="15" height="15"The style of your variable (size, color, and desired typography):
<span style="font-size: 10pt; color: #0B0B0B; font-family: Arial, Helvetica, sans-serif;"
I want to add a dynamic image to my signature with a clickable variable behind it.
I want to add a dynamic image to my signature with a clickable variable behind it.
What you want the HTML code to do:
Example with adding a LinkedIn pictogram that links to a collaborator's personal account: "If the variable value is present in the collaborator's profile, display the image. Otherwise, display nothing."
The associated HTML code:
<div style="font-size: 11pt; font-family: Arial;">
{% if variable_name %}
<a href="{{ variable_name }}">
<img height="20" width="20" alt="{{ variable_name }}" src="https://your-image-address.png">
</a>
{% endif %}
</div>
How to integrate this code into the designer?
Go to the signature of your choice
Create the attribute that will be hosted behind the dynamic pictogram under the "User Attribute" tab > Letsignit Attribute > "Personal LinkedIn," for example
Upload the image in .png format under the Image tab, for example, the "LinkedIn" pictogram
Copy the desired image address to a note (right-click > copy image address)
Add an HTML block instead (Text tab > HTML block)
Paste the above code, modifying the highlighted elements, notably:
The variable name in three places:
{{ variable_name }}The size of the dynamic image:
<img height="20" width="20"The image link (go to the Image tab > right-click on the uploaded image)
CHANGE THE APPEARANCE/STYLE OF A VARIABLE
CHANGE THE APPEARANCE/STYLE OF A VARIABLE
The tags to use:
{{ VariableName | trimRight/Left(number of characters to remove) }}: This tag allows you to remove elements to the left or right of a string.<p style="font-family: 'Arial Black'; font-size: 13pt; color: #000000;">{{ name.fullName }}</p>: This tag allows you to add style to a variable, modifying the typography (font-family: 'Arial Black'), font size (font-size: 13pt), and color (color: #000000).{% set modified_mobile = phone.mobile.replace('+33', '06') %}: This tag allows you to replace all occurrences of '+33' with '06' in the variablephone.mobile. The result is stored in a new variable calledmodified_mobile.
Frequent Requests:
I want to truncate the display of my variables.
I want to truncate the display of my variables.
What you want the HTML code to do:
Example with truncating 3 characters to the right of the variable
{{ Title }}: "Remove the last 3 characters from my variable 'Title'."
The associated HTML code:
<div style="font-size: 11pt; font-family: Arial;">
{{ VariableName | trimLeft/Right(number of characters to remove) }}<br>
</div>How to integrate this code into the designer?
Go to the signature of your choice
Delete the variable targeted by the code
Add an HTML block instead (Text tab > HTML block)
Paste the above code, modifying the highlighted elements, notably:
The style of the attribute:
<div style="font-size:11pt; font-family: Arial">The variable nomenclature:
{{ VariableName | trimRight(4) }}Left or right truncation:
{{ title | trimLeft/Right(4) }}The number of truncated characters:
{{ title | trimRight(4) }}
Tip: Left truncation is also possible; just replace 'Right' with 'Left' =
{{title | trimLeft(4)}}
I want to impose a specific typography on my signature.
I want to impose a specific typography on my signature.
What you want the HTML code to do:
Example with a vertically composed signature with 4 different variables: "Impose a specific style on my variables. Style: Arial Black typography, font size 13, black color. The variables that will compose it will be:
{{ name.givenName }} {{ name.familyName }}
{{ title }}
{{ phone.mobile }}The associated HTML code:
<p style="font-family: 'Arial Black'; font-size: 13pt; color: #000000;">{{ VariableName1 }} {{ VariableName2 }}</p>
<p style="font-family: 'Arial Black'; font-size: 13pt; color: #000000;">{{ VariableName3 }}</p>
<p style="font-family: 'Arial Black'; font-size: 13pt; color: #000000;">{{ VariableName4 }}</p>How to integrate this code into the designer?
Go to the signature of your choice
Delete the variables targeted by the code
Add an HTML block instead (Text tab > HTML block)
Paste the above code, modifying the following elements, notably:
The nomenclatures of the variables that make up your signature:
{{variable_name}}The style of your variable:
<p style="font-family: 'Arial Black', Arial; font-size: 10pt; color: #000000;">{{ name.fullName }}</p>
GO FURTHER: CHAT GPT!
GO FURTHER: CHAT GPT!
The Chat GPT tool, the trending generative AI, can now help you customize your Letsignit signatures. Here's how:
Chat GPT is more than just a generative AI. It's a virtual companion capable of generating diverse content, from text to images, including HTML code. It works based on "prompts," instructions you provide to guide its creation.
Imagine simply formulating your requests on Chat GPT, asking it to create specific HTML code for your signatures. With its impressive data analysis capabilities (Web Data, information you provide - types of tags, variable names, etc.), it can deliver the code in record time.
You could, for example, formulate the following prompt: “Surround the variable '{{ title }}' with the <i> tag to italicize it, and place it inside a <p> tag with an inline style defining the font family 'Arial', font size 11 points, and text color black (#000000).”
In an instant, Chat GPT delivers the corresponding HTML code, ready to be integrated into your Letsignit signatures:
<p style="font-family: Arial; font-size: 11pt; color: #000000;"> <i>{{ title }}</i> </p>
ADD CONDITIONAL ATTRIBUTES
ADD CONDITIONAL ATTRIBUTES
I want to set a condition for displaying values with multi-level variables (position 1, position 2, position 3).
I want to set a condition for displaying values with multi-level variables (position 1, position 2, position 3).
What you want the HTML code to do:
Example with a variable that has multiple sub-levels, such as position 1, position 2, position 3: "If
{{variable_name1}}exists, display{{variable_name1}}. Otherwise, if{{variable_name2}}exists, display{{variable_name2}}. Otherwise, if{{variable_name3}}exists, display{{variable_name3}}."
The associated HTML code:
<div>
<p style="font-family: 'Arial'; font-size: 11pt; color: #000000;">
{% if VariableName1 %}
{{VariableName1}}
{% elif VariableName2 %}
{{VariableName2}}
{% elif VariableName3 %}
{{VariableName3}}
{% endif %}
</div>How to integrate this code into the designer?
Go to the signature of your choice
Delete the variables targeted by the code
Add an HTML block instead (Text tab > HTML block)
Paste the above code, modifying the following elements, notably:
The style of your variable:
<p style="font-family: 'Arial'; font-size: 11pt; color: #000000;">The names of the different variables in your condition:
{% if variable_name %}
I want to set a condition for displaying values based on a special character in my variable (like a hyphen).
I want to set a condition for displaying values based on a special character in my variable (like a hyphen).
What you want the HTML code to do:
Example with a variable that contains special characters like a hyphen and you want to replace it with another value: "If the variable value contains a '-', display nothing. But if the variable value contains a numeric sequence, display the variable value."
The associated HTML code:
<div style="font-family: Arial; font-size: 11pt; color: #000000;">
{% if variable_name|replace('-', ' ') == variable_name %}
<a href="{{ variable_name }}" style="text-decoration: none;">
{{ variable_name }}
</a>
{% endif %}
</div>How to integrate this code into the designer?
Go to the signature of your choice
Delete the variable targeted by the code
Add an HTML block instead (Text tab > HTML block)
Paste the above code, modifying the following elements, notably:
The style of the variable:
<div style="font-family: Arial; font-size: 8pt; color: #000000;">The variable name in four places:
{{ VariableName }}The base value and the value to replace:
{% if phone.primary|replace('-', ' ') == phone.primary %}
I want to replace a character with another in my variable.
I want to replace a character with another in my variable.
What you want the HTML code to do:
Example with replacing '+33' with '06' in the variable
{{phone.mobile}}: "If my variable{{phone.mobile}}contains '+33', replace '+33' with '06'. For example, if my number is +33685650872, I want to see 0685650872 displayed. The style of my variable should be: Arial, 11, and black."
The associated HTML code:
<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>
How to integrate this code into the designer?
Go to the signature of your choice
Delete the variable targeted by the code
Add an HTML block instead (Text tab > HTML block)
Paste the above code, modifying the following elements, notably:
The style of your variable:
<div style="font-family: Arial; font-size: 11pt; color: black;">The variable name:
{% phone.mobile %}The names of the characters to modify
{% set modified_phone = phone.primary.replace('+33 ', '0') %}and the character that should replace it
GO FURTHER: CHAT GPT!
GO FURTHER: CHAT GPT!
The Chat GPT tool, the trending generative AI, can now help you customize your Letsignit signatures. Here's how:
Chat GPT is more than just a generative AI. It's a virtual companion capable of generating diverse content, from text to images, including HTML code. It works based on "prompts," instructions you provide to guide its creation.
Imagine simply formulating your requests on Chat GPT, asking it to create specific HTML code for your signatures. With its impressive data analysis capabilities (Web Data, information you provide - types of tags, variable names, etc.), it can deliver the code in record time.
You could, for example, formulate the following prompt: “Surround the variable '{{ title }}' with the <i> tag to italicize it, and place it inside a <p> tag with an inline style defining the font family 'Arial', font size 11 points, and text color black (#000000).”
And voilà! In an instant, Chat GPT delivers the corresponding HTML code, ready to be integrated into your Letsignit signatures:
<p style="font-family: Arial; font-size: 11pt; color: #000000;"> <i>{{ title }}</i> </p>