StampReady

StampReady Integration

Our email templates are integrated with StampReady, so you can use them in their modern email builder.

Prerequisite: in order to use StampReady's builder, you need to first sign up for a free account ↗ on their site. Once you have an account, you can proceed to upload ↓ and start using our product with their platform.

Structure

The StampReady-integrated files can be found in the /stampready folder.

This folder has the same structure as the standalone files from the /html folder, only that all files inside it are editable or ready to use with StampReady:

  • /all-in-one - all-in-one template .zip file
  • /components - buttons, navigation, spacers, and dividers
  • /grid - the grid system
  • /layout - the base layout file
  • /sections - all the template sections

Only the prebuilt all-in-one template .zip file from the /all-in-one folder can be uploaded directly to StampReady in order to be used in a campaign or exported after using their builder. All other HTML files are just for creating a StampReady-compatible template yourself, which you then upload to their service.

If you're planning on creating a StampReady template yourself, please first take a look at their template tags documentation, and then at our own templates to understand how to do it.


Uploading to StampReady

Inside the /stampready/all-in-one/ folder, you'll find the all-in-one template .zip file.

In StampReady, go to Campaigns -> New Campaign. Then, click the Import Template on the top right, and select "ZIP FILE" from the dropdown.

Browse for our StampReady .zip file as described above, select to upload it, and you're done: StampReady will show you a preview of the template you are about to import.

Again, the file for StampReady contains all sections, so don't worry if you see a very long template with lots and lots of sections when you see the preview confirmation after uploading. That's how StampReady currently works, and you will be creating the exact layout you need (starting from a blank canvas) in their builder, once you confirm the import.


Supported Attributes and Tags

The following StampReady tag attributes are supported:

Template tags
  • data-bg - for background images
  • data-size - font sizing
  • data-color - text colour
  • data-group - Editor 3.0 (Beta) feature. Organises section draggable thumbnails into named groups.
  • data-height - Editor 3.0 (Beta) feature. Allows adjusting spacer height.
  • data-thumb - draggable thumbnail previews
  • data-module - allows dragging and dropping modules to build your layout
  • data-bgcolor - allows changing background colours
  • data-repeatable - Editor 3.0 (Beta) feature. Allows repeating content inside a section. Selected modules only.
  • data-border-color - change border colour for sections that have borders
Personalization tags
  • sr_unsubscribe - mandatory unsubscribe tag
  • sr_view_online - optional "view in browser" URL

Customisation

StampReady has one of the best email template builders around, at the moment. It offers great flexibility and it even allows exporting the HTML to desktop, so you can then import it ready-customized in other services that have less capable builders, such as MailChimp or Campaign Monitor.

HERO With Video

Currently, StampReady's editor doesn't support editing HTML5 video in emails. It doesn't provide options for you to change the video source or poster image. Unfortunately, it even changes the HTML of this section, so you will need to add some attributes back.

Warning: don't try to play the video in StampReady's builder, it will mess up with the HTML and you will need to start over. If you need to preview, select Preview from the menu on the left.

Hover the HERO With Video section in the builder, and click on the </> button on the right. In StampReady's current editor, you will see the code editing window slide down under the section:

Editing HERO With Video code in StampReady

As you can see, the <video> and <source> tags are missing the <poster=""> and <src=""> attributes, respectively. The former is also missing the controls attribute, needed so users can actually play the video. We need to add those back in!

1. Edit the <video> tag:

Add the missing attributes to this tag, so that it looks like this:

              
<video class="column video" width="700" height="394" controls poster="URL TO YOUR POSTER IMAGE">
              
            

2. Edit the <source> tag:

Same as with the <video> tag, change this one so it looks like this:

              
<source src="URL TO YOUR VIDEO FILE" type="video/mp4">
              
            

Of course, depending on your video file format, adjust the <type="video/mp4"> attribute.

Once done, hit the button on the top right of the editor, to apply changes. Again, do not try to play the video in the editor, as you will lose your edits. Always test with from the Preview left menu, or by sending yourself an actual test email (Send->Send Test Email).

Note: StampReady's Editor 3.0 (Beta) provides a better code editing interface and doesn't remove attributes from the <video> and <source> tags. If you see it at the bottom of your Account/Settings page, we encourage you to enable it.

Limitations and Other Notes

Although StampReady's builder is quite advanced and flexible, it still has its drawbacks, at least for now.

Conflicting Browser Plugins

The Grammarly browser plugin severely affects online email editors, including StampReady. By injecting itself into the page, it corrupts email HTML, resulting in a broken template.

Please disable any plugins such as Grammarly or Adblock when using an online email builder.

As a rule of thumb, we recommend disabling any plugins that manipulate content on a web page when using any of the integrations provided with our email templates.

Hamburger Menu Icon

To edit the hamburger menu icon, you need to click the 'code' button next to the module in the builder, then edit the icon in the HTML:

Editing the hamburger menu icon

Elements being removed

When exporting from StampReady, some required elements are removed from our original template.

For example, the <!DOCTYPE html> and <html> tags are being replaced with their own tags, which can break background images in Outlook or lead to unexpected behavior in various email clients.

We're covering the Outlook background images issue for you (our Outlook VML code has the xmlns="" attribute set inline), but to ensure nothing else is impacted and that you use the template as we intended, you will need to add our original tags back.

Replace the doctype and html tags from what you've exported from StampReady:

                  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
                  
                
With this:
                  
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
                  
                

Outlook 120 DPI issues

StampReady currently has limited support for what it allows in the <head> area. Our templates use a specific code that targets Outlook and keeps rendering consistent on hi-DPI screens.
Currently, StampReady removes this in the final email, so you need to add it back yourself.

This is the code you need to add just before <style type="text/css"> in the <head> area:

                
                
                
              
Code bloat

It looks like, at least for now, StampReady's Builder does not clean up after itself when you export the HTML.
We've noticed that all their editor tags aren't removed from the exported HTML (this adds up to the email size), and there are sometimes even leftovers from the builder itself (like wrapper divs).

As always, test before you send!


Next Up: Mailster →