1. Help Center
  2. Create Campaign

Transferring Contentware Emails into your Email Marketing Platform

Contentware provides HTML code for you to use in your email marketing templates. We have provided a series of tutorials based on the most common methods for creating emails.

Styling your HTML within the Contentware application

Contentware allows you to style all elements of the HTML code.  

configurehtml

  1. Go to “My Account” and select the “Configure HTML” tab.
  2. Update the “Email and Image Width” section to fit your HTML template width. It is best to match the size to your template in pixels, so the content remains within the designated body of your email. The Email Width and Image Width should be the same values to avoid any complications.
  3. Update your Headline, Paragraph, Call-to-Action, and Button fonts and font styles to match your branding.
  4. Click “Preview” to view a sample email that includes your changes.
  5. Click “Update Settings” to save your changes.

When you update your email styles, these changes will occur globally across all email promotions.


Answer the question below to find the tutorial best suited for your email marketing platform. 

Do you…

Use a WYSIWYG  email designer

Code your emails using HTML


How to Use Contentware’s HTML Email Content with WYSIWYG Designers

Most Email Marketing Platforms allow users to set up templates that can be reused for campaign content. Though each platform has its own structure and unique way of designing a template, most have WYSIWIG (What You See Is What You Get)  features. 

Answer the question below to find the tutorial best suited for your email marketing platform.

Does your WYSIWYG designer…

Provide the ability to add an "HTML Content Block"

Have a single section editor where there is an HTML code-view?

Have only separate content blocks for images, headlines, text, & button , etc. (no ability to add HTML Blocks or have an HTML code view)?


WYSIWYG Designer with Ability to Add HTML Content Block

Set up your template by adding a header and footer section (if desired), then add an HTML content block in between the two. This is the section where you will paste in the Contentware HTML code.

Screen Shot 2022-09-07 at 12.59.28 PM

Email width: Set the preferred width of your content. Most marketers set email widths to 600 or 720 pixels. This is the width that your emails will show the users within their email clients. You can customize the width of your content in Contentware. See Customize Your Emails in Contentware.

There are two methods for extracting HTML Content from Contentware:

Copy the HTML from a single email promotion
  1. Select the email promotion
  2. Select “Download/Copy” in the email promotion preview window menu.
  3. Select “Copy HTML to clipboard.”
    cw_download_copy-paste-button
  4. Paste the HTML into the Content Block within your email template.

Download a .csv File for Multiple Email Promotions

If you want to first review and approve some or all of your email promotions and then download all HTML for each promotion.

  1. Go to “Campaigns,” select the campaign you want to view, and click “Edit.”
    cw-campaign-calendar
  2. In the calendar view, select the email  you want to get the HTML content
  3. Select “Approve for Export” in the email promotion preview window.
  4. Repeat for EACH email promotion you want to get HTML content
  5. Go to “Promos for Export” and select the promotion. Click “Download.” You can select one or more emails to download
    cw-campaign-export
  6. Open the .csv file downloaded from Contentware.
  7. Find the column labeled “HTML Body.”
    cw_download_html-body-only
  8. Paste the HTML into the Content Block within your email template.

Have a single section editor where there is an HTML code-view

Many email marketing platforms allow you to use a "code view" when preparing and editing your emails. Here's an example of MailChimp's code view:

mc_campaign_text-code-view

Use the editor to create the content of your email, including header and footer information (if desired). Then when ready to insert the Contentware content, switch the editor to "code view" and then insert the Contentware content into the desired spot in the email.

Note: The editor may remove or change some of the formatting Contentware has provided in the body-only HTML. This method is not advised. 

There are two methods for extracting HTML Content from Contentware:

Copy the HTML from a single email promotion

  1. Select the email promotion
  2. Select “Download/Copy” in the email promotion preview window menu.
  3. Select “Copy HTML to clipboard.”
    cw_download_copy-paste-button
  4. Paste the HTML into the code section of the template.

Download a .csv File for Multiple Email Promotions

