Integrate with Pardot Email.

Pardot

Owned by Salesforce, Pardot is a B2B marketing automation service. It offers landing pages and lead generation, but what we are interested in is using its email services.

The good news is that Pardots' template language is one of the simplist out there, so making our email template customisable directly in Pardot is quite straight-forward and can be very flexible.

How to create Pardot email templates

Firstly, lets go through the basics of Pardots' language. Pardot content regions are areas of your email template that Pardot recognises as being editable. You simply tag an element and Pardot does the rest. Anything that isn't tagged as a Pardot content region will be locked down; this is handy to stop areas being edited that should remain consistent from one email to the next.

Pardot content regions we'll cover:

  • Repeatable Sections
  • Removable Sections
  • Editable Content Regions
  • Editable Image Regions
  • Editable Hyperlink Regions

Repeatable and Removable Sections

To give the most customisation to your email template from within Pardots' email editor, you will need sections that can be repeated and removed. This allows the user to create multiple layouts using the same email template.

Add the below tags to a <td>, <tr> or <div> element.

Pardot repeatable tag: pardot-repeatable

Pardot removable tag: pardot-removable

In the Cogentro email template, we make use of these tags by adding them to our section blocks in the opening <tr>. This makes each section within our email repeatable and removable. See the example below:


<!-- // SECTION BLOCK // -->
<tr pardot-repeatable pardot-removable>
    <td align="center" valign="top" class="Section">
        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600" class="SectionBlock" bgcolor="#ffffff" style="width: 600px;" align="center">
            <tr>
                <!-- // CONTENT CONTAINER // -->
                <td class="Section1padding" align="center">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td align="left" valign="top" class="Section1Content Responsive">
                                Email content
                            </td>
                        </tr>
                    </table>
                </td>
                <!-- // CONTENT CONTAINER // -->
            </tr>
        </table>
    </td>
</tr>
<!-- // SECTION BLOCK END // -->

Editable Content Regions

Now that we can duplicate our email section blocks, let's make content within the blocks editable.

Add the below tag to a <td>, or <div> element.

Pardot Content Region: pardot-region

In the Cogentro email template, we make use of this tag by adding it to either the final <td> element (see below), or wrapping the editable content in a <div> within the final<td>. You cannot have content regions inside other content regions, so sometimes wrapping them in a few divs is helpful.


<!-- // SECTION BLOCK // -->
<tr pardot-repeatable pardot-removable>
    <td align="center" valign="top" class="Section">
        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600" class="SectionBlock" bgcolor="#ffffff" style="width: 600px;" align="center">
            <tr>
                <!-- // CONTENT CONTAINER // -->
                <td class="Section1padding" align="center">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td align="left" valign="top" class="Section1Content Responsive" pardot-region>
                                Email content
                            </td>
                        </tr>
                    </table>
                </td>
                <!-- // CONTENT CONTAINER // -->
            </tr>
        </table>
    </td>
</tr>
<!-- // SECTION BLOCK END // -->

Editable Image Regions

Let's, make images changable in Pardot.

Add the below tag to an <img> element.

Pardot Image Region: pardot-region="pardot_image"

<img src="image.jpg" width="600" height="200" style="width: 600px; height: 200px;" alt="A beautiful description" class="MobileImg" pardot-region="pardot_image"/>

Hyperlink Regions

At some point in your email you'll have a hyperlink. Make this editable in Pardot by adding a tag.

Add the below tag to an <a> element.

Pardot Hyperlink Region: pardot-region="editable-link" pardot-region-type="link"

<a href="http://www.cogentro.com" pardot-region="editable-link" pardot-region-type="link">READ MORE</a>

Other useful Pardot content

To complete your email there a few other things to consider listed below in this handy checklist:

Unsubcribe Link
Make sure the unsubcribe link is compatible by using the following:

<a href="%%unsubscribe%%">Unsubcribe</a>

View email online Link
To create a Pardot view in browser hyperlink, at this to your code:

<a href="%%view_online%%">Read Online</a>

Other variable tags
A useful list of all variable tags can be found on Pardot's documentation website here.

Avoid Background Images
Background images suport isn't included in the template editor. You can always manually add it to the HTML code, which is fine, but isn't great for templates being built for non-coders.