Composing an email with custom HTML

This article focuses on how to compose an email using HTML you have created outside the BrandChamp platform and wish to import in order to have full control over the styling of an individual email.

Normally we recommend using our built-in email layout (or a layout you have created yourself) and simply edit the body of the email using our editor. For details on how to take that approach, see our composing an email article.

Importing custom HTML

Click the Compose button in the Emails area:

Scroll to the bottom of page and click the "Import HTML" button below the Body form field:

The Body field will change to the Html field shown below and you will start out with some simple, but valid, HTML to demonstrate the minimum requirements needed:

Every email sent must include the {{UNSUBSCRIBE-LINK}} token 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 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 the "Html" field
Remove any unnecessary tokens or content left over from the external source
Add the required replacement tokens described above
Test! When creating a new HTML email, 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 in an external tool purpose built for building correctly formatted HTML emails. See our HTML email resources article for some suggestions if needed.

Paste in HTML

Once you have an email template chosen or an HTML exported from an email tool, you can copy and paste it into the "Html" field. You will see the preview update.

Remove unnecessary content

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

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 email looks good, make sure to send yourself a test email using the "Test" button up the top of page. Verify that the email looks correct in your email inbox.