Create an email in content builder (classic)

To create an email in the content builder, follow these steps:

1. Go to Email > Email campaigns.
2. Click New classic email.
3. Select a layout.
4. Design your email in the WYSIWYG editor.

You can easily switch between the HTML editor or the text editor. Your styled content, such as images and fonts with color, can be copied and pasted directly into the content builder, either from your own designs in another CMS or from Excel. If you want to reuse content, you can save your designs in our asset library. To copy styled content from Microsoft Word, use the Paste from Word option in the editor toolbar to remove any Microsoft code that might cause issues in the email. We recommend that you do not copy content directly from the web or from email clients. If you do use this content, be sure to test the email thoroughly.

Toggle between the Editor view and the Preview and Manage View to preview your email. This shows you how your final email will look to contacts. The preview is updated automatically when you make changes, and you can switch between different device-specific views as well, like desktop and tablet. From Preview and Manage, you'll be able to test your email and all the content you've included.

Did you know? If you're leveraging APIs, you can use the SaveMailing API to update the HTML and text.

HTML editor

In the HTML editor, you can design your email either in a design view or in a source view. You can also import HTML from an external editor. Here's how:

1. Click Email campaigns > New classic email.
2. Select a blank template. Click Open.
3. In the editor, select Import HTML.
4. Select the option you want to use to import the HTML. You can either import a ZIP file that contains all of the images and HTML pages or you can import HTML and manually assign links to each image. Importing a ZIP file is recommended.
• The ZIP file name can't contain unsupported characters, such as: & ; , $
• The HTML file in the ZIP file must use a lowercase extension, for example, content.html.
5. Click Next.
6. Browse to select the file to import.
7. If you chose the manual import option, assign the image links.
8. Save your email. If you re-import the HTML manually before saving the email, the links that you assigned in the previous import are not saved.

Go to HTML quick reference for email for more information.

Note: It's a best practice to include both an HTML and a text body in your email.

Import HTML into the content builder on a Mac

In the content builder, you can import zip files containing only your HTML and image files. If you upload a zip file that contains anything else, you’ll see an error.

On a Mac, use the Zip command in the Terminal application to compress your HTML and images.

Let's say you have a folder on your desktop named HTML_images. Inside that folder is your HTML file along with a few image files.

1. On a Mac, open the Terminal.
2. Navigate to the folder where your HTML file is stored. For example, enter the following command: cd Desktop/HTML_images
3. Compress the folder by entering the following command:

   zip -r
   name.zip . -x ".*" -x "__MACOSX" -x ".DS_Store"

   where name is the name of your final compressed file. For example,

   zip -r HTML_images.zip . -x ".*" -x "__MACOSX" -x ".DS_Store"

You now have a zip file named HTML_images.zip in the Desktop/HTML_images folder that contains your HTML file and image files.

HTML validation

Use HTML code validation to catch problems before you begin testing your code in email clients. A large percentage of rendering issues are caused by improper HTML syntax and bad coding practices. The World Wide Web Consortium offers a free resource for validating your code at http://validator.w3.org. Paste your code directly into the form field on the Validate by Direct Input tab and instantly see how your code does. You can safely ignore errors that flag proprietary code that is used.

Gmail annotations

Google has added annotation support for emails that appear in the Promotions tab of the Gmail app. This means that your promotional emails have more opportunities to make an impression beyond the subject and preheader. You can highlight incentives, share key information from your message, and set yourself apart in a crowded inbox.

Use the following snippet for your email. You can customize it and paste it into the HTML editor.

<!--Google promotions via Schema.org microdata-->
<div itemscope itemtype="http://schema.org/Organization">
  <meta itemprop="logo" content="https://acoustic.com/social-icon.jpg"/>
</div>
<div itemscope itemtype="http://schema.org/EmailMessage">
  <meta itemprop="subjectLine" content="Last chance at this price"/>
</div>
<div itemscope itemtype="http://schema.org/DiscountOffer">
  <meta itemprop="description" content="50% off"/>
  <meta itemprop="discountCode" content="BRILLIANT"/>
  <meta itemprop="availabilityStarts" content="2021-03-01T08:00:00-05:00"/>
  <meta itemprop="availabilityEnds" content="2021-03-17T23:59:59-05:00"/>
</div>
<div itemscope itemtype="http://schema.org/PromotionCard">
  <meta itemprop="image" content="https://acoustic.com/logo.png"/>
</div>

Once you have your snippet ready, test it with Google using their preview tool to confirm that it's showing the right information. Then, you're all set to add it to your email.

Attach files to your email

You can include a link to non-image files, such as .PDF and .ICS files, that are stored your asset library. Use the File download link to attach files from the asset library to your email. 

1. In the email, highlight the text.
2. Click the Edit/Insert button.
3. On the hyperlink links tab, click the Link Properties and select file download as the link type.
4. Click the Select File button and choose a file.
5. Name the link and Save.

Note: The single mailing report will not track a download embedded in the email without additional settings. To make sure that your attachments are tracked, complete the following steps. In your email, go to Advanced Settings and clear the Embedded in Mailing option.

Preview and manage your email

Earlier, we briefly mentioned the Preview and Manage View in the content builder - that's where you can instantly preview your email across devices, manage your hyperlinks, and access advanced settings like adding dynamic content rules (Rulesets) and attachments.

Check email health to avoid the spam folder

One of the easiest ways to avoid the spam folder is to check your email's health. To view the spam score, errors, and warnings for the email, click the Check email health icon in the preview pane. The system analyzes the email and runs a spam check. It displays a summary of any warnings and errors. Click the drop-down arrow to expand each section to see a list of warnings and errors. If you have more that one dynamic content block, the spam score is specific to the previewed content. This value can be different for each dynamic content block, so make sure that you check each one.

