Email Layouts

Email layouts allow you to create reusable HTML for styling everything around the main content in an email. They allow you to have full control over the branding of all emails sent from the BrandChamp platform.

When an email is sent using a layout, the main content area of the email (represented by the {{CONTENT}} token - see below) is dynamically replaced.

The design of an email layout should be very generic and should never include text in the layout itself that relates to a particular email type or purpose. It should only include basic branding elements to surround the main email content, such as your company name and logo above the main content and a footer with company info and required unsubscribe link below.

When is an email layout used?

Custom Emails

An email layout is used whenever you send a custom email unless you choose to import custom HTML. If you import HTML, that exact HTML is used to send the email and layouts are ignored.

For example, when composing a new custom email you can change which layout will be used when sending that email:

However, if you click the "Import HTML email" button at the bottom of a custom email, you will no longer see the option to choose a layout as the provided HTML will be used to fully render that email instead:

System Emails

By default, a single email layout is used when sending all automated notification emails from the BrandChamp platform. However you can override the HTML used for each of the system emails shown in the Emails -> System Emails area.

For more details on how to see which layout is used for system emails and how to change it, see our article on customizing how system emails look.

Included Layouts

You can find layouts in the Emails -> Layouts area. We provide a few pre-built layouts when you first start using your account. Click on each layout to see the details.

These included layouts are well tested and are readonly to prevent accidental breakage but you can view each one and click the Copy button below the HTML to copy the content and use it to create your own customized layout if desired.

Layouts control everything around the main email content, as shown below (Red box added to demonstrate the email content area)

Test Content

Click on the "Test Content" tab to see the dummy text used to preview how the layout will look. Edit the text and notice how the content area in the preview updates.

When using the layout to send a custom or system email, the content will be replaced with the actual content from those emails.

If you are creating your own layout, we'll expect the same behaviour so see below for details on how to correctly create your own layout.

Creating Your Own Layout

Click the "Add Layout" button in the Layouts area:

You will start out with some simple, but valid, HTML to demonstrate a few key components to layouts:

Any layout must include the following mandatory replacement tokens:

{{CONTENT}}
- this token gets replaced with the actual email content
{{UNSUBSCRIBE-LINK}}
- We require that all emails sent have an unsubscribe link for legal reasons and to avoid people marking your emails as spam. This token inserts the "unsubscribe" link seen in the preview

It's also encouraged to include the {{UNSUBSCRIBE-PREFERENCES-LINK}} token as shown in the starting HTML. That provides the "notification preferences" link.

Tip: You can temporarily remove tokens to see what effect they have on the email in the preview pane.

Next Steps

The initial layout HTML provided is only meant as a guideline to the basic structure needed, so the next steps are:

Create or reuse a nice looking HTML email
Copy and paste the HTML into your layout
Remove any unnecessary tokens or content left over from the external source
Add the required replacement tokens described above
Test! When creating a new layout, you should always send yourself a test email to confirm how it looks in a real email inbox

These steps are described in more detail below.

Create HTML email

You create the HTML for the email layout in an external tool purpose built for building correctly formatted HTML emails. See our HTML email resources article for some suggestions if needed.

Don't focus on adding much content to the email, as we'll be replacing all of that with our own. Just ensure there's a recognisable sentence or paragraph of text that you can find in the exported HTML and replace with our {{CONTENT}} token later.

Import HTML

Once you have a template chosen or exported it from a tool, you can copy and paste the HTML into the HTML text area of your layout. You will see the preview update.

However the preview will still be showing all of the email text that was in the HTML when you imported it, and not the dummy content from the "Test Content" tab (the text that starts with "Hi Jane, ...."). We'll need to ensure we see our dummy content being output as that's how we will replace the content when sending a custom or system email. The next section shows how.

Remove unnecessary content

Remove original email text

You'll need to search through the HTML to find the area where the replacement content should go. So if your imported email content starts with "Hi there,", search for that.

You'll need to ensure that any edits you make result in valid HTML otherwise you could easily end up with broken looking emails, and if you're using this layout for all future emails, you'll want to get this right! So it's best to work through this with someone technical on your team. If you get stuck at this point, reach out to us via your customer success representative or via support@brandchamp and we'll be happy to help out with inserting the required tokens into your provided HTML.

Once you have identified the HTML elements containing all of the original email content, delete them and replace with the {{CONTENT}} token. You should now see the preview update and show the dummy content you saw when first creating a new layout. It should start with "Hi Jane...".

Ensure you haven't left any other text in the HTML. For example, don't leave a "Thanks" at the end of the email in the HTML itself. All of that will be added when you create a custom email or when a system email is sent.

Remove tokens or merge tags from external tools

If you are exporting HTML from a tool such as MailChimp, it will probably include their own version of our replacement tokens for things such as unsubscribe links. You'll need to strip out the leftover tokens from those tools.

For example, MailChimp will generally include the *|UNSUB|* merge tag, which you will need to remove and replace with our own own {{UNSUBSCRIBE-LINK}} token. Remove any other merge tags you find.

Add mandatory tokens

Content token

If you followed the steps above, you should have already added the {{CONTENT}} token. If not, add that token wherever the main email content should go.

You should now see the preview update with the dummy content from the "Test Content" tab. Updating the text in the "Test Content" tab should update all the main email content in the preview.

Unsubscribe link

You must include the {{UNSUBSCRIBE-LINK}} token in the footer of the email. That will render a link with the text "unsubscribe". If you wish to customize, you can add the token in the following format {{UNSUBSCRIBE-LINK "unsubscribe"}} and edit the text within the quotes.

It's also recommended to add the optional {{UNSUBSCRIBE-PREFERENCES-LINK}} token which adds a "notification preferences" link and can be customized similar to the unsubscribe link.

Sample HTML

Here is some example HTML that will show the company address and unsubscribe links at the end of email. Included it before the closing </body> tag in the email HTML:

    <div style="text-align: center">
        <small style="color: #888">
          {{COMPANY-ADDRESS}}
        </small>
        <br>
        <small class="unsubscribe-links">
          {{UNSUBSCRIBE-LINK "unsubscribe"}} | {{UNSUBSCRIBE-PREFERENCES-LINK "notification preferences"}}
        </small>
    </div>

If you wish to use the same gray color (#888) for the unsubscribe links, you will need to add a <style> element inside the <head> area of the HTML document with the following content:

<style type="text/css">
    .unsubscribe-links a {
        color: #888;
    }
</style>

Test

Once the preview of your layout looks good, save any changes and then compose an email draft. Don't send it to any BrandChamps. Just make sure you select the new layout you just created and then use the "Test" button up top of page to send yourself a test email. Verify that the email looks correct in your email inbox.