Page last modified 11:27, 8 Dec 2009 by ccantrell

HTML-Based Emails

1. 1.1. What Is HTML Paste
  1. 1.1.1. Requirements
  2. 1.1.2. HTML Options
  3. 1.1.3. Requirements and Best practices for HTML-Based Emails
2. 1.2. Why Build Emails With HTML
3. 1.3. Scenario
2. Procedures

This document contains conceptual, procedural, and scenario information that you can use when building emails with HTML. Use this document if you would like to use HTML to build emails.

The ability to create emails with HTML is available in all versions of the application. You should have a knowledge of HTML before using this feature.

What Is HTML Paste

The HTML Paste feature is an option you have when creating an email. This feature allows you to create emails with HTML code.

Building emails with HTML gives you an alternative to creating emails from templates. With templates, you control their creation by using content boxes, tabs, and other options available in the application's user interface. With HTML Paste, you create the email by pasting and editing HTML code. You can either create HTML code directly in the application or paste HTML from an external editor.

You can find information about creating templates with HTML here.

Requirements

When working with emails created with HTML code (rather than from a standard template), you need to insert certain features that are required by the federal CAN-SPAM Act. (For emails built using a standard template, these items are automatically embedded into the email.)

Physical mailing address: All commercial email must contain a physical mailing address. You need to insert your physical mailing address using the email tools provided; it cannot be typed directly into the email.
Link to unsubscribe or modify profile: All commercial email must contain a valid opt-out mechanism. To meet this requirement, you can embed a link in your emails by which you can unsubscribe from your communications. In addition, you can also give your subscribers the ability to update their profile information.
You must make sure the images are uploaded in your Portfolio before you create your email, and the URLs in the email code correspond properly.

Note: For full details on the CAN-SPAM Act, visit the Federal Trade Commission web site.

HTML Options

Though you are using the HTML option there is a tool you can use to insert the following features into the HTML code of your emails as desired:

Link to your privacy policy
Personalized data about the subscriber (Substitution Strings)
Images
Document links
Forward to a Friend link
Link to view email as a web page
"Powered By" logo
Tracking
Social Markup

Other advanced HTML options are those referred to as advanced features. These include the insertion of rich media (Flash, Integration, or QuickTime file links).

Requirements and Best practices for HTML-Based Emails

The following HTML email tips increase the likelihood of consistent formatting across the widest variety of email clients, including web-based email providers.

Build your emails to display within a 600-pixel width.	Many email clients can display text and images that are 600 pixels wide. Wider emails may be chopped off in some email client preview windows.
Place a background color within a table.	Several web-based email clients specify a background color on the web page containing the email the subscriber is viewing. As a result, background colors specified in the body tag of an email may be ignored.
Test the look of your email.	Test the look of your email against Microsoft Outlook, Outlook Express, Hotmail, Yahoo!, MSN, Eudora, Lotus Notes, and AOL, in both a Windows and a Macintosh environment. This testing is necessary to ensure that your email displays correctly on the broadest set of email clients.
Use center tags.	Center tags help ensure that your emails display consistently across web-based email clients.
Reduce the use of non-standard languages.	Many email clients are not able to correctly render Microsoft's Rich Text Format ( RTF), because the subscriber's email client requires Microsoft software to correctly interpret it. Look for ( MSO) tags in the body of your HTML to identify Microsoft RTF.
Avoid the use of XML in your email.	Many email clients are not able to identify and either ignore or correctly render XML.

Why Build Emails With HTML

Use HTML Paste to buid emails if you're experienced with HTML and want an alternativeto using the template mode. This provides customization, as HTML is more comprehensive than the application's visual editor.

Another option is to use an HTML Paste Template. An HTML Paste templates gives you the flexibility of using HTML to create your template while still allowing the user to use the email editor to create content boxes in the email.

Scenario

Northern Trail Outfitters has created a nice email with HTML and wants to use this content to create their email. In the workspace they begin creating the email.

Northern Trail Outfitters now pastes their HTML code into the open box:

Note: You must make sure the images are uploaded in your Portfolio before you create your email, and the URLs in the email code correspond properly.

Northern Trail Outfitters inputs the required Physical Mail Address and Profile Center by selecting each item one at at time from the Email Tools drop down and inserting them into the code.

Note: At this point, Northern Trail Outfitters inserts Physical Mail Address immediately after the <body> tag so that it would appear at the top of their email. They inserted the Profile Center directly before the closing </body> tag.

