StampReady Editor Documentation

Introduction

The StampReady editor is contstantly being updated and adjustments for the author be required, although we'll let you know in here or by email.

Customers are required to have any StampReady subscription to be eligible to export, send or view the code.

There are 3 modes for the editor:

Modes
- Demo
  
  The customer can edit the template to their likings, but the export, send and code view function is disabled. The save button is transformed into a purchase button.
- Template
  
  The customer has either imported a template or used one from our free template selection. The customer is able to export, send and view the code editor, depending on the subscription the customer has.
- Vault
  
  The customer picked their own modules from the Vault or within the editor. All of these can be used to be send or exported. A subscription is required to be eligible to do those actions.
Try Editor 3.0

Update Log

The update log can be found below.

17/10/2019
- Auto font installation
  
  We detect the font family for any dropped Vault module and install the corresponding font families.
- Fixed UI issues
  
  Including the popup model for data-feed-type.
- data-feed compatibility
  
  Fixed an issue where the editor would crash if there was no data-feed-type="description" available.
14/10/2019
- Maintenance update
  
  The editor received a maintenance update, along with bug fixes.
- Remove empty URLs
  
  Prior sending campaign you can now remove any empty URL that contains [href=""] or [href="#"].
- Vault measurement
  
  Added a function to measure vault related modules.
30/08/2017
- Fixed bug reports
  
  Fixed all given bug reports. Report if something still doesn't work properly.
25/08/2017
- Added Wordpress/RSS support
  
  You're now able to create modules that support Wordpress/RSS content. Please, see the template tags for more information.
- Fixed minor issues
  
  Improved stability by removing minor issues.
23/08/2017
- Fixed template rendering issues
  
  Some templates experienced broken modules. Stack under eachother.
- Added support for older border-color
  
  data-border-top-color, data-border-right-color, data-border-bottom-color, data-border-left-color works again although you no longer need to define the position. StampReady will detect the possible borders automatically. Please use data-border-color for future work.
- Fixed code editor convertion issues
  
  " became ". Not anymore.
- Link support
  
  Newly created links now adapt previously created links, including styles and font size.
- Base Colors
  
  The newly dropped module now automatically adapts to the three given Base Colors.
- Support for data-thumb
  
  Both data-thumb and data-thumbnail now works.
- Fixed bugs and minor issues
  
  Given feedback has been taken care of.
- Improved UI
  
  Creating Palettes, hover statements, popups, etc
09/08/2017
- Better tag support
  
  Added support for more tags (h1, span, etc)

New Important features

Please, review the following features as they should be important to your customers.

Features
- Versions
  
  A copy of the customers template is made every 5 minutes. You're able to go back an hour in editing time.
- Code Editor
  
  You are now able to completely alter the code in a separate space.
- Image library & Editing
  
  Although there are just a few images, customers are now able to pick/upload an image and modify them a bit.
- Color Palettes & Swatches
  
  Save colors, use them for future campaigns!
- Wordpress/RSS support
  
  You are now able to insert content from Wordpress or an RSS feed in your modules.
- Font Library
  
  Pick a font from our library and change them throughout your template!
- Campaign Optimizer
  
  We'll present a little score how well the campaign will do depending on the content of the campaign.
- Particular text coloring
  
  Alter the color of specific words
- Preview Mobile more options
  
  Added different sizes and devices.
- Color Opacity
  
  Option to change the opacity of a bgcolor.
- Color Images
  
  Change the color of any image or icon!
- Resize Modules
  
  Option to resize modules.
- Mirror on mobile
  
  See changes directly on your mobile device.

Template Attributes

All template attributes can be found below. You're also able to download a ZIP containing an example template.

Download Example Template

Features
- data-module
  
  Each draggable module should contain a unique name or identifier. For example you can attach data-module="Header" to the corresponding table/module.