Preview personalization, dynamic content, and relational table data

To preview personalized content, click the Test with contact icon in the preview pane. The contact is used to populate values for personalization, dynamic content, and relational table data. After you provide a valid contact, the contact's information is used to populate personalized content, relational table content, and dynamic content.

To view dynamic content without providing a contact, click the Preview dynamic content icon in the preview pane. Select the rule from the drop-down list, then refresh to see the selected rule that is applied in the email. If a test contact was previously entered and not cleared, it is honored for personalization and relational table values.

Test your email

After you are sure that your message is coded properly, it’s time to start testing. Unlike a website where an error can be corrected, an email cannot be taken back after you send it. Before you send an email to a large database or contact list, you can create a test email to deliver to a small number of selected contacts for review. Or you can send the email to a segment or query to test the response. When you open the test email page, the fields are populated from the selected email template. However, the following fields can be overwritten:

• Subject line
• Email name
• Test address settings
• Test email bodies
• Tags

If a test send fails due to a validation error, those errors display in a fixed view at the top of the screen. You can manually close the error by clicking Dismiss. If you navigate to a different page, the error automatically disappears.

Note: Make sure to calculate your query before you select it as a contact source for the normal test, or it will not be honored by the test send maximums set in your subscription’s Email Settings.

1. Send the test email to one or more individual email addresses or to a contact source.
2. Verify the subject line.
3. Verify the email name.
4. Select the test address settings.
5. Select options for contact source personalization testing.
6. Test the email body options.
7. Send the email now.

After you send a test email, the number that follows the name of the email, in the name column, is an indication of how many different versions were sent.

The first test email has no number after the name, the second has (1) after the name, and the third has (2) after the name, etc. The Contact Source (or the Contacts column in the Single Mailing Reports) shows a number in parentheses that refers to the number of recipients. If you send a test email to four individual email addresses, then the number after Individuals is (4).

Tip: For testing purposes only, you can append +abc, or other discriminating values to your existing Gmail address and receive multiple emails in the same inbox. For example, use youremail@gmail.com and youremail+123@gmail.com and both messages will be delivered to your inbox.

Error: You need to fix these items before you can send your email: An unexpected error occurs

If you see this message during a test send, this typically means an element is missing from your share-to-social link. Make sure your HTML code includes the URL and the link name. Also, if you see xt="SPSNCLICK", it must be paired with xtsn="...". Check every share-to-social type link and make sure that it is set up correctly. See the full list of social networks Campaign supports and corresponding xtsn value.

Troubleshoot

The content builder screen is missing icons

If the Split Screen icon does not appear or you are unable to access the Edit Hyperlinks tab in content builder, change your browser zoom settings. Zoom options are accessible under the browser's View menu for both PC and Mac.

In Windows™ change the zoom in (CTRL and +), zoom out (CTRL and -), or zoom reset (CTRL and 0) browser settings.

On a Mac use the key combination of Cmd = to increase text size. To reduce text size, use Cmd -.

The content builder is missing the split view option

If the content builder email shows only the Editor view and the Preview and Manage view and the editor and preview are not available on the same screen it usually means your screen resolution is not high enough or you need a lower browser zoom to see the Split View option.

I can't center align an image

If you are in the content builder and you can't center-align an image because the icon is grayed out. You can still center your image by doing one of the following actions:

• Center the cursor before you upload the image.
• If the image is in place, select the image as normal. Then, press the left arrow key on your keyboard once. The Center icon is now available to center your image.

I can't see the text I typed in the WYSIWYG editor

Check the text font color. If the font color used for text closely matches the color of the text background, the text might not be visible. Switch to source view to locate your text and edit either the background or text color settings.

The WYSIWYG viewer added links to images located in one cell

Multiple images within a single table cell might also have problems with links. We recommend that you do not place two or more images in a single table cell. Many email clients do not properly position multiple images contained within a single cell.

Unable to scroll to the bottom of the email in design view

The cause of this issue is usually due to the presence of a style sheet within the source code. Some style sheet aspects can interfere with the display. Remove the style sheet to see whether scrolling works. If it does, examine your style sheet code to see whether it would work better as inline style.

Error: More than one HTML file in the zip file. Please attach only one HTML file in the zip file

Double-check that when you prepare your HTML for import that it only contains HTML and image files. If you see this message it could be because when a file is compressed on a Mac computer, a special Mac OS X related file is added to the compressed file. This Mac file is not visible when you open the compressed file on a Mac computer. If you open that same compressed file on a PC, the special Mac file is visible, which you can delete.

Tip: If you are on a Mac computer, you need a third-party compression tool. Campaign does not recommend or specifically endorse any one product, nor do we assume responsibility for or provide support for other products. However, Keka and Yemu Zip are third-party Mac compatible compression programs that allow you to either see the extra file or set the default option to not create it.

Error: This file is invalid for use as the following: Certificate Trust List

If you see this error after you export an email and attempt to open the .stl file, you should still be able to import the file without any issues. Go to Email campaigns, select Import > Browse and select the .stl file. Optionally, you can give the template a new name and select a contact source. Save the file in a shared or private folder and click OK.

Extra code is added into your email

After you import an email, you see that new code is added in the head tags and Cascading Style Sheet (CSS). The code also includes random characters and dimensions for background images. This code repeats several times in the template and does not exist in the original HTML file.

.gr-btn-hover-menu_referral
.gr-btn-hover-menu_line.gr-btn-hover-menu_line-referral:before

The Chrome plug-in called Grammarly inserts this code. To get rid of this code, disable the plug-in and then re-import your HTML code. You can also perform the import from an Incognito Mode window, which disables all plug-ins.