StampReady Integration

Kant Email is integrated with StampReady, so you can use it in their modern email builder.

Structure

The StampReady-integrated files can be found in the Files/stampready folder from your download.

This folder has the same structure as the Files/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, dividers, and spacers
• /grid - the grid system
• /layout - the boilerplate layout file
• /sections - all the template sections

Only the all-in-one template .zip file from the Files/stampready/all-in-one folder can be uploaded directly to StampReady in order to be used in a campaign. All others 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 developer documentation , and then at our own templates to understand how to do it.

Uploading

Inside the Files/stampready/all-in-one/ folder, you'll find the .zip file that you need to upload to StampReady.

1. In StampReady, go to Campaigns → New Campaign.
2. Click "Import Template" on the top right, and select "ZIP FILE" from the dropdown.
3. 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. Simply confirm and start using their editor.

Supported Attributes

The following StampReady attributes are supported in Kant Email:

Template Attributes

• data-repeatable - Editor 3.0 feature. Allows repeating content inside a section. Selected modules only.
• data-group - Editor 3.0 feature. Organises section draggable thumbnails into named groups.
• data-crop - set to false, it disables the cropping pop-up when uploading an image
• data-module - allows dragging and dropping modules to build your layout
• data-border-color - change border colour for sections that have borders
• data-height - Editor 3.0 feature. Allows adjusting spacer height.
• data-bgcolor - allows changing background colours
• data-thumb - draggable thumbnail previews
• data-bg - for background images
• data-color - text colour
• data-size - font sizing

Personalization Variables

• sr_view_online - optional "view in browser" URL
• sr_unsubscribe - mandatory unsubscribe tag

For reference, please see StampReady's Developer Guide.

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.

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:

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="https://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="https://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 (by clicking Send → Send Test Email).

Limitations & Other Notes

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

Builder 3.0

The new version of StampReady's email builder, although more feature-packed, has many issues and bugs. We've tested it and we cannot recommend it for use in production.

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.

Hamburger Menu Icon

The hamburger menu icon is visible only on the mobile breakpoint, so it can't be edited with StampReady's visual editor. Instead, you need to edit it manually in the HTML:

Elements changed/removed

When exporting from StampReady, some required elements are changed or completely 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 Styles

StampReady currently has limited support for what it allows in the <head> area.

Kant Email uses Pine's Outlook-targeted style block, which defines typography and layout resets just for this email client. Additionally, it also keeps rendering consistent on hi-DPI screens.

Currently, StampReady removes this in the final email, so you need to add it back yourself. If you don't, Outlook rendering will be off and the font will fallback to Times New Roman.

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

<!--[if mso]>
  <xml>
    <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
  </xml>
  <style>
    table {border-collapse: collapse;}
    .spacer,.divider {mso-line-height-rule: exactly;}
    td,th,div,p,a {font-size: 13px; line-height: 23px;}
    td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family:"Segoe UI",Helvetica,Arial,sans-serif;}
  </style>
  <![endif]-->

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 data- attributes 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, inline styles, unnecessary extra code indentation).

With these in mind, we highly advise manually cleaning up the HTML, for optimal results.

As always, test before you send!