Skip to main content
Act-On Software

Custom Stationery Overview

A stationery is the “wrapper” to the content created within the message builder, form builder, or landing page builder. This allows you to add your own branding to any Act-On content quickly and easily.

You can think of stationery as a theme that you can apply to your content to apply default layouts and styles. Below are the advantages of using stationery:

  • Once a stationery is created, the custom HTML, CSS, and Javascript (if applicable) is always available for all Act-On content. Your organization’s distinctive designs do not need to be re-generated for each successive email, landing page, or form.
  • Custom CSS contained within your stationery will always be applied to the content the stationery “wraps”. This includes advanced CSS, such as responsive-design frameworks.
  • It prevents more complex designs and layouts from being accidentally modified by other Act-On users

There are multiple ways to build custom stationery. Your choice will depend on your comfort with custom code (HTML/CSS/JS). For CSS and Javascript information, see the last section of this article.

Design Custom HTML Stationery

This method is best suited for when only HTML or CSS edits need to be made, and other files do not need to be embedded.

  1. Use the simple or advanced stationery editor as outlined above.
  2. Save the stationery.
  3. Select your newly-created custom stationery from the drop down.
  4. Click Edit HTML.  You may change any of the included code, but please keep web/email standards in mind.  Additionally, you will need to work with the following variables:
    {{TEXT}}
    {{HEADER}}
    {{FOOTER}}
    {{LOGO}}
     
    Note: These variables will be referred to without the curly braces, but they should always be used as seen above.
    • TEXT is required.
    • TEXT is where any content created with the message builder, form builder, or landing page builder is inserted
  5. HEADER and FOOTER are required when designing stationery to be used by email messages. They may be omitted when designing for forms or landing pages only.
    • The HEADER tag contains the email headers that are definable by you. By default, it is a "Click here to view this message in a browser" message.
    • The FOOTER tag contains the transparent single pixel image that contains our open sensor, as well as your message footer (unless you suppress your footer text).
  6. LOGO is optional and allows you to display logos you have uploaded into your Act-On branding library.


Handling Default Padding

If you would like to override the default padding that Act-On places between the stationery and the content of your messages, landing pages, and forms, you can do so by inserting the following in the Head section of your index.htm file.  Use "0" to remove this extra spacing:

<head>
<!-- Hints
padding:0
-->
</head>

Additionally, you may remove or completely replace the HTML table structure of system-generated stationeries to further reduce padding and margin by clicking “edit HTML” on a custom or built stationery, or by uploading your own (please see below for details).

Use Custom Code or Additional Files

  1. Create an HTML file called index.htm that contains (among other things) these four elements:
    {{TEXT}}
    {{HEADER}}
    {{FOOTER}}
    {{LOGO}}
     
    Note: These variables will be referred to without the curly braces, but they should always be used as seen above.
    • TEXT is required
      • TEXT is where any content created with the message builder, form builder, or landing page builder is inserted.
      • For example, if you want your landing page, message, or form content to be wrapped in a special <div> when your custom stationery is applied, you would use:
         <div id="exampleDivId">{{TEXT}}</div>
    • HEADER and FOOTER are required when designing stationery to be used by email messages. They may be omitted when designing for forms or landing pages only.  
      • IMPORTANT NOTE FOR EMAIL: If the FOOTER tag is missing in the stationery used for email messages and you suppress the footer in the message composer, we will be unable to track opens of that email because no tracking code will be added
    • LOGO is optional and allows you to display logos you have uploaded into your Act-On branding library.
    • For example, a highly minimalistic stationery would contain the following code in its index.htm file:
      <html>
      <head>
      </head>
      <body>
      {{TEXT}}
      {{FOOTER}}
      </body>
      </html>
      

      Note: FOOTER is not needed for forms or landing pages.
       
  2. Design index.htm with any graphic elements references (GIF, JPEG, and PNG files, for example) you want the stationery to include.
  3. Store index.htm and all graphic elements in the same root folder.
  4. Name the folder exactly as you want your custom stationery to be known in your Act-On account (such as MyStationery).
  5. Zip the folder, not just the files in the folder. The resulting zip file must contain the folder, and it must have the same name as the folder (such as MyStationery and MyStationery.zip). Example of the overall zip file:

TIP: You can download any of our stock stationeries to use as a guide when designing your own stationery. Select any stock stationery from the drop-down list, and click Download on the right side of the page. You will notice that our custom stationeries rely heavily on HTML tables -- this is to ensure proper compatibility with email clients such as Microsoft Outlook, which have more limited support for modern HTML/CSS. Your custom stationeries do not need to follow this format however.

Upload Your Custom Stationery

  1. Click Content, and choose Stationery.
  2. Click the Upload button.
  3. In the Upload Stationery window, click the Choose File button to locate the zip file on your computer.
  4. Click the Upload Now button.

CSS and Javascript Usage

When creating a stationery to be used specifically for forms and/or landing pages, rather than email messages, you can also include CSS and Javascript. Please be aware that many email clients have highly limited CSS rendering capabilities and Javascript is unsafe in email.

Custom CSS

For landing pages, messages, and forms, the css may be specified in the following ways:

  • For external CSS files, you may reference them within the custom stationery or within a Custom Content Block, but they will need to be hosted externally. 
  • An internal CSS <style> section can be included within your custom stationery or within a Custom Content Block
  • It is HIGHLY recommended that for email, inline CSS is used. Google Mail will only render inline CSS when mail is viewed in the webmail client or in the mobile Gmail apps.
  • For forms, you may also override the default input styling via stationery.

Custom Javascript

Javascript is not allowed in custom stationery by default, but can be enabled by support for customers using a custom subdomain.

If JavaScript is enabled for your account:

  • You may include a javascript (.js) file in the same folder as your index.htm file in the stationery zip or reference an externally hosted script file elsewhere.
  • Additionally, you may also use inline or internal Javascript.
  • However, please keep these important considerations in mind
    • When using javascript, onClicks will be stripped out, so to handle these you will need to write script to programmatically attach the onClick handlers to the desired functions
    • JavaScript can also be enabled within standard Rich Text blocks and custom content blocks inside the form and landing page editor (please see the RESOURCES section below for more information on these). 
  • Was this article helpful?
Support

Have a question about this topic?

Ask the community!