Note: This is the point at which to insert additional code such as Personalization and Tracking. Northern Trail Outfitters has inserted Tracking below between the </body> and </html> tags, and they have inserted the first name code in the body where appropriate: "Happy Birthday, %%firstname%%!"

Northern Trail Outfitters clicks Save and the email is created.

Procedures

To build or edit an email, you use the Build From HTML mode of the email editor workspace, which you access by opening the email and clicking the Edit HTML Version tab. The following procedures walk you through common email-building actions.

How To Include Your Physical Address

Your physical mailing address is taken from your account settings. To insert code that pulls the address into your email, follow these steps while you have the email open in Edit HTML Version mode:

In the text box, place your cursor where you want your physical mailing address to appear.
From the Email Tools drop-down list at the top of the workspace, choose Physical Mailing Address (Required).
Click the Insert button beside the Email Tools field. The code necessary to pull your physical mailing address into the email is inserted at your cursor location.
Click the Save button in the email editor workspace to save your changes and preview the email (after saving, the application automatically switches to View HTML Version view).

How To Link to Profile and Subscription Center

The Profile Center is where subscribers can update their data for the attributes defined in your account (except for any attributes set to be hidden). This web page is built and maintained for you as part of your account. You can preview the Profile Center from the Profile Management area.

The Subscription Center is where subscribers can remove themselves from one or more of your lists. This web page is also built and maintained for you. You can preview it via the Subscription Center link in the Profile Center preview.

Your email must include the means for a subscriber to unsubscribe. Therefore, a link to the Profile Center, which itself includes a link to the Subscription Center, is required in your email. You can also choose to include a link that goes directly to the Subscription Center.

While you have the email open in Edit HTML Version mode, follow these steps to insert a link to the Profile Center and/or Subscription Center:

In the text box, place your cursor where you want the link to appear.
From the Email Tools drop-down list at the top of the workspace, choose Profile Center (Required). (If you're creating a link to the Subscription Center, choose Unsubscribe Center.)
Click the Insert button beside the Email Tools field. A hyperlink to the Profile Center (or Subscription Center) is inserted at your cursor location.
Click the Save button in the email editor workspace to save your changes and preview the email (after saving, the application automatically switches to View HTML Version view).

Note: The default text associated with the link is "Update Profile" or "Unsubscribe." You can adjust this text as desired within the HTML code.

How To Include a Link to Privacy Policy

A privacy policy is an important element of email communications, as it explains the rules and guidelines of email permission.

Default text and a link to a default privacy and permission policy are available with the Privacy Policy tool. You can adjust both the display text and the URL to move to the policy on your own web site.

While you have the email open in Edit HTML Version mode, follow these steps to insert the default privacy policy link:

In the text box, place your cursor where you want the link to appear.
From the Email Tools drop-down list at the top of the workspace, choose Privacy Policy.
Click the Insert button beside the Email Tools field. A hyperlink to the default privacy policy, along with default display text, is inserted at your cursor location.
Click the Save button in the email editor workspace to save your changes and preview the email (after saving, the application automatically switches to View HTML Version view).

How To Include Personalization (Personalization Strings)

You can use personalized personalization strings that fill in with the subscriber's own information when the email is delivered. More information on Personalization can be found here.

While you have the email open in Edit HTML Version mode, follow these steps to insert a personalization string:

In the text box, place your cursor where you want the personalization string to appear in the email.
From the Personalization drop-down list at the top of the workspace, choose the desired attribute.
Click the Insert button beside the Personalization field. The code that pulls the subscriber's data for that attribute is inserted at your cursor location.
Remember: An attribute can be set up as required or optional. If the attribute is optional, make sure that your text still makes sense if the substition string you inserted is blank for a particular subscriber.
Click the Save button in the email editor workspace to save your changes and preview the email (after saving, the application automatically switches to View HTML Version view).

How To Insert Images

Your stored images can be inserted into your email by means of the img src reference tag.

First, follow these steps to discover the URL of the image you want to use:

In the navigation pane click Content.
Click Portfolio or the subfolder in which you want the image stored. Thumbnails of the images in the selected folder are displayed in the workspace. If your desired image is not stored in your account, you'll need to upload the image file.
Click your image, then click the Properties button that appears in the horizontal tab bar above the images.
Copy the URL listed under File URL in the Properties screen.

Now that you have the URL copied, you can paste this URL into the img src reference tag in your email:

Open the email for editing in Edit HTML Version mode.
In the text box, place your cursor inside the img src reference tag and paste the URL. You'll end up with code similar to the following:
```
<img src="https://www.example.com/members/images/#####.jpg">
```
Click the Save button in the email editor workspace to save your changes and preview the email (after saving, the application automatically switches to View HTML Version view).

How To Include Document Links

You can insert links to your stored document into your email using the A href tag.

Use this procedure to link to a document in your portfolio. Usually, you should link to documents rather than attach them to the message to avoid appearing to be a virus threat and to allow tracking on the document. However, if you must attach a document, see the AttachFile() function in the AMPscript guide for more information.”

First, follow these steps to discover the URL of the document you want to use:

In the navigation pane of the application, click Content.
Click Portfolio or the document subfolder in which the document you want is stored. Thumbnails of the documents in the selected folder are displayed in the workspace. If your desired file is not stored in your account, you'll need to upload the file.
Click the thumbnail of the desired document, which causes the document to open in a new browser window.
Copy the URL from the address bar of the browser window in which the document has opened.

Now that you have the URL copied to the Windows Clipboard, you can paste this URL into the A href tag in your email:

Open the email for editing in Edit HTML Version mode.
In the text box, place your cursor inside the A href tag and paste the URL. You'll end up with code similar to the following:
```
<A href="http:// images.example.com/members/###/ filename.xyz">display text</A>
```
Click the Save button in the email editor workspace to save your changes and preview the email (after saving, the application automatically switches to View HTML Version view).

How To Use Forward to a Friend

The Forward to a Friend feature that you can insert into a content box is also available as HTML code that you can insert into your HTML paste email.

While you have the email open in Edit HTML Version mode, follow these steps to insert the Forward to a Friend button:

In the text box, place your cursor where you want the button to appear.
From the Email Tools drop-down list at the top of the workspace, choose Forward to a Friend.
Click the Insert button beside the Email Tools field. The button image and the code behind the button are inserted at your cursor location.
Click the Save button in the email editor workspace to save your changes and preview the email (after saving, the application automatically switches to View HTML Version view).

How Use View Email as Web Page

You can provide subscribers with a link that allows them to open the email as a web page. This provides a solution if a user's email client might have display problems or conflicts with file size downloads.

While you have the email open in Edit HTML Version mode, follow these steps to insert the "view as a web page" link:

In the text box, place your cursor where you want the link to appear. This type of link is typically placed at the top of the email.
From the Email Tools drop-down list at the top of the workspace, choose View Email as a Web Page.
Click the Insert button beside the Email Tools field. The hyperlink and default display text are inserted at your cursor location.
Click the Save button in the email editor workspace to save your changes and preview the email (after saving, the application automatically switches to View HTML Version view).

How To Insert a "Powered By" Logo

Follow these steps to insert the "Powered by" logo while you have the email open in Edit HTML Version mode:

In the text box, place your cursor where you want the logo to appear. This type of link is usually placed at the end of the email.
From the Email Tools drop-down list at the top of the workspace, choose Powered By Logo.
Click the Insert button beside the Email Tools field. The button image and the code behind the button are inserted at your cursor location.
Click the Save button in the email editor workspace to save your changes and preview the email (after saving, the application automatically switches to View HTML Version view).

How To Include Open Tracking

The Tracking option at the top of the workspace is the same option that appeared on the first page of the email creation process (the Track Email Opens check box). If that check box was selected at the time the email was created, the tracking code was already added to the email. If it wasn't, you can add the code now by clicking the Insert button beside the Tracking field.

This option tracks the number of subscribers who open this email.

How To Add Rich Media Into Your Email

To insert your rich media, follow these steps while you have the email open in Edit HTML Version mode:

In the text box, place your cursor where you want your the rich media to appear.
From the Rich Media drop-down list at the top of the workspace, choose Flash Integration or QuickTime Integration, as appropriate.
Click the Insert button beside the Email Tools field.

The basic syntax is inserted at your cursor location. You now need to replace the placeholder text in the syntax with the proper code for your file.

Scroll down in the inserted syntax to find the first instance of the VALUE parameter (URL). In the URL, replace the text MEMBER NUMBER with your account ID, also known as your member ID.

If you don't know your account ID, you can find it in the upper-right corner of the application window, in parentheses next to your account name. If your tabs arr arranged horizontally, click you Admin Tab, Account Settings, and it is listed next to Account ID.

In the same VALUE parameter, replace the text FILENAME with the name of your Flash or QuickTime file.
Scroll through the rest of the inserted syntax and replace the other generic VALUE parameters with your member ID and the filename.
Review the comments embedded in the inserted syntax, which guides you through customizing the background color and size (height and width) of the rich media file in the email.
When done, click the Save button in the email editor workspace to save your changes and preview the email (after saving, the application automatically switches to View HTML Version view).