Building and using HTML Styling Templates

ChurnZero's Styling Templates can transform any email into a branded masterpiece! ChurnZero Admins can build Styling Templates by simply copying their email's HTML code into a new template. Once templates are created, any user can use Styling Templates in Playbooks and their bulk sends from segments.

There are two use cases for Styling Templates: 

1. To add styling around the message content that gets populated later. For example, you could build a template with simply a company-branded header and footer that any ChurnZero user can add to messages they're sending to customers. 
2. To build your entire email using HTML so the branding and message content all exist in your HTML code. This use case is primarily used by customer marketing, product marketing, etc. For example, you might send a monthly customer newsletter with multiple sections and new content every month or a bespoke feature release announcement email with images and links. 

Please note: The ChurnZero team is happy to answer Styling Template functionality questions, but we cannot make recommendations about, or edits to your HTML. If you need to make adjustments to your templates, your own marketing and design teams must make those changes. 

Use case #1: Your HTML template includes only the styling and branding around message content that will be added later.

This use case is purely to enhance the look and feel of your email. The content of your email is drafted separately within the ChurnZero message editor.

Here's what this might look like:

How to build templates for use case #1:

Note: To create Styling Templates, you must have the Admin > System Settings user permission enabled.

1. In the ChurnZero Admin space, go to General > Styling Templates.
2. Click Create at the top right of the screen.
3. Copy the HTML of your template and paste it into the CONTENT box of your new Styling Template.
4. Insert the {{messageContent}} code snippet into your HTML where you want the content from the message editor to be injected. When the email is generated, the content composed in the message editor will take the place of the {{messageContent}} variable within your HTML code.
5. Use MERGE FIELD LOOKUP to find the code snippet for any fields you want to dynamically populate in the branded parts of your email template. With this use case, you will likely add most of your merge fields to the body copy you draft in the message editor. You do not need to add two sets of your merge fields.
6. Click the Send Test Email button to inspect your final product and make HTML adjustments as necessary.
7. Click the Save button to add your template.

Use case #2: Your HTML template contains all of the content you want to include in your email.

In this Styling Template use case, your HTML template includes the entire email: the styling, branding, header/footer, and content of your email lives entirely in your HTML code. Your team would build these emails outside of ChurnZero and then use Plays or Bulk Send to send them via ChurnZero. 

Here's what this might look like:

How to build templates for use case #2:

Note: To create Styling Templates, you must have the Admin > System Settings user permission enabled.

1. In the ChurnZero Admin space, go to General > Styling Templates.
2. Click Create at the top right of the screen.
3. Copy the HTML of your template and paste it into the CONTENT box of your new Styling Template.
4. Insert the message content code snippet below above the final </body> tag in your HTML. 
   Note: This code snippet is different than the snippet used in use case #1. Instead of telling the email to look to the ChurnZero message editor for content, this snippet tells the email to ignore what's in the message editor and use only what is in your template. Any content from the Message Editor will be invisible in the final email.

<!--[if !mso]><!-->
<div style="display:none !important;">{{messageContent}}</div>
<!--<![endif]-->

5. Use MERGE FIELD LOOKUP to find the code snippet for any fields you want to dynamically populate in your email template. Copy the snippet and insert it into your template. 
   Note: While these merge field code snippets look different than the merge fields you're used to seeing in the message editor, they behave exactly the same. 
6. Click the Send Test Email button to inspect your final product and make HTML adjustments as necessary.
7. Click the Save button to add your template.

How to use Styling Templates in your emails

Once you have a Styling Template created, you'll see a new Styling Template dropdown in your Playbook, Survey and Bulk Send editors to choose the template to use in this email.

To build Styling Templates, a user must have the Admin > System Settings user permission enabled.
Any user can use a Global Styling Template once it's been created. No additional permissions needed.

When you build email messages in ChurnZero, you are required to enter content into the body of the email in message editor. 

With use case #1 emails, you will add your email's body content into message editor like you would normally. The body content you enter here will be inserted wherever the {{messageContent}} code snippet lives in your template. 

With use case #2 emails, you are still required to add at least one character of body copy into the message editor. Typing a simple period "." into the body copy will suffice. The distinct code snippet you used in your Styling Template ensures that the body copy you insert into the editor is invisible. 

In both scenarios, ensure you're using the message editor's Send Test Email option to preview your full email before it's sent. Your Styling Templates and content will render in the test email. 

Pro tip: To test any merge fields you added into your HTML, build a contact segment with just your test contact and use Bulk Send to send an email with your new Styling Template.