- data-thumbnail incompatible with vault
  
  The thumbnail image that belongs to the draggable module. Should be attached to the same table where the data-module is defined. For example data-thumbnail="header.jpg".
  
  Note: Although thumbnail images should be stored in a folder called thumbnails, do not add the prefix such as thumbnails/header.jpg in the data-thumbnail attribute.
- data-group incompatible with vault
  
  Group modules in a section. For example you can attach data-group="Headers" to all the header like modules and they'll be stored in a section called Headers.
- data-primary-order requires data-primary-type
  
  Set the primary color or background color of an element that has data-primary. For example attach data-primary-order="1" to any element if you want the customer to automatically adopt their primary colors to your template.
  
  Note: A maximum of 3 colors can be used. This tag requires data-primary-type mentioned below.
- data-primary-type
  
  Set the type to color or bgcolor in order to have the data-primary-order attribute to work. A working example would be to add data-primary-order="1" and data-primary-type="bgcolor" to any element to have it's background color adapted by the customers primary colors.
- data-feed-type
  
  Wordpress/RSS support. Set the content type to title, thumbnail, description, date and link in order to add the ability to load Wordpress/RSS content in your modules. The customer is able to load 3, 5, 10 or 15 content modules at once. If any of the data-feed-type attributes is assigned to any of your elements a new option will appear in the module options sidebar.
- data-repeatable
  
  Duplicate the tr or table inside a module. For example you can attach data-repeatable to the corresponding tr or table and copy will be added right below it.
  
  Note: data-repeatable is a prop and should not contain any value. This attribute only works tr and table tags. Do not attach this attribute to the table that contains the data-module attribute, as the option to duplicate already exists. Make sure if the element has been duplicated, you'll see a new Minus symbol. It checks for whatever data-repeatable tag is inside the parent table.
- data-color
  
  Change the color of any element. Use the same name if you want to target multiple elements. For example attach data-color="Paragraphs" to all <p> tags.
- data-color on an image/icon
  
  Adds the option to change the color of any image/icon. For example attach data-color="Icons" to all icons to add the ability to change it's color.
  
  Note: This attribute should only be attached to images/icons that persist as one solid color in transparent PNG/GIF format. For example an image of a landscape in JPG format will return a color completely solid.
- data-size
  
  Change the font size of the element. Use the same name if you want to target multiple elements. For example attach data-size="Paragraphs" to all <p> tags
- data-min optional with data-size
  
  Set the minimum font-size of the element that contains data-size. For example attach data-min="12" to all elements with the data-size="Paragraphs" attribute.
- data-max optional with data-size
  
  Set the maxium font-size of the element that contains data-size. For example attach data-max="28" to all elements with the data-size="Paragraphs" attribute.
- data-bgcolor
  
  Change the background color of the corresponding element. For example attach data-bgcolor="Header" to the element that should have the option to change it's background color.
- data-border-color
  
  Set the name of the border if you want users to be able to change the color of the borders. For example attach data-border-color="Header" to the header module. It'll automatically detect if top, right, bottom or a left border is defined.
- data-border-radius on img tag
  
  Set the name of the border radius if you want users to be able to change the border radius of the image. For example attach data-border-radius="Border Radius" to any image. It'll automatically detect if the radius can be set to 100% if it's a square image.
- data-border-size
  
  Set the size of the border if you want users to be able to change the border size. For example attach data-border-size="Header" to the header module. It'll automatically detect if it top, right, bottom or a left border is defined.
- data-border-size-min optional with data-border-size
  
  Set the minimum size of the border. For example attach data-border-size-min="3" to the element that has the data-border-size attribute.
  
  Note: If not defined, minimum becomes 0.
- data-border-size-max optional with data-border-size
  
  Set the maximum size of the border. For example attach data-border-size-max="10" to the element that has the data-border-size attribute.
  
  Note: If not defined, maximum becomes 10.
- data-button
  
  Adds the option to change the button. For example attach data-button="Main" to all the main/common buttons and the user is able to swap it with a different one.
