Create custom template
If our predesigned store templates do not fit your needs, you can design completely custom templates with HTML, CSS and our templating language.
Templating language
AdSigner uses a simple templating language to insert content into a template. This is done with curly brackets and a field tag. Before using a field tag in a template, you need to add the field to the template using the
button on the bottom of the field sidebar.
Simple data fields are interpolated as a string into the template.
<span>{ name }</span>
<span>Lenart</span>
Link fields render a full anchor node that creates a link. If you wish to apply styles, classes or other attributes to the node, you can use the additional href and text properties to render the values separately.
{ website }
<a title="This is a link." href="{ website.href }"> { website.text } </a>
<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 fields render an img node with alt text that defaults to field label. If width and height are set in the field options, they are added to the node as attributes. Properties available on the image field are src, alt, width and height.
{ avatar }
<img src="{ avatar.src }" width="100" />
<span>This is { avatar.alt }, { avatar.width } pixels wide.</span>
<img
src="https://www.adsigner.com/s/example.png"
alt="Avatar"
width="70"
height="70"
/>
<img src="https://www.adsigner.com/s/example.png" width="100" />
<span>This is Avatar, 70 pixels wide.</span>
Banner fields are image and link fields combined. They inherit properties from both types of fields and render an img node inside an a node.
{ banner }
<a href="https://www.adsigner.com" target="_blank">
<img
src="https://www.adsigner.com/s/example.png"
alt="Banner"
width="470"
height="150"
/>
</a>
Data fields that contain numbers can be multiplied by a specific percentage.
<style>
.text {
line-height: { font_size.150 }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.83 }px;
line-height: { font_size }px;
}
</style>
<style>
.text {
line-height: 18px;
mso-line-height-rule: exactly;
-ms-text-size-adjust: 100%;
color: #ffffff;
font-size: 12px;
font-family: Arial;
}
.text.small {
font-size: 10px;
line-height: 12px;
}
</style>
Conditional expressions
To conditionally render nodes based on an expression, you can use adx-if attribute on any node.
<!--
In this example,
title is not included in signature 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!</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
>
<span>Name: Lenart</span>
<span>I have a mobile phone!</span>
<span>Complex expression.</span>
Styling
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.
<style>
.my-table {
font-size: 12px;
color: { primary-color };
}
</style>
<table class="my-table" style="font-weight: bold;">
<tbody>
<td>Some text</td>
</tbody>
</table>
<table style="font-size: 12px; color: #000000; font-weight: bold;">
<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 store templates. Make sure to test your templates before use.
Field configuration
In addition to layout HTML code, the fields that you use in your template also have to be configured.
Field metadata are settings that add information about the field, but do not change how the template renders. These include field label, description, category and required setting.
Link statistics checkbox determines whether a link or an image should use a deeplink instead of a direct link to the image or URL. This is an important setting if you plan to use conditional rendering or wish to control this field through campaigns.
With the option turned off, links will be rendered as exactly entered or as an empty string if not entered. Images will be rendered as URLs to the image or as an empty string if no image is set. This allows you to use them in conditional rendering with adx-if attributes.
With the option turned on, links will be rendered as a deeplink that redirects to the set link, or displays a 404 error if not set. Images will be rendered as deeplinks to the set image or to a blank pixel image, if no image is set. Deeplinks enable you to log views and clicks of the image or link and cannot be used for conditional rendering. If the image size is set, image deeplinks will always return the blank pixel image with the same aspect ratio. Only fields that have this option enabled can be controlled through campaigns.
Image size sets the size constraints for the image. When set, images entered will always be contained to the specified size and padded with blank space. If only one dimension of the image is set, the image will be resized to preserve it’s original aspect ratio. If not set, images will be displayed in it’s original dimension.
If you wish to create high-DPI display compatible signatures, you will want to set size constraits to double the desired image size, then override the img width and height attributes in template code.
Sample data is used to set the data, that will be seen in template preview.
Input type, Link type, Multiline checkbox, are used to set the input type used to enter the data and do not affect how the data is rendered.