If you want to first review and approve some or all of your email promotions and then download all HTML for each promotion.

  1. Go to “Campaigns,” select the campaign you want to view, and click “Edit.”
    cw-campaign-calendar
  2. In the calendar view, select the email  you want to get the HTML content
  3. Select “Approve for Export” in the email promotion preview window.
  4. Repeat for EACH email promotion you want to get HTML content
  5. Go to “Promos for Export” and select the promotion. Click “Download.” You can select one or more emails to download
    cw-campaign-export
  6. Open the .csv file downloaded from Contentware.
  7. Find the column labeled “HTML Body.”
  8. Paste the HTML into the code section of the template.

    cw_download_html-body-only

Have only separate content blocks for images, headlines, text, & button , etc. (no ability to add HTML Blocks or have an HTML code view

If your WYSIWYG editor does not have an HTML content block option, or the ability to access the code view, you will need to add blocks for an image, headline, paragraph/text, and button.

Email width: Set the preferred width of your content. Most marketers set email widths to 600 or 720 pixels. This is the width that your emails will show the users within their email clients. You can customize the width of your content in Contentware. See Customize Your Emails in Contentware.



Use the editor to create your email, then you will need to manually add the Contentware content.

  1. Go to “Campaigns,” select the campaign you want to view, and click “Edit.”
  2. In the calendar view, select the email you want to prepare.
    cw-campaign-calendar
  3. Select “Approve for Export” in the email promotion preview window. Repeat for each email promotion.
  4. Go to “Promos for Export” and select the email promotions you want to export, then click “Download.” button

    Screen Shot 2022-08-31 at 7.53.18 AM

  5. cw-campaign-export
  6. Open the .csv file downloaded from Contentware.
  7. Find the column labeled “Image” or “Image With Overlay Text.”
    Screen Shot 2022-08-31 at 7.49.54 AM
  8. Copy the URL for the image from the .csv file and paste it into your browser.

    cw-campaign-manual-headline
  9. Right-click and save the image to your computer.
  10. Upload your saved image to your email marketing platform and place it in the image content block. Note: Don’t forget to add the link to your landing page to the image.
  11. Return to Contentware and the email promotion you are working with.
  12. Copy the headline directly from the promotion preview pane.
  13. Paste the headline into your content block within your email marketing platform.
  14. Repeat this process for the paragraph/text and button.
  15. Customize the button in your email with the editor tools and add the link to your landing page

Navigate Email Marketing Platform Nuances

  1. What if I can’t set my email width? Most clients have a set width that should be adjustable in your settings. If you can’t adjust it, you should be able to find out what the width is and set that value in your Contentware email settings.
  2. What if my email marketing platform doesn’t have an HTML content block available? Contentware allows you to copy/paste text in addition to the code options. You will have to style the text accordingly through your platform tools.
  3. What if I use an HTML editor to prepare my emails but a WYSIWYG tool to edit the HTML? For Contentware’s HTML code to display properly, it is not recommended that you use a WYSIWYG tool to edit the design. Sometimes these tools add additional code and cancel out important styles or other information included in the HTML. Contentware recommends updating the HTML code to reflect your design changes.

 


How to Use Contentware’s Body-Only HTML Email Content with a Full HTML Template

In this tutorial, we’ll show you where to place and/or replace Contentware’s body-only HTML email content within your email template.

Contentware provides body-only content that you can easily copy/paste into your full HTML email template.

Inserting Contentware Content into Your Full HTML Template

If you have designed a branded, full HTML email template, follow the steps below to easily update your email for each promotion.

There are two methods for extracting HTML Content from Contentware:

Copy the HTML from a single email promotion

  1. Select the email promotion
  2. Select “Download/Copy” in the email promotion preview window menu.
  3. Select “Copy HTML to clipboard.”
    cw_download_copy-paste-button
  4. Paste in the HTML 

Download a .csv File for Multiple Email Promotions

If you want to first review and approve some or all of your email promotions and then download all HTML for each promotion.

  1. Go to “Campaigns,” select the campaign you want to view, and click “Edit.”
    cw-campaign-calendar
  2. In the calendar view, select the email  you want to get the HTML content
  3. Select “Approve for Export” in the email promotion preview window.
  4. Repeat for EACH email promotion you want to get HTML content
  5. Go to “Promos for Export” and select the promotion. Click “Download.” You can select one or more emails to download
    cw-campaign-export
  6. Open the .csv file downloaded from Contentware.
  7. Find the column labeled “HTML Body.”
    cw_download_html-body-only

Paste it into your full HTML email template between the header section and the footer. The expanded HTML body looks like this:
html-email-code_body-only


How to Create a Full HTML Email Template

Creating an HTML email template that works across all email marketing platforms, email clients, and web browsers can be challenging. We’ve done the heavy lifting and will show you how to build a template that won’t disappoint.

Contentware provides an HTML body-only export option that you can copy and paste into a pre-built template.

The Full “Bullet Proof” Email Template

Our template has been tested and re-tested across the most popular browsers and email clients.

How-to-Create-an-HTML-Email-Template-for-Your-Contentware-Campaigns-2

Download the Contentware Bullet-Proof Template

Contentware’s 1-column email template has been optimized and tested in most major email clients and marketing platforms. We have added comments to guide you through these sections. They include:

  • Full HTML Code
  • Preview Text
  • Header & Navigation (for branding)
  • Main Image
  • Headline
  • Body & Bullets
  • CTA Content
  • “Bullet-proof” Button
  • Footer (for branding and CANSPAM)

The full template should only be used in your email marketing client if you copy and paste the full HTML into a file, and DO NOT use a WYSIWYG/drag-and-drop editor to create your email campaigns.

HTML Structure

The HTML file requires a specific structure to render correctly in email clients. Each email client has its own rules and regulations for displaying content. This may include alignment, fonts, and general content styling. It’s important to work within the guidelines outlined here to get the best result.

Doctype & <head> Code

The doctype & <head> code sets up your file to display your content to your audience through their email platform. This code is necessary to make sure everything shows properly. Let’s look at the code in our template.

html-structure-head

Line 1 sets the doctype. This tells the email client what type of file this is. 

Note: This specific doctype (XHTML 1.0 Transitional//EN) is essential for creating emails. Many email clients have legacy versions of HTML code rendering capabilities, and this doctype allows them to translate the code into legible content.

Lines 2-3 tell the platform to begin looking at the code. The <html> tag says, “now start reading HTML.” the <head> tag states, “here’s the beginning of the header and information on how this file should be displayed, but there’s nothing here to display.”

Lines 4-14 are calls that tell specific email clients, computer platforms, and devices how to display this file. These calls are important for your email to look properly and bypass some of the normal rules for Outlook, iOS devices, and so on.

Lines 15-17 link your file to Google fonts. Since we are using Google fonts in this email, it is necessary to link your files to the font files Google provides. 

Note: Some clients do not allow additional fonts to display and only recognize web-safe fonts. We’ll talk about that later.

Line 18 closes the header section. It’s telling the client to get ready for actual content.

Setting Up the Email Body

html-structure-body

Line 20 begins the body content with the <body> tag. This is the section that displays the content in the email client. You’ll see we have set the basic styling to tell the client how to display this email. For more information on specific styles, visit https://www.w3schools.com/css/.

For this background, we’ve set the background color to white using the hex color #ffffff. Because this is a style attributed to the main <body> tag, it will be the background color for the entire viewable canvas of the email, not just the content area. Feel free to customize the background color with an appropriate hex color. You can use Googles Hex Color picker to find the hex color codes here: https://g.co/kgs/NDzhDD.

Note: It is best practice to choose a very light color for the email background. Most marketers choose white or a very light grey (#f2f2f2).

Line 21 is the main container for your content within the body area. You can visualize these as nesting boxes. The <body> is the main box that encompasses the entire content area and includes basic styles. In our template, the <div> is a box within the body that determines more-specific styles for our content box. 

Nesting “boxes” gives us more control over how our emails work without creating competing styles that may not render correctly in email clients.

Note: We have included “web-kit” styles that are necessary for displaying your content properly. This is a way to ensure the email client doesn’t enlarge text unnecessarily, so the design of your email renders the way you intend.

Line 22 is where our email content table begins. Tables are 100% necessary for creating HTML emails. You may have heard that using <table> is an antiquated way of designing HTML content. While this is true for websites, it is false for email. If you want your email to display as it has been designed, you must use tables.

In our template, we have set the width of this table to 100%. This tells the client it should stretch the content to 100% of the width. For this template, we do this so we have more control over specific elements and are not limited by space.

Also, you’ll notice border styles within the table tag. Tables are automatically rendered with borders. By setting the border to “0”, we remove them.

LInes 23-24 set up the table to include the visual content of the email in nested form. 

Each <tr> you see represents a row within the table. Each <td> represents a cell within the row of the table. You must include at least one <tr> and one <td> in your HTML nested within a table to display content. 

The <td> tag tells the client to “display this content.” You can also include additional styles to ensure your content shows up with the right color, font, size, etc. For this section, we have included a “center” tag to display this content (the preview text) as centered.

Preview Text

html-email-preview-text

The preview text, between lines 26-30, is the content that shows up as a summary of your email in the email client. When checking your email, you’ll often see a subject line and the preview text of your message. This gives your end user a quick summary of what’s included in the email without having to open it.

When setting up your template, you can change the content for the preview pane by replacing the text located in the <div> tag shown in white in the image. 

Note: When updating the preview text content, do not alter the surrounding styles nor the <div> that follows under the (<!-- Insert…) comment.

Main HTML Body Content

html-email-main-body

It’s almost time to add content! But, before we get to that, we need to tell the email clients how to position it.

Header & Navigation

Our full bullet-proof HTML template includes a header area that you can customize for your brand with a logo and main navigation. 

html-email-header-nav

These sections are designed so you can easily customize the logo, navigation items, fonts, colors, and font sizes.

Line 33 is the nested <div> that begins the main body content section. Here, we’ve determined that the content should be a maximum width of 600 pixels (max-width: 600px). And that the content box should be centered in the canvas with the left/right margin of “auto.” 

Note: You can change the max-width to your preferred pixel size or use a percentage. Most email widths are 600 - 720 pixels. If you set this value to 100%, your image and text may fill up the entire canvas and fail to render as it was originally intended.

Lines 34-35 include the nested <table> and <tbody> we’re using to give our content more specific parameters and email clients more rules to follow to make the presentation as it should be. These tags officially begin our content boxes.

Logo/Brand

html-email-logo

The first section is where you place your logo and/or branding (lines 37-40). Within the code block, you’ll see we have included the background hex color #038A98. You can easily change this value to reflect your brand colors or change it to your main body background color.

Within the <img> tag, you can update the image source (src=”...filename”) to display your logo. Simply copy/paste the URL for your logo into the source filename section. Then, update the “alt” and “title” attributes to your company name. 

Note: Your logo must be hosted on the web. Most email marketing platforms have this hosting feature built-in with a media library, so you can easily find the web address for your logo within your system.

Navigation

html-email-navigation

The navigation is in a nested table within the main body section. These links will help guide your users to different important links on your website. Best practices dictate you should limit the number of links you include to the minimum.

To update these links, locate and change the text between the <a> tags. In our example, this text is “PRODUCT, PRICING, BLOG, CONTACT.”  Then, find the website link within the <a href…> call and copy/paste your website link to the corresponding text.

If you do not want to use the navigation section, delete lines 41-55.

If you wish to add a navigation item, copy line 44 and paste it directly after the closing </td> for that line.

Customizing Your Navigation

In this template, there are some styles you can update to customize your navigation. We recommend you are familiar with HTML and CSS before editing these styles.

  • font-family: this sets the font for your navigation
  • font-size: sets the font size for the navigation items
  • color: sets the font color for the navigation items

You must change these values in each <td> tag to apply them to each item.

Contentware’s Body-Only HTML Content

html-email-code_body-only

When you export your email promotion from Contentware, you get a spreadsheet that contains the body-only HTML for your email. The above code will be structured as it is in this example, with different content.

You can copy the entire body-only HTML content provided by Contentware and replace lines 62-92 in this email template. Then, each time you need to create a new email from your Contentware promotions, you can paste it over this section.

Footer

html-email-footer

The footer section of the full bullet-proof HTML template includes important legal information and CANSPAM, opt-out, and other necessary links. To ensure you do not get labeled as SPAM in your user’s inboxes, this is the minimum that needs to be included. 

In this template, there are some styles you can update to customize your footer. We recommend you are familiar with HTML and CSS before editing these styles.

  • font-family: this sets the font for your footer
  • font-size: sets the font size for the footer items
  • color: sets the font color for the footer items