Skip to content

Email Template Developer's Guide

We use what we refer to as STML (e.g. StreamSend HTML) to create content that is editable via the StreamSend editor. 

Below are some key concepts. 

Best Practices / General Prerequisites


When creating e-mail templates for use in StreamSend’s email editor, the standard best practices for designing email templates should be utilized. Typically, email templates should be structured in a grid format using tables and nested tables.

Some items to keep in mind are:
  • Generally, e-mails should be 500-620 pixels wide for optimal viewing in all email clients
  • StreamSend will automatically parse all CSS within <style> tags within the <head> section into inline styles in the output
  • Use HTML attributes first, then CSS inline styles second.
  • Be sure to include global styles for things that as hyperlinks (e.g. 
  • Use the least number of columns possible
  • Tables should be used as containers for all content. Nested tables should be used for positioning of content
  • Elements can be hidden utilizing CSS selectors and a style of "display:none !important"
Here is a full example that has several STML components that can be used as a starting point:
<html>
<head>
  <style> 
     h1 { font-family: Arial, sans-serif; font-size: 18px; color: blue; }
    .small-text { font-size: 12px; color: black; } 
    a {color: red; text-decoration: none;}
  </style>
</head>
<body>
<div data-type="region">
   <div data-type="block">
    <h1>
      <div data-type="text">Headline Placeholder Text</div>
    </h1> 
    <p class="small-text">
      <div data-type="text">some text here to be styled small</div>
    </p>
    <p>
      <div data-type="text">some text here with a <a href="http://www.google.com">link</a></div>
    </p>
   </div>
</div>
</body>
</html>

STML Key Concepts


Regions


Regions in StreamSend are considered containers for blocks and widgets. Only within a region, can blocks and widgets be added and repositioned. Elements outside of regions cannot be modified directly though the StreamSend editor and must be manually coded in the HTML.
e.g. 
<div data-type="region">
... some content ...
</div>


Blocks

Blocks are containers for elements that are intended to be duplicated / repeated, or  removed in StreamSend. Such examples would be sidebar modules, news sections, and bulleted lists. Any code wrapped with a block tag may be repositioned anywhere within the region it is contained in as well as duplicated as shown below. Blocks must sit inside of regions. 

e.g. 
<div data-type="block">
... some content ...
</div>

So a full example would be: 

e.g. 
<div data-type="region">
   <div data-type="block">
   ... some content ...
   </div>
</div>


User Editable Content

The follow additional data-type options can be used to create editable content that a user can modify from within the editor.

Editable Text


Editable text fields are areas where the user can select and modify text within that element. This is done using a div container with an STML specific attribute. The text area can be placed anywhere and does not have to be directly in between a block element.
e.g. 
<div data-type="text"> 
   .... some editable text ...
</div>

We offer several more advanced options that can be added to the div to allow more functionality, see below.

Editable Text w/ Image on left or right


The text data-type has several options that control whether an image can be dragged to the left or to the right of the text block. 

These options are: 
  • data-image-allowed - the default is "true", "false" can be specified. This option controls whether an image can be dragged to the left, or right of the text block.
  • data-image-src - is the path to the image that will appear either to the left or the right of the text block. This option can be used to include the default or placeholder image that someone can replace
  • data-image-alignment - values are "left" or "right. Indicates whether the image should be placed on the left or the right of the text block.
  • data-image-href - defines the URL to go to if the image is clicked
Example:

e.g. 
<div data-type="text" data-image-allowed="true" data-image-src="path/to/file.jpg" data-image-alignment="right" data-image-href="http://www.example.com"> 
   .... some text ...
</div>


Editable Images


Just like editable text areas, images within the template can be adjusted as long as they are inside a defined region. To place an editable image block, a "data-type" attribute must be placed inside the img HTML tag as shown below.
e.g. 
<img data-type="image" src="path/to/file.jpg" width="100" height="100" />

You can optionally add a hyperlink using the data-href  option. Note that you have to use data-href to add links to images that are editable. Using a standard hyperlink will not be work.
e.g. 
<img data-type="image" data-href="http://somewebsite.com/" src="path/to/file.jpg" width="100" height="100" />


You can also add a data-image-placeholder-label option which allows you to specify a blank src attribute but rather display intructions to the user. e.g. Drop Logo Here
e.g. 
<img data-type="image" data-image-placeholder-label="Drag Your Logo Here" data-href="http://somewebsite.com/" src="path/to/file.jpg" width="100" height="100" />

Widgets


Widgets can be inserted into emails using STML syntax as defined below for each widget type.

RSS Widget


To include the RSS widget in an email, see the syntax at Including RSS in Emails.

Styles


In general styles can be either added to the central sheet in the header, or inlined. When someone makes style updates in the editor, the styles will be recorded in line and will take priority over any other styles. All styles from the head are automatically inlined prior to sending out an email. 

Styling Text


You can style text via the head css or inline by styling an our element that surrounds the text data-type. 

In the example below, the "H1" tag is being styled for the editable headline text and the "small-text" class is used to style another editable text. 
<html>
<head>
  <style> 
     h1 { font-family: Arial, sans-serif; font-size: 18px; color: blue; }
    .small-text { font-size: 12px; color: black; } 
  </style>
</head>
<body>
  <h1>
    <div data-type="text">Headline Placeholder Text</div>
  </h1> 
  <p class="small-text">
    <div data-type="text">some text here to be styled small</div>
  </p>
</body>
</html>

Styling Widgets

Widgets can be inserted into an email using the editor. Each widget has it's own set of CSS classes. You can style widgets by styling the classes in the overall header so that if a widget is dragged then the styles match your preference. 

Text classes

  • text-left-table
  • text-right-table
  • classes are used for the <table> element that is generated for images on the left or right hand side of the of a "text" data-type when the data-image-allowed option is set to true

Image classes

  • user_uploaded_image
  • classes are used for the <img> element that are inserted users

Stock images classes

  • ss-flickr-image
  • On a "<table>" element for that holds the image that the user has dragged in from the "stock images" tab. The stock images are in a table because we add the credit for the creator underneath them

Video widget class

  • ss-widget-ss-video
  • On a "<div>" tag for the container that has an <img> of the video

Form widget class

  • ss-widget-ss-form
  • On a "<div>" tag for the container that has the button linked to the form

Embed widget class

  • ss-widget-ss-embed
  • On a "<div>" tag for the container that has the button linked to the embed

RSS widget classes

  • ss-widget-ss-rss
  • On a "<div>" tag for the container that contains the RSS markup
A default markup is provided when an RSS widget is dragged into an email. This default markup has a set of default class names that could be used to style the output of the RSS widget when it is dragged in. You can see how these classes are using by dragging in an RSS widget and then viewing the default markup. The classes used are below:
  • Header
  • rss-header: on <table> that has the rss title, image, etc
  • rss-details: on the nested <table> in the header that has the rss title, link and date
  • rss-details-title: on the <td> that has the rss title
  • rss-details-title-link: on the <a> around the rss title
  • rss-details-date: on the <td> around the rss date
  • rss-logo: on the <table> that has the rss image
  • Articles
  • rss-article: on the <table> that has the articles
  • rss-article-image: <table> has <img>
  • rss-article-details: <table>
  • rss-article-details-title: <td>
  • rss-article-title-link: <a>
  • rss-article-details-author: <td>
  • rss-article-details-date: <td>
     
  • rss-article-details-content: <td>
  • rss-article-details-content-link: <a>
  • rss-article-details-share: <td>
  • rss-article-details-share-fb: <td> <img>
  • rss-article-details-share-twitter: <td> <img>
  • rss-article-details-share-linkedin: <td> <img>
  • MISC
  • rss-more: <table>
  • rss-more-text: <td>
  • rss-more-text-link: <a>

Responsive Styles

We support media queries in the header CSS. 


<html>
<head>
<style>
...
@media only screen and (max-width: 480px) {
 ...
}
</style>
</head>
<body>
....
</body>
</html>

You can use media queries for example to control the width of images inserted by users with the following: 
<html>
<head>
<style>
...
@media only screen and (max-width: 480px) {

  img.user_uploaded_image {
    width: 100% !important;
    border: none !important;
    height: auto !important;
  }

}
</style>
</head>
<body>
....
</body>
</html>


Feedback and Knowledge Base