- data-background
  
  Adds the option to change the background image of any element. For example attach data-background="Header" to the header module.
  
  Note: data-bg still works, but consider using data-background in future templates.
- data-bgcolor-opacity optional with data-bgcolor
  
  Adds the option to change the background color opacity. For example attach data-bgcolor-opacity to the header module containing the data-bgcolor attribute, to add the ability to change the opacity as well.
  
  Note: data-bgcolor-opacity will only work if there's a data-bgcolor tag attached as well. The returned color will be in rgba format. Does not require a true/false boolean.
- data-width
  
  Adds the option to change the width of any element. For example attach data-width="Divider" to the corresponding element to add the ability to change it's width.
- data-width-min optional with data-width
  
  Set the minimum width for the element that contains data-width. For example attach data-width-min="10" to the element containing the data-width attribute.
- data-width-max optional with data-width
  
  Set the maximum width for the element that contains data-width. For example attach data-width-max="100" to the element containing the data-width attribute.
- data-height
  
  Adds the option to change the height of any element. For example attach data-height="Divider" to the corresponding element to add the ability to change it's height.
- data-height-min optional with data-height
  
  Set the minimum height for the element that contains data-height. For example attach data-height-min="10" to the element containing the data-height attribute.
- data-height-max optional with data-height
  
  Set the maximum height for the element that contains data-height. For example attach data-height-max="100" to the element containing the data-height attribute.
- data-hide optional for Live Previews
  
  Hide any module in the editing canvas. This can come in handy when you have a lot of modules and only want to show the important ones. For example attach data-hide to any module which you would like to hide for the customers.
  
  Note: Customers can still drag these modules from the sidebar into the editing canvas.
- data-bg Changed
  
  data-bg still works, but use data-background for future work as it is becomes the new standard.
- data-thumb Changed
  
  data-thumb still works, but use data-thumbnail for future work as it is becomes the new standard.
- data-visible="false" Changed
  
  data-visible="false" still works, but use data-hide for future work as it is becomes the new standard.
  
  Note: data-hide should not contain any value or boolean.
- data-border-top-color changed
  
  This tag has been converted to data-border-color as StampReady automatically detects possible borders.
- data-border-right-color changed
  
  This tag has been converted to data-border-color as StampReady automatically detects possible borders.
- data-border-bottom-color changed
  
  This tag has been converted to data-border-color as StampReady automatically detects possible borders.
- data-border-left-color changed
  
  This tag has been converted to data-border-color as StampReady automatically detects possible borders.
- data-link-color removed
  
  This tag has been removed and no longer works.
- data-link-size removed
  
  This tag has been removed and no longer works
- data-link-style removed
  
  This tag has been removed and no longer works.
- data-crop removed
  
  This tag has been removed and no longer works.
Campaign tags:
- sr_unsubscribe
  
  The unsubscribe link. Can be set in a href attribute. Like so' href="sr_unsubscribe".
- sr_view_online
  
  The view online link. Can be set in a href attribute. Like so' href="sr_view_online".
- sr_name
  
  Populates this tag into the Subscriber's name.
- sr_email
  
  Populates this tag into the Subscriber's email address.
- sr_date
  
  Populates this tag into the current date, Y/M/D format.
- sr_country
  
  Populates this tag into the Subscriber's country.
- sr_browser
  
  Populates this tag into the Subscriber's browser.
- sr_os
  
  Populates this tag into the Subscriber's OS (Apple, Windows, Linux, etc).
- sr_list
  
  Populates this tag into the Customer's List name where the subscriber is included in.
- sr_custom_1
  
  Populates this tag into the Subscriber's Custom 1 field.
- sr_custom_2
  
  Populates this tag into the Subscriber's Custom 2 field.

Example containing all StampReady tags


