Build Email Templates in Signal

Download this documentation (PDF)

Built for flexibility.

Our email template editor is designed to give you loads of flexibility when building templates. Add images, lock down formatting, create editable & repeatable regions… There are numerous ways to customize and control the look-and-feel of a template that you or others will use to send emails from Signal.

You will be working directly with the HTML for your email templates. As such, you will need a reliable working knowledge of HTML and email building best practices.

Several of our pre-built templates are available for you to download, modify, and re-upload as needed.

A note on email best practices

Signal’s template editor does not impose any restrictions on email dimensions or markup structure. However, widely recognized best practices for email creation recommend emails be no wider than 600px wide, and employ a highly structured HTML table format. You are also strongly encouraged to move all styles inline, as opposed to including them in the head of the document. Styles used for mobile optimization, however, would be included in the head as part of a media query.

Adding HTML

The template editor itself consists of a large textarea. Copy and paste existing HTML into the textarea, or write markup from scratch. Preview your changes immediately using the link at the top right of the page.

Adding images

Signal can host any image assets you need for your templates, such as masthead banners and library images. Upload images using the ‘Add images’ tab at the bottom of the editor. The editor will give you a URL to put in your template’s HTML.

Library images

You can upload images and mark them as ‘library items’ for users to select when building their emails. Images not marked as library items (such as, say, a masthead banner) will never be available to use when building the email. This feature works in conjunction with ‘code snippets’, which we’ll review later in this
documentation.

Repeatable Layouts

Take the stress out of email formatting with this feature. Repeatable layouts let you create formatted, repeatable content blocks to be added as needed by your users when building an email. Make as many as you need. Users will never need to touch HTML to get their email looking exactly the way you intended.

Layouts are specific to an email template, which gives you precise control over the types of content that can be added.

A few approaches to layouts:

• Create generic layouts with 1) a headline, image flush left, content flush right, 2) a headline, image flush right, content flush left, 3) a headline, no image… and so on.
• Create layouts for specific purposes, such as links to your latest blog posts with a spot for a headshot of the post author.
• Create layouts for specific ‘areas’ of your email. Say you create a two-column email template with a main column for articles, and a side column for links and quick snippets of information. Create layouts to be used exclusively in either the main or side columns.
• Create new and edit existing layouts by clicking the ‘Repeatable Layouts’ tab in your email template editor.

To let users create content blocks in an email, add the following code snippet to your template wherever they can add new content (there is no limit). Note: code snippets are covered in full detail later in this documentation.

<div data-signal-editable="unique_name" data-signal-content-type="layout"></div>

This code snippet will create a button visible only in the email builder, which allows users to add a new block:

In this example, we’ve created a two-column email, and will offer unique layouts for each one. To do so, populate the ‘data-signal-editable=”"‘ code snippet in the example above with any term you like — only you will see it when assigning layouts to a region of your email.

<div data-signal-editable="Maincol" data-signal-content-type="layout"></div>

<div data-signal-editable="Sidecol" data-signal-content-type="layout"></div>

You must do this step before assigning your layouts to a region so the system can discover them.

Clicking the button pops up a lightbox that shows the available layouts for that region:

Selecting a layout from the lightbox adds it to the email:

Note that you can add another content region beneath this one. You can also remove the region you’ve just added to your template.

In the layout pictured above, we have created three items of editable content – a headline, an image and the article copy. Converting content into editable items will be covered next.

Using code snippets

With code snippets, you can create editable sections within an email template so that a user sending an email based off your template can enter new content. The various types of code snippets give you a lot of control over the email’s formatting, and ensures that users can’t modify the structure of the email and break the display in email clients.

The image below shows the code snippets tab popped open. Inside the tab are several code snippets.

Full HTML (wysiwyg) code snippet

Use this code snippet in your template’s HTML to let email creators use a fully-featured What You See Is What You Get (wysiwyg) editor. This will let them modify font faces and colors, upload images, add bullets and ordered lists, etc.

