Custom Stationery Overview – Act-On Connect

Stationery wraps around the content created within the Message Composer and the Classic Form builder. This allows you to add your own branding to any Act-On content quickly and easily.

You can think of it as a theme that you can apply to your content to apply default layouts and styles. Advantage of Using Stationery:

Once a Stationery is created, the custom HTML, CSS, and Javascript (if applicable) are 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 that the Stationery wraps. This includes advanced CSS, such as responsive-design frameworks.
Stationery 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 are not embedded.

Select an existing Stationery, which you will use as the base of your new Custom Stationery.
Go to Content > Stationery and choose from the drop-down menu. "Plain*" is the default.
Download the Stationery. It will be a zip folder.
Unzip the folder.
Open the new folder and edit the index.htm file. You may change any of the included code, but please keep web/email standards in mind.

You will need to work with the following variables:

{{TEXT}}
{{HEADER}}
{{FOOTER}}
{{LOGO}}

TEXT is required. This is where any content created with the Message Composer, Form Builder, or Landing Page Composer is inserted.
- Note: These variables will be referred to without the curly braces, but they should always be used, as seen above.
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 and your message footer (unless you suppress your footer text).
LOGO is optional and allows you to display logos you have uploaded into your Act-On Branding library (Content > Branding > Logos).

Handling Default Padding

To override the default padding that Act-On places between the stationery and the content of your messages, landing pages, and forms, locate the padding property between the <style> tags of the <head> section in your index.htm file.

Set the padding property to 0 as shown below:

<head>
<style> 
body, table, tr, td, div, textarea, input
{
padding:0px;
}
</style>
</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

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. This is where any content created with the Message Composer, Form Builder, or Landing Page Composer is inserted.
  - For example, if you want your landing page, message, or form content to be wrapped in a special <div> element 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 (Content > Branding > Logos).
- For example, 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.
Design index.htm with any graphic elements references (GIF, JPEG, and PNG files, for example) you want the stationery to include.
Store index.htm and all graphic elements in the same root folder.
Name the folder exactly as you want your custom stationery to be known in your Act-On account (such as MyStationery).
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 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.

Upload Your Custom Stationery

Click Content > Stationery
Click the Upload button
In the Upload Stationery window, click the Choose File button to locate the zip file on your computer.
Click the Upload Now button.

Note: Uploaded zip files must have unique folder names from those already in your account. If you receive an error instructing you to rename your folder, rename the folder you zipped, compress it to a zip file again, and upload again.

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 limited CSS rendering capabilities and that JavaScript is widely considered unsafe in email.

Custom CSS

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

An external CSS file referenced within the custom Stationery or within a Custom Content Block (these will need to be hosted externally).
As an internal CSS <style> section included within the custom Stationery or a Custom Content Block
For forms, you may also override the default input styling via Stationery.

For emails:

It is HIGHLY recommended that inline CSS is used. Gmail will only render inline CSS when mail is viewed in the webmail client or the mobile Gmail apps.

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.
- 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 a 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).