<!-- VIEW ONLINE -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" data-thumb="thumb01.jpg" data-module="ViewOnline" data-group="Navigations">
    <tr>
        <td bgcolor="#FFFFFF" data-bgcolor="Body" data-primary-order="2" data-primary-type="bgcolor">
            <table width="620" border="0" cellspacing="0" cellpadding="0" align="center" class="scale">
                <tr height="100">
                    <td align="center" style="font-family:'source_sans_proregular', Helvetica, Arial, sans-serif; font-size: 12px; line-height: 30px; color: #a3a3a3;" class="scale-center-both" data-size="View Online" data-max="22">

                        <!-- sr_view_online: insert this SR tag as a link for a word or sentence which you would like to connect to the webversion -->
                        <a href="sr_view_online" style="text-decoration: none; color: #a3a3a3;" data-color="View Online">view online</a>

                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<!-- BACKGROUND -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" data-thumb="thumb02.jpg" data-module="Header" data-group="Headers">
    <tr>
        <td bgcolor="#FFFFFF" data-bgcolor="Body" data-primary-order="2" data-primary-type="bgcolor">
            <table width="620" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#41a9cc" data-primary-order="1" data-primary-type="bgcolor" data-bgcolor="Header Fallback" class="scale">
                <tr>

                    <!-- data-background: to change the background image
                    data-bgcolor: the color behind your background
                    data-bgcolor-opacity: to set opacity -->
                    <td data-height="Header" background="images/header-bg.jpg" data-background="Header">
                        <table width="620" border="0" cellspacing="0" cellpadding="0" align="center" class="scale">
                            <tr>
                                <td height="290" data-height-min="200" data-height-max="400" data-primary-order="1" data-primary-type="bgcolor" style="background-color: rgba(0,0,0,0.15)" data-bgcolor="Header" data-bgcolor-opacity>

                                <!--[if gte mso 9]>
                                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:620px;height:290px;">
                                    <v:fill type="tile" src="images/header-bg.jpg" color="#7bceeb" />
                                    <v:textbox style="v-text-anchor:middle;" inset="0,0,0,0">
                                <![endif]-->

                                    <table width="560" border="0" cellspacing="0" cellpadding="0" align="center" class="scale-center-both">
                                        <tr>
                                            <td align="center" style="font-family:'source_sans_prosemibold', Helvetica, Arial, sans-serif; font-size: 24px; color: #FFFFFF;" data-color="Header Title" data-size="Header Title" data-min="14" data-max="72">
                                                HEADER TITLE
                                            </td>
                                        </tr>
                                        <tr><td height="1" style="font-size: 1px;">&nbsp;</td></tr>
                                        <tr>
                                            <td height="18">

                                                <!-- data-width: change the width, data-width-min and/or data-width-max: the minimum and maximum width your object may have  -->
                                                <!-- data-height: change the height, data-height-min and/or data-height-max: the minimum and maximum height your object may have  -->
                                                <table width="20" data-width="divider" data-width-min="1" data-width-max="300" border="0" cellspacing="0" cellpadding="0" align="center">
                                                    <tr><td height="4" data-height="divider" data-height-min="1" data-height-max="12" data-width="divider" data-width-min="1" data-width-max="40" bgcolor="#FFFFFF" style="border-radius: 1px;" data-bgcolor="Line"></td></tr>
                                                </table>

                                            </td>
                                        </tr>
                                    </table>

                                <!--[if gte mso 9]>
                                    </v:textbox>
                                    </v:rect>
                                <![endif]-->

                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<!-- TEXT -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" data-thumb="thumb03.jpg" data-module="SRTags" data-group="Columns">
    <tr>
        <td bgcolor="#FFFFFF" data-bgcolor="Body" data-primary-order="2" data-primary-type="bgcolor">
            <table width="620" border="0" cellspacing="0" cellpadding="0" align="center" class="scale">
                <tr>
                    <td bgcolor="#F1F1F1" data-bgcolor="Module">
                        <table width="560" border="0" cellspacing="0" cellpadding="0" align="center" class="scale-center-both">
                            <tr><td height="42">&nbsp;</td></tr>
                            <tr>

                                <!-- data-color: for the color of text
                                data-size: to change the text size, data-min and/or data-max: the minimum and maximum font-size your text may have -->
                                <td align="center" style="font-family:'source_sans_prosemibold', Helvetica, Arial, sans-serif; font-size: 18px; color: #444444;" data-color="Big Title" data-size="Big Title" data-min="14" data-max="54">
                                    Lorem Ipsum
                                </td>

                            </tr>
                            <tr><td height="12" style="font-size: 1px;">&nbsp;</td></tr>
                            <tr>
                                <td height="18">
                                    <table width="20" data-width="divider" data-width-min="1" data-width-max="300" border="0" cellspacing="0" cellpadding="0" align="center">
                                        <tr><td height="4" data-height="divider" data-height-min="1" data-height-max="12" bgcolor="#41a9cc" style="border-radius: 1px;" data-bgcolor="Title Line" data-primary-order="1" data-primary-type="bgcolor"></td></tr>
                                    </table>
                                </td>
                            </tr>
                            <tr><td height="12" style="font-size: 1px;">&nbsp;</td></tr>
                            <tr>
                                <td align="center" style="font-family:'source_sans_proregular', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 27px; color: #666666;" data-color="Paragraph" data-size="Paragraph" data-min="14" data-max="26">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor ex malesuada, sodales ligula a, egestas massa. Vestibulum porta commodo est, et tincidunt ex elementum et. Mauris ac tempor enim, in pellentesque justo. Mauris suscipit lectus at sem porttitor dictum.
                                </td>
                            </tr>
                            <tr><td height="42">&nbsp;</td></tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<!-- BORDERS / BUTTONS -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" data-thumb="thumb04.jpg" data-module="Borders and Buttons" data-group="Columns">
    <tr>
        <td bgcolor="#FFFFFF" data-bgcolor="Body" data-primary-order="2" data-primary-type="bgcolor">
            <table width="620" border="0" cellspacing="0" cellpadding="0" align="center" class="scale">
                <tr>
                    <td>
                        <table width="620" class="scale">
                            <tr><td height="30">&nbsp;</td></tr>
                            <tr>

                                <!-- data-border-size: the thickness of the border
                                data-border-color: the color of the border -->
                                <td bgcolor="#FFFFFF" style="border-top: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; border-left: 1px solid #e9e9e9;" data-border-size="Border" data-border-size-min="0" data-border-size-max="3" data-border-color="Border" data-bgcolor="Module">
                                    <table width="560" border="0" cellspacing="0" cellpadding="0" align="center" class="scale">
                                        <tr><td height="42">&nbsp;</td></tr>
                                        <tr>
                                            <td>
                                                <table width="260" border="0" cellspacing="0" cellpadding="0" align="left" class="scale-center-both">
                                                    <tr>
                                                        <td class="bottom12">
                                                            <a href="#"><img src="images/square.png" border="0" style="max-width: 260px; display: inline-block;" class="reset"></a>
                                                        </td>
                                                    </tr>
                                                </table>
                                                <table width="260" border="0" cellspacing="0" cellpadding="0" align="right" class="scale-center-both">
                                                    <tr>
                                                        <td style="font-family:'source_sans_probold', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 27px; color: #444444;" data-color="Title" data-size="Title" data-min="14" data-max="26">
                                                            Lorem ipsum
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td style="font-family:'source_sans_proregular', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 27px; color: #666666;" data-color="Paragraph" data-size="Paragraph" data-min="14" data-max="26">
                                                            Dolor sit amet, constetur adipisicing elit, sed do eiusmod tem por.
                                                        </td>
                                                    </tr>
                                                    <tr><td height="34">&nbsp;</td></tr>
                                                    <tr>
                                                        <td>
                                                            <table style="border-radius: 5px;" border="0" cellpadding="0" cellspacing="0" bgcolor="#41a9cc" data-bgcolor="Button" class="margin-center" data-primary-order="1" data-primary-type="bgcolor">
                                                                <tr>
                                                                    <td align="center" height="45" style="font-family:'source_sans_proregular', Helvetica, Arial, sans-serif; font-size: 16px; color: #FFFFFF; line-height: 45px!important; padding-left: 37px; padding-right: 37px;" data-size="Button" data-min="12" data-max="22">
                                                                        <a href="#" style="text-decoration: none; color: #FFFFFF" data-color="Button">Button text</a>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                        <tr><td height="42">&nbsp;</td></tr>
                                    </table>
                                </td>
                            </tr>
                            <tr><td height="30">&nbsp;</td></tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<!-- REPEATABLE / IMAGE COLORS -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" data-thumb="thumb05.jpg" data-module="Route" data-group="Columns">
    <tr>
        <td bgcolor="#FFFFFF" data-bgcolor="Body" data-primary-order="2" data-primary-type="bgcolor">
            <table width="620" border="0" cellspacing="0" cellpadding="0" align="center" class="scale">
                <tr>
                    <td bgcolor="#d2f4ff" data-bgcolor="Module">
                        <table width="560" border="0" cellspacing="0" cellpadding="0" align="center" class="scale-center-both">
                            <tr><td height="30">&nbsp;</td></tr>
                            <tr>
                                <td>
                                    <table width="260" border="0" cellspacing="0" cellpadding="0" align="left" class="scale">
                                        <tr>
                                            <td class="bottom12">
                                                <img src="images/map_small.png" border="0" style="display: inline-block; max-width: 260px;">
                                            </td>
                                        </tr>
                                    </table>
                                    <table width="260" border="0" cellspacing="0" cellpadding="0" align="right" class="scale">
                                        <tr>
                                            <td style="font-family:'source_sans_probold', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 27px; color: #444444;" data-color="Title" data-size="Title" data-min="14" data-max="26">
                                                Lorem ipsum
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="font-family:'source_sans_proregular', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 27px; color: #666666;" data-color="Paragraph" data-size="Paragraph" data-min="14" data-max="26">
                                                Dolor sit amet, constetur adipisicing elit, sed do eiusmod tem por.
                                            </td>
                                        </tr>
                                        <tr><td height="3" style="font-size: 1px;">&nbsp;</td></tr>
                                        <tr data-repeatable>
                                            <td style="font-family:'source_sans_proregular', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 36px; color: #666666;" data-color="Paragraph" data-size="Paragraph" data-min="14" data-max="26">
                                                <img src="images/pointer.png" border="0" style="max-width: 15px; display: inline-block;" data-color="Icon" data-primary-order="1" data-primary-type="color">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dolor sit
                                            </td>
                                        </tr>
                                        <tr data-repeatable>
                                            <td style="font-family:'source_sans_proregular', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 36px; color: #666666;" data-color="Paragraph" data-size="Paragraph" data-min="14" data-max="26">
                                                <img src="images/pointer.png" border="0" style="max-width: 15px; display: inline-block;" data-color="Icon" data-primary-order="1" data-primary-type="color">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sed do
                                            </td>
                                        </tr>
                                        <tr data-repeatable>
                                            <td style="font-family:'source_sans_proregular', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 36px; color: #666666;" data-color="Paragraph" data-size="Paragraph" data-min="14" data-max="26">
                                               <img src="images/pointer.png" border="0" style="max-width: 15px; display: inline-block;" data-color="Icon" data-primary-order="1" data-primary-type="color">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tem por
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr><td height="30">&nbsp;</td></tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<!-- UNSUBSCRIBE -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" data-thumb="thumb06.jpg" data-module="Unsubscribe" data-group="Footers">
    <tr>
        <td bgcolor="#FFFFFF" data-bgcolor="Body" data-primary-order="2" data-primary-type="bgcolor">
            <table width="620" border="0" cellspacing="0" cellpadding="0" align="center" class="scale">
                <tr>
                    <td bgcolor="#41a9cc" data-bgcolor="Module Second" data-primary-order="1" data-primary-type="bgcolor">
                        <table width="560" border="0" cellspacing="0" cellpadding="0" align="center" class="scale-center-both">
                            <tr><td height="18">&nbsp;</td></tr>
                            <tr>
                                <td align="center" style="font-family:'source_sans_proregular', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 27px; color: #FFFFFF;" data-color="Paragraph Footer" data-size="Paragraph Footer" data-max="18">

                                   <!-- unsubscribe tag: insert this SR tag as a link for a word or sentence which you would like to connect for the user to unsubscribe. This link is required in a template. -->
                                    Copyright &copy; 2017 StampReady. All rights are reserved. <a href="sr_unsubscribe" style="text-decoration: underline; color: #FFFFFF;" data-color="Unsubscribe">Unsubscribe</a>

                                </td>
                            </tr>
                            <tr><td height="15" style="font-size: 1px;">&nbsp;</td></tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<!-- SPACE -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" data-thumb="thumb07.jpg" data-module="Space">
