This tutorial has four sections:

I. How to use the email template editor
II. How to use the Template Builder
III. How to add widgets to your HTML email template
IV. How to add tokens to your HTML email template
V. How to customize a purchased HTML email template for use in HubSpot
 

Before we get into the nitty gritty of editing the HTML of a template, let's walk through how to use the Template Editor. To access your email templates, go to your Content > Design Center.



 

Then click Template Builder in the side menu.
 

In your template editor, you will see a number of email templates. These are the default email templates available to all HubSpot users. These templates have been designed and tested to maximize email client durability. Getting your emails to look right in the myriad of email clients that are available is very difficult. The default templates take the guesswork out of this for you. If you do not have experience designing email templates, it is highly recommended that you use and/or modify the default templates for your needs.

In addition to being very robust, the default templates allow for a moderate amount of customization without ever touching the HTML code. The default templates will automatically use your default company colors, logos and fonts. Simply set these defaults under Style Options in Email Configuration and all of the default templates with match your company styles.

If you want to go a little further in your customization you can modify an existing email template, by making changes right in the HTML editor. When you're finished making changes, click Save.

Making small changes to the HubSpot templates is great way to learn how to use the template editor without having to worry too much about testing your templates for client compatibility. With the default templates you will always be able to revert back to the base HubSpot version of the template just by clicking Actions > Revert to Original.
 

To create a brand new template, click New File.

Name your new file (make sure to include .html at the end of the file name). Then click Create.

Your new file will then appear in your custom folder, and will automatically be selected, so you can start editing the file.

In order for your new template to be available when creating a new email, you need to set this file as a basic email template. So when you're finished creating your email, click the "Set file as..." dropdown and select Basic Email.

NOTE: Your email must be validated as complying with CAN SPAM rules, otherwise you will see an error when you try to save your template as a Basic Email template. In order for your email to be validated, you must include the following tokens:

1. {{ unsubscribe_link }}, {{ unsubscribe_anchor }} or {{unsubscribe_section }}
2. {{ site_settings.company_street_address_1 }}
3. {{ site_settings.company_city }}
4. {{ site_settings.company_state }}
5. {{ site_settings.company_zip }}

Those items can exist either in the template that a user is saving or in an inherited template.

A preview of your template with sample content will be available for viewing in the bottom left corner of the template editor.

Finally, you'll want to set a thumbnail for your email template so that you or your marketing team can easily choose this template from the full list of templates when creating a new email. Essentially you are just adding an image. One way to add this is by taking a screenshot of the Email Preview as seen in step 4, and save it to your hard drive. You can use a free screenshot software such as Jing to do this. Click the Thumbnail button at the top of the screen.

First click Upload a new image and browse your hard drive for the image. Then select the image and click Use Image.

You can preview your thumbnail by hovering your mouse over the Thumbnail button.

There are a number of shortcuts that can be used to execute commonly used operations. To access the list of shortcuts click Ctrl-/ (PC users) or Command-/ (Mac users).

Widgets are custom fields which appear in the Email Editor for pages which use the template you are editing. These widgets are populated using Jinja tags. You can navigate to our documentation within your template editor.



You can learn more about:

• Syntax - learn about how Jinja tags are structured
• Main body text widgets - see code for specific widget types, including images and text areas
• Social sharing widget - this widget allows recipients to share your email content in social media
• Rich text widget - adds a rich text widget that supports styling HTML default content that can be edited by user

Note: HubSpot will be continuing to develop special widgets to make template building faster and more effective. If you have specific needs please contact support and let them know your needs.

Tokens can be used to pull in default information from your email settings screen or your contacts database. This allows the end user to make changes to these pieces of the template as needed without getting into the HTML. Please refer to our email developer documentation to learn more about:

• Company Information from Settings - you must include these so that your emails are CAN-SPAM compliant
• Style Information from Settings - these will help you create nice-looking emails
• Personalization Tokens - lets you add dynamic content directly into your templates. If you use these, make sure you set default values for each token.

If you'd like to create a new HTML email template but don't want to start from scratch, you can buy HTML email templates online and then customize them for use in HubSpot. ThemeForest has many great HTML email templates for reasonable prices.

You can then configure these themes for use in the HubSpot email tool by switching out default text and images with Jinja tags. This will let you or your marketing team use any theme for future emails and easily switch out text, images, and links, without ever having to touch the HTML.

Upon purchasing an email HTML template, you'll likely need to download a zip file containing the HTML files. Extract this zip file to a folder on your desktop. Then locate the file that includes the HTML of the email theme you'd like to use. Select the entire contents of the HTML code in the file and copy it.

Go to the Template Editor tool and create a new template (as shown in section I.2 of this tutorial). Then paste the HTML into the editor. If you'd prefer to use an HTML editor, such as Sublime Text 2, you may do so, and then copy the code over to the Template Editor when you're finished.

The most common editable elements of any email are its text and images (which can also have associated links).

Text:

For text, only replace the text (not the div, span, etc.). For example:

<div style="line-height:24px;color:#787878">
    {% rich_text "Post 2 Description" label="Post 2 Description" %}
</div>

Images:

For images, replace the whole <img> string. Copy any styling into the tag, comma separated. For example:

{% linked_image "Product Image" label="Product Image", width="264", height="192" %}

Logo:

Enter the following code wherever your site logo would be. This is a conditional statement, so that if your HubSpot CMS pages have a custom header, you'll be able to add your logo as an image to each email.

{% if linked_logo %}
    {{ linked_logo }}
  {% else %}
    {% linked_image "logo" label="Logo", default_src="http://static.hubspot.com/final/img/content/email-template-images/placeholder_200x75.png", target="_blank", align="left" %}
{% endif %}

Code to add to generate email preview:

Used to properly render the initial part of the main body content in email clients that generate preview text.

<img id="hubspot-email-hidden-img" alt="{{ content.body.emailbody|striptags|truncate(100, false) }}" src="http://static.hubspot.com/img/trackers/blank001.gif" style="display: none!important; visibility: hidden; margin: 0px; padding: 0px;" width="1" height="1"/>

Comply with CAN SPAM rules:

Replace the CAN SPAM section of your purchased template (the paragraph that will contain your company name, company address, unsubscribe link, etc. with the following code:

<p style="font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; text-align: center; font-size: 9px; line-height: 1.34em; color: #999; display: block;">&copy;{{ eastern_dt.year }} {{ site_settings.company_name }}&nbsp;&nbsp;{{ site_settings.company_street_address_1 }}&nbsp;{{ site_settings.company_street_address_2 }}&nbsp;{{ site_settings.company_city }}&nbsp;{{ site_settings.company_state }}&nbsp;&nbsp;{{ site_settings.company_zip }}&nbsp;&nbsp;{{ site_settings.company_country }}&nbsp;&nbsp;&nbsp;&nbsp;
<br/>
{{ unsubscribe_section }}.
</p>

When you're finished adding all of the widgets and tokens that you'd like, follow steps I.3, I.4, and I.5 as shown earlier in this tutorial.