Custom signature templates
Learn how to use our templating language to design custom email signature templates with HTML and CSS.
If our predesigned store templates do not fit your needs, you can design completely custom templates with HTML, CSS and our templating language.
Configuring template fields
AdSigner uses a simple templating language to insert content into a template. This is done with curly brackets and a field tag { field }.
Before using a field tag in a template, you need to add the field to the template using the Add field button on the bottom of the field sidebar. There are 8 different field types you can choose from:
- Text for plain text data.
- Color for color values with a color picker.
- Notice for long form text with presets.
- Font for font selection with a font picker.
- Number for numerical expressions.
- Link for clickable links with a URL input and a text input.
- Image for all images and icons.
- Image with link for clickable images with a URL input and image picker.
Using template fields
In the templating language, textual field types (Text, Color, Notice, Font) are rendered as a string of characters. They have no additional attributes and can be used in any context.
Source
<span>{ name }</span>Output
<span>Lenart</span>Numerical field type (Number) can also be used in mathematical expressions.
This is useful for setting relative font sizes with a single { font_size } field.
Source
<span style="font-size: { font_size * 1.5 }px;">
{ name }
</span>
<br>
<span style="font-size: { font_size * 0.75 }px;">
{ title }
</span>Output
<span style="font-size: 18px;">
Lenart
</span>
<br>
<span style="font-size: 9px;">
Developer
</span>Link field type (Link) has two attributes href and text which can be used in the template as { field.href } and { field.text }.
Used without attributes { field } it renders as an anchor element a with href attribute and text content.
Source
{ website }
<a
title="This is a link."
href="{ website.href }"
>
{ website.text }
</a>Output
<a href="https://www.adsigner.com" target="_blank">www.adsigner.com</a>
<a
title="This is a link."
href="https://www.adsigner.com"
>
www.adsigner.com
</a>Image field type (Image) is rendered as an image element img with src, width, and height attributes.
You can also access these attributes separately as
{ field.src }, { field.width }, and { field.height }.
Because width and height are numbers, they can also be used in mathematical expressions for relative sizing.
Source
{ logo }
<img src="{ logo.src }"
width="{ logo.width / 2 }"
height="{ logo.height / 2 }"
alt="My logo for High-DPI screens."
/>Output
<img src="https://www.adsigner.com/s/123/456.png" width="200" height="100" />
<img src="https://www.adsigner.com/s/123/456.png"
width="100"
height="50"
alt="My logo for High-DPI screens."
/>Image with link field type (Image with link) has the same attributes as the Image field type (src, width, and height) and also href for the link URL.
It is rendered as an anchor element a with an image element img inside it.
Conditional expressions
To conditionally render parts of the template, you can use the adx-if attribute on any element.
The content of the adx-if attribute is a boolean expression that can use field tags and mathematical expressions.
Source
<!--
In this example,
title is not included in user profile data.
-->
<span adx-if="{ name }">Name: { name }</span>
<span adx-if="{ title }">Title: { title }</span>
<span adx-if="{ mobile.text }">
I have a mobile phone!
{mobile}
</span>
<span adx-if="{ name } and { title }">I have a name and a title.</span>
<span adx-if="({ mobile.text } or { title }) and { name }"
>Complex expression.</span
>Output
<span>Name: Lenart</span>
<span>
I have a mobile phone!
<a href="tel:+123456789">+123456789</a>
</span>
<span>Complex expression.</span>Styling templates
You can use CSS or inline styles to style your template. Before rendering, all styles will be inlined in HTML. You are free to use data interpolation in your stylesheets as well.
Link tags can not be used as a stylesheet source and will be removed before rendering.
Media queries will not be preserved. border, cellpadding and cellspacing will be applied as attributes to table elements.
HTML selectors (class and id attributes) will be removed from the markup.
Source
<style>
.my-table {
cellspacing: 0;
font-size: 12px;
color: { primary-color };
}
</style>
<table class="my-table" style="font-weight: bold;">
<tbody>
<td>Some text</td>
</tbody>
</table>Output
<table style="font-size: 12px; color: #000000; font-weight: bold;" cellspacing="0">
<tbody>
<td>Some text</td>
</tbody>
</table>Rendering pipeline
The entire rendering process consists of a few steps, some of which only happens during production rendering and not during live template preview.
- Capturing interpolated values happens as the first step in the rendering pipeline. All tags enclosed in curly brackets are tested against fields tags included in the template. If there is no matching field for a tag, no interpolation will be made and curly brackets will be preserved in the rendered code.
- Evaluating expressions inside the
adx-ifattributes. In production rendering, nodes with conditional attributes that evaluate to false are removed from the markup. In the live preview, they are hidden withdisplay: none, but remain in the DOM. - Stylesheet inlining only happens in production renders and inlines stylesheets as described above.
- Minification only happens in production renders and removes comments and collapses whitespace to minimize the character length of the signature.
Client compatibility remarks
Emails aren't websites! Because some major email clients are running on antiquated rendering engines,
there is no guarantee your live preview will match the look in your email client.
Generally, you should avoid using any semantic or div elements and rely completely on nesting tables instead.
We recommend taking a look at the practices used in our predesigned layouts. Make sure to test your signatures before on a subset of your users before deploying them organization-wide.
Few other best practices to keep in mind:
- Do not place
line-heightstyles on any element or parent element including images. Place it on aspanelement around the text instead. Line height styles on images can cause unwanted spacing and image clipping. - If using different
line-heightvalues in your template, make sure to use multipletableelements. The firstline-heightstyle applied in the table will be used for the entire table, ignoring latter styles. - Avoid using
marginfor spacing. Usepaddinginstead. - If your signature does not require multiple columns, try designing it with no tables and simple
brspacing. When sending emails from Outlook, all text content inside tables is wrapped in apelement, which can cause unwanted spacing on certain email clients. For example, viewing an email sent from Outlook on Gmail mobile app will add a lot of spacing between lines of text if the signature is designed with tables. - Use double image sizes for sharper images on high-DPI screens. For example, if you want a logo to be 100x50 pixels in the final signature, upload an image that is 200x100 pixels and set the width and height attributes to 100 and 50 respectively.
Complex template example
Use the code below as a starting point for your custom template. It includes all default field types, conditional rendering, and styling.
Source example
<style>
table {
border: 0;
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
td.border-bottom {
padding-bottom: 16px;
border-bottom: 1px solid { text_muted_color };
}
.text {
line-height: { font_size * 1.50 }px;
mso-line-height-rule: exactly;
-ms-text-size-adjust: 100%;
color: { text_color };
font-size: { font_size }px;
font-family: { font_family };
}
.text.small {
font-size: { font_size * 0.83 }px;
line-height: { font_size }px;
}
.text.large {
font-size: { font_size * 1.33 }px;
}
.text.bold {
font-weight: 900;
}
.text a {
color: { secondary_color };
white-space: nowrap;
}
.text.nowrap {
white-space: nowrap;
}
.accent-color {
color: { accent_color };
}
.muted-color {
color: { text_muted_color };
}
.align-right {
text-align: right;
}
</style>
<table width="470">
<tr>
<td valign="bottom" class="border-bottom">
<span class="text large bold accent-color">{ name }</span>
<br adx-if="{ name } and { title }">
<span class="text">{ title }</span>
</td>
<td valign="middle" class="border-bottom" style="text-align: right;">
<a href="{ logo.href }"><img src="{ logo.src }" width="{ logo.width / 2 }" height="{ logo.height / 2 }"></a>
</td>
</tr>
</table>
<br>
<table width="470">
<tbody>
<tr>
<td class="border-bottom">
<span class="text nowrap" adx-if="{ phone.text }">
<strong class="accent-color">T:</strong> { phone }
</span>
<span adx-if="{ phone.text } and { mobile.text }"> </span>
<span class="text nowrap" adx-if="{ mobile.text }">
<strong class="accent-color">M:</strong> { mobile }
</span>
<br>
<span class="text nowrap" adx-if="{ email.text }">
<strong class="accent-color">E:</strong> { email }
</span>
<span adx-if="{ email.text } and { website.text }"> </span>
<span class="text nowrap" adx-if="{ website.text }">
<strong class="accent-color">W:</strong> { website }
</span>
</td>
<td class="border-bottom align-right">
<a class="social" adx-if="{ social_icon_01.href }" href="{ social_icon_01.href }"><img src="{ social_icon_01.src }" width="24" height="24"></a><span adx-if="{ social_icon_01.href }"> </span><a class="social" adx-if="{ social_icon_02.href }" href="{ social_icon_02.href }"><img src="{ social_icon_02.src }" width="24" height="24"></a><span adx-if="{ social_icon_02.href }"> </span><a class="social" adx-if="{ social_icon_03.href }" href="{ social_icon_03.href }"><img src="{ social_icon_03.src }" width="24" height="24"></a><span adx-if="{ social_icon_03.href }"> </span><a class="social" adx-if="{ social_icon_04.href }" href="{ social_icon_04.href }"><img src="{ social_icon_04.src }" width="24" height="24"></a><span adx-if="{ social_icon_04.href }"> </span><a class="social" adx-if="{ social_icon_05.href }" href="{ social_icon_05.href }"><img src="{ social_icon_05.src }" width="24" height="24"></a>
</td>
</tr>
<tr adx-if="{address_line_1} or {address_line_2} or {address_line_3} or {address_line_4}">
<td colspan="2" style="padding-top: 16px;">
<span class="text" adx-if="{address_line_1}">{address_line_1}<br></span>
<span class="text" adx-if="{address_line_2}">{address_line_2}<br></span>
<span class="text" adx-if="{address_line_3}">{address_line_3}<br></span>
<span class="text" adx-if="{address_line_4}">{address_line_4}<br></span>
</td>
</tr>
<tr>
<td colspan="2" style="padding: 16px 0px;">
<a href="{ banner.href }"><img src="{ banner.src }" width="{ banner.width / 2 }" height="{ banner.height / 2 }"></a>
</td>
</tr>
<tr adx-if="{ fineprint }">
<td class="text small muted-color" colspan="2">
{ fineprint }
</td>
</tr>
</tbody>
</table>
<!-- prevent Gmail on iOS font size manipulation -->
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> </div>