<tr>
        <td bgcolor="#FFFFFF" data-bgcolor="Body" data-primary-order="2" data-primary-type="bgcolor">
            <table width="620" border="0" cellspacing="0" cellpadding="0" align="center" class="scale">
                <tr>
                    <td height="42" bgcolor="#FFFFFF" data-bgcolor="Body">
                        &nbsp;
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Create Live Previews

Before converting your uploaded email template as a Live Preview, make sure you're opted to our SR Developers plan. You can do so by going to the Account Settings page and flick the switch that reads 'Become an author'. When opted, a few options appear in the Dashboard, as well as the Editor. For now, we need to focus on converting your template as a Live Preview, so go ahead and import your StampReady compatible template by going to the New Campaign page > Import Template.

When you're on the Editor page, simply expand Export and the export icon > Create Live Preview . Here you'll be able to fill in some necessary info and your voila, done.

You may adjust your template information over at the Themeforest Demo's page, under the Campaigns section in the Dashboard.

On the right side is an example how you should zip your folder. Be aware that the name of the ZIP file should match the name of the folder inside.
It is not recommended but Thumbnail images may be hard linked.
Please, avoid spaced.

Vault

The vault is by far the biggest gem of StampReady. It allows customers to pick, mix and match modules from a selection of 100's of qualified modules. Authors that deliver modules to us are able to earn and win prizes.