<div data-signal-editable="main_content" data-signal-custom-styles="unique_name">Full article text goes here</div>

Upon clicking anywhere in the orange dotted area, a fully-featured WYSIWYG editor will pop open:

Basic wysiwyg code snippet

<div data-signal-editable="unique_name" data-signal-toolbar="basic">Article text goes here here</div>

This code snippet presents a WYSIWYG editor with limited functionality (screenshot below):

Typography code snippet

<div data-signal-editable="unique_name" data-signal-toolbar="type">Headline or title here</div>

Great for headlines and titles, this snippet lets you control font type, color, alignment and more. You can also use it to add an image instead of text.

Text only code snippet

<span data-signal-editable="unique_name">Text-only content goes here</span>

This code snippet presents users with a textarea for entering content only, with no formatting capabilities:

Image only code snippet

<img src="url-to-image.png" data-signal-editable="unique_name">

This code snippet presents users with the option to choose from any of the image library items you have created. They can also upload new images or drag-and-drop new images onto the page to add multiple images at once:

Repeatable content region code snippet

This code snippet, covered in detail in the previous section of this documentation, lets you create a repeatable content region in an email. Adding this code snippet creates a button in the email builder that lets users choose from various layouts of your creating to populate their email with content.

<div data-signal-editable="unique_name" data-signal-content-type="layout"></div>

As reviewed in the ‘repeatable layouts’ section of this documentation, code snippets can be used inside your repeatable layouts to provide user-friendly ways to add the right types of content and protect the formatting of your emails.

Help text and required regions

Your snippets can include a bit of data to helps guide your users as they build email.

<img data-signal-editable="Masthead" src="url-to-img.png" data-signal-description="600px wide x 100px tall" data-signal-required>

Fill the ‘data-signal-description’ value with short help text that will appear at the top right of the editable region in white text on an orange background. This area will also indicate required regions.

Required and suggested tags

You will not be able to send your email without the following tags:

{{unsubscribe_link}}

Required. This tag will generate a link that lets email recipients unsubscribe from your marketing emails.

{{view_in_browser_link}}

Required. This tag will generate a link that lets email recipients view the email in their browser.

Both of these tags are used in an anchor tag as the target URL:

<a style='color:#000000;' href='{{unsubscribe_link}}'>Unsubscribe</a>

CAN-SPAM requirements – required

CAN-SPAM dictates that you include your physical address in each email you send. Use the account tags in the code snippet drawer to display this data.

{{update_preferences_link}}

Suggested. Use this tag in an anchor tag to let users modify their contact information and subscription.

Here’s an email built using an email template that employs several code snippets to create repeatable content blocks and editable regions:

Custom styles

Custom styles let you set font face, color, size, weight and more for your content layouts. They are useful when you want to offer users a set of branded styles from which to choose when building emails.

Custom styles are added to a specific content layout, which means you can offer a variety of unique styles depending on the region in which these styles are used. For example: one set of styles for the main column, a different set for the side column. You could even create different styles for various layouts used in
each region.

Users will only have access to these styles in the full WYSIWYG view. You assign a custom style to a WYSIWYG code snippet by populating the data-signal-custom-styles tag:

When users edit the block of content, they will see your styles in their ‘Styles’ dropdown of
the editor:

We strongly recommend that you set all elements to span tags. Email clients and internet browsers will add default padding and margins to semantic markup tags (h1, h2, h3, p, etc) that will cause discrepancies with your layouts when you test in these clients and browsers. As these are emails and not web pages, the semantics are less critical. To create ‘header-ish’ looking content styles, simply bump up the font size and weights of your elements.

---
content:
  - name: body copy
    element: span
    styles:
      color: '#222222'
      font-size: 12px
      line-height: 18px
      font-family: 'Arial'
  - name: headline
    element: span
    styles:
      color: '#990000'
      font-size: 16px
      font-weight: bold
      line-height: 24px
      font-family: 'Arial'

Adding default subject and sender

You can create a default subject line, reply to email address and ‘from’ name for your emails for convenience when building emails based off your template: