This article describes the Save as HTML feature that is available in Message Designer 2 (MD2). This feature makes it easy to access and edit the HTML code of an existing message in order to, for example:

add a snippet of specialized "tracking" code;
troubleshoot and fix code that is causing a rendering issue;
easily find-and-replace problem code; and
add third-party HTML, such as a sponsored message, to an existing MD2 message's template.

Be sure to try this feature whenever working directly in the HTML code would simplify editing the message and/or you want more design and customization options.

Feature availability

The Save as HTML feature is unique to Message Designer 2 (MD2) messages.

If your account uses other message editors (e.g., QuickMail, Snag Mail), those messages also display in the Messages list, so make sure that the message you want to use is a Message Designer-type message.

You can confirm this by checking Type in the column chooser below the list to display the Type column in the list.

HTML version notes

When you use the Save as HTML feature for an MD2 message, you are not changing anything about the original message. Instead, you are saving a copy of the message — an HTML version of the original.

Consider the following about the HTML version; it:

is a copy; the original version is preserved and still available in the appropriate list.
cannot be subsequently edited with the standard MD2 designer.
can be edited in the HTML editor only.
is automatically saved to the current folder.
has a message Type of From HTML.

Save as HTML feature notes

The Save as HTML action can be executed multiple times on a single message because each instance creates a copy and preserves the original message.

NOTE: By default, each "save as" operation gives its unique copy of the message the same name,<message_name - HTML>.

If you want multiple, distinct HTML versions of the same message, take care to not overwrite a previously saved HTML version. You can either:

edit a previous HTML version that had retained the default name assignment, <message_name - HTML>, and rename it to ensure that the next copy won't overwrite it; or
take extra care to be sure to give the next copy a unique name.

Generate an HTML version

There are two methods by which to generate an HTML version of a message.

You can create an HTML version of a message right from the "create" step (the From HTML option), as described in Create a "From HTML" Message.
You can save an HTML version of an existing message (the focus of this article) by editing that message, as described below in Save an HTML version.
- The feature is available for any message that you can edit. Messages that are in the In Progress, Sent, and Review statuses are eligible.

Auto-Save notes

By default, messages are automatically saved every 60 seconds. This auto-save temporarily disables the Save button; it is re-enabled when subsequent changes are made.

Any subsequent save actions (automatic or manual) overwrite the previously saved version.
Any errors on the page that prevent a manual save also prevent the scheduled auto-save from occurring.
If you click Save to do a manual save and there are errors, an error message displays.

Save an HTML version

To save an HTML version of a message:

Access the Admin interface.
Navigate to Messages > List.

TIPS: On list pages, click a column header to sort on that column; click again to reverse the sort order. Click the columns count below the list to add and remove columns in the current view.

On the (In Progress, Sent, or Review) Messages list, locate the message that you want to save an HTML version of and either:

- click the hyperlinked name of the message or
- click elsewhere on the row to select the message and click Edit.

TIPS: To keep the current list page open, right-click the hyperlinked name and open the message in a new tab or window.

The message opens in Message Designer.

In the upper right, click the Save as HTML button.
Accept the default of <message_name - HTML> or specify a different name; click Save.

The designer refreshes and opens on the Code tab > HTML sub-tab; this is the HTML editor.

This is where an experienced designer can work directly with the message's unique HTML code.

NOTE: There's also a TEXT subtab which houses the plain-text editor where you can individually edit the text version of your HTML-based message.

The HTML editor

The HTML editor is where you can edit the HTML code that makes up the entire message.

You can customize the message's HTML code in order to apply more complex HTML coding than is possible in Message Designer. The HTML editor accepts and honors all HTML coding, giving you countless customization possibilities.

The HTML editor has two stand-out features:

the HTML editor window, on the left, where you work with the HTML code, and
the Preview panel, on the right, where you review your work.

Preview panel

The panel on the right side of the page offers a preview of the message based on the current HTML code in the editor. This is simply a visual rendering of that code.

The preview does not dynamically update as you work in the editor. You must click the Preview button above the editor to refresh the preview and display your latest changes.

The preview is not dependent on the HTML changes being saved; it displays unsaved changes.

HTML editor

This is where you work with the HTML code. There are management tools above the editor and navigation options right in the window.

HTML editor navigation options

The HTML editor has a few convenient features that facilitate quicker navigation and simplify locating the cursor. The numbers in the following image coincide with the numbers in the table that follows.

Number	Feature	Description / Use
1	Numbered rows	Simplifies remembering where a piece of code is or where a change was made. The highlighted row (row 62 in the image) indicates the current location of the cursor.
2	Overview inset	Provides a very high-level view of the entire editor window. On hover, it highlights the block of rows that currently display in the editor so you can easily determine where you are in relation to the entire window. Click on this view to quickly navigate up and down in the editor.
3	Scroll bars	These standard vertical and horizontal scroll bars are visible only when the cursor clicks or hovers in the editor.
4	Cursor locator	This small indicator in the vertical scroll bar indicates the current location of the cursor.

HTML editor management tools

There are several very useful tools above the HTML window.

The Preview button is described above in Preview panel.
Tidy - click this button to "clean up" your code's formatting. This option is non-operational while enhancements are being explored.

Hyperlink Tool - click this button to generate the "a href" code for your hyperlinks. Refer to Generate link HTML code, below, for information about this option.

Magnifying glass - click this icon to call the "search" field (or click into the editor and press Ctrl+F). It displays at the top of the editor and has several options, such as "match case," "match whole word," "replace," and "replace all." Click the X to close the search field.

Undo and Redo - click these icons (shown above) to "undo" and "redo" actions.
- Repeated clicks will undo or redo a series of actions.
- A manual or automatic save does not interrupt the remembered series.

Generate hyperlink code

This is a time-saving feature that generates properly formed hyperlink code (based on your inputs) that you can copy and then paste into your message. Rather than having to manually input the hyperlink HTML tags, use the "generator" to quickly and easily build a valid hyperlink.

TIP: You can add as many hyperlinks as you want to your message, but do be mindful of how too many links might affect your deliverability. If you want one link to display in several locations in the message, generate the hyperlink code once, copy it, and then work your way through the editor and paste it into those locations.

In the following example, we'll generate a hyperlink to an external web site by using the Web Page type of hyperlink. Your selection in the hyperlink (type) dropdown determines which fields then display.

To learn about the supported hyperlink types, see Hyperlinks in Messages.

To generate a hyperlink:

Click the Hyperlink Tool button to open the link generator.

Accept the default type of Web Page.
In the url field, specify the web address of the site.
Optionally, specify a name for the link. This does not display in the message; it is used for reporting only.
Accept the default (unchecked box) to track "click" activity for this hyperlink; check the box to disable tracking.
Click Generate Hyperlink Markup.

The code for the hyperlink displays on the right side of the page.

Using the hyperlink code

Review the code to confirm that it is as you expect it to be.

Click the Copy Markup button; the hyperlink code is saved to your clipboard.
In the editor, place your cursor where you want to insert the link and press Ctrl+V (Windows) or Command+V (Mac) to paste the code.
Click Preview to review the message and verify the link.

Tips

You can overwrite the default placeholder text, "Your Text Here," as in the image above, or do that later.
If you want to insert several links in your message and/or insert one link in several places in your message, rather than a lot of back-&-forth from the generator to the editor to the generator, consider this time-saving tip!

1. Open a text editor.
2. Create all your links and copy, paste, and save each link in the text editor.
3. Do one pass through the editor during which you insert all your links by retrieving the relevant code from the text editor and pasting it in the preferred location.

Hidden gems

When you're working in the HTML editor, there are a few "hidden gems" that might help you work more quickly.

On-hover helper text

Some of the tag elements and attributes display helper text when you hover on them. For example:

Hover on align to display information about the values and their affect:

Hover on class to display general information and an active link to Mozilla's MDN Web Docs:

Right-click options

Right-click anywhere in the editor to display a menu of helpful options:

For example, right-click and select Command Palette to display a scrollable, popup list of commands with a search field at the top:

TIP: You can click the Undo icon to back out any actions you take.

The following articles describe other message-creation options.

To learn how to create a message in Message Designer, see Create a Message (MD2).
To learn how to create an HTML-based message that bypasses adding Message Content Areas in Message Designer, see Create a "From HTML" Message.
Learn about the benefits of plain-text messages and how to create them in Text Versions of Messages.

Save as HTML