To opt-in for the Author program, which unlocks the Author Vault in the Dashboard, go to Account > Settings > Become an Author.

Earnings
- Per Module
  
  We pay $15 per module that is fully compatible with StampReady and all major browsers, including Outlook.
- Per Template
  
  We pay an extra $20 if it's a template, with a minimum of 10 modules. A template with 10 modules would net you $170.
- Prize Pool
  
  We host a monthly prize pool with a total price between $1000 - $2000. The more customers use your template, the more % you get from the monthly prize pool. Every first of the month a new pool is hosted, and the winners receive an Invoice on their billing page automatically.
Note: Any module submitted will be reviewed closely.

Submission Requirements
- Fully Stampready Compatible
  
  That includes using the primary attribute tag, required template width and format, the StampReady framework and non-copyrighted contents such as images. More information about the format can be found here.
- Per Template
  
  We pay an extra $20 if it's a template, with a minimum of 10 modules. A template with 10 modules would net you $170.
- Prize Pool
  
  We host a monthly prize pool with a total price between $1000 - $2000. The more customers use your template, the more % you get from the monthly prize pool. Every first of the month a new pool is hosted, and the winners receive an Invoice on their billing page automatically.

Report Issue

Email Address

Bug Report
Report Bug

Editor Documentation

All Documentations

Introduction

Modes

Update Log

17/10/2019

14/10/2019

30/08/2017

25/08/2017

23/08/2017

09/08/2017

New Important features

Features

Template Attributes

Features

Campaign tags:

Example containing all StampReady tags

Create Live Previews

Vault

Earnings

Submission Requirements

Report Issue

Email Address

Bug Report