Skip to main content

How to Use Brands to Customize Email Notifications

Courier's Brands feature lets you give your email notifications a consistent look and feel for you and your customers.

Brand or White-Label your Email Notifications​

Courier's Brands feature set lets you apply a consistent look and feel to your email notifications. You can also use this feature to white-label email notifications you send on behalf of your customers to their end-user recipients or if you have multiple brands internally.

Courier Brands are also fully API enabled. Developers can get, create, update and delete brands programmatically using our Brands API.

Using Your Default Brand​

Your default brand, along with any custom brand, can be customized and renamed. The default brand cannot be deleted.

Customizing your default brand is important because:

  • Every email notification you create uses the Default Brand unless you manually disable Brands in the Notification settings.
  • If you enable brands on a notification, your Default Brand will be the fallback for any Send API call that does not specify a brand in the user profile.

Creating a New Brand​

  • To create a new brand open the notification Designer, select Brands in the top menu and click New Brand.
  • Giving your Brand an optional brand_id will allow your developers to manage your brand programmatically using the Brands API.

New Brand Modal

New Brand Modal

Setting a Custom Brand as your Default​

To set a custom brand as your default, open the brand settings and click Set As Default.

Brands Settings
Brand Settings Modal

Customizing your Brands​

Use the Notification Designer to customize a Brand​

Using the Notification Designer you can create and customize your Brands in the following ways:

Use a Custom Template to create your brand look​

If you prefer, you can use code to customize your Brand header and footer by selecting the Use Custom Template option in the Brand Designer.

Custom Templates combine the best of both worlds by allowing you to ensure brand consistency using Handlebars and HTML or MJML to customize the header, footer and email body background while using the drag & drop content designer to create the body of the email with content blocks that can be reused across channels.

Brand Custom Template

Customize your Brand Template CSS​

You can customize the <style> element in the <head> section of your Brands using custom templates as well as brands built using the Designer UI. Read more about Courier's CSS Classnames.

Creating Reusable Custom Styling Across Multiple Brands​

Customers who want to use custom styling across multiple whitelabled brands can accomplish this in a couple of ways.

  1. Inheritance: this works if and only if the default brand and the white label brands inheriting its styles are all built using the standard brand type.
  2. CSS and Brand snippets: use this method if you want to share styling across standard and custom brand types.

Inherit Styles​

The standard or brand type lets you edit the Head to define your own custom styles. In addition to the normal CSS class names, you can define the CSS for Courier blocks using Courier's CSS classnames.

Brand Head

Be sure the brand you want to inherit from is listed as your “Default” in the brands list. If not, go to brand settings > set as default.

Brand Default Badge

Use the toggle to inherit the Head for any standard brand style that you want to inherit the Default brand styles.

Inheritance Toggle

CSS and Brand snippets​

Use this method when you want to share custom styles across brands built using both the standard brand design and custom brands (Handlebars & MJML).

  1. Open your default brand and create a brand snippet to contain your reusable CSS styling. You can define the CSS for Courier blocks using Courier's CSS classnames.
caution

Brand snippets in your Default brand can be referenced across all your custom brands as long as the snippet name is unique.

  1. Open your default brand or create a brand in the Courier designer and select one of the Custom Template types:
  • MJML/Handle bars
  • Handle bars
  1. To pull the CSS from your default brand CSS brand snippet into any other brand, insert the css brand snippet variable inside the style tags:
CSS Style Snippet

You can add the snippet referencing your <style> in the head of the brand template wrapped by <style> tags.

<style> 
    {{>css}} 
</style>

Preview your Brand-Enabled Email Notifications​

To preview what your email notification will look like with different brands applied, open the Preview then select the Brand from the Preview Details > Brand menu.

Notification Preview Details

Customizing your brand using variables​

Any brand attribute you can customize in the brand designer UI, you can also set via variables like {{var "brand.social.facebook"}} for example.

Here is the schema for the brand information accessible via variables:

export const getBrandVariables = (
    brand ? : IBrand
): {
    id ? : string;
    colors ? :
        |
        {
            primary: string;
            secondary: string;
            tertiary: string;
        } | {};
    email ? : {
        header: {
            barColor ? : string;
            logo: {
                href ? : string;
                image ? : string;
            };
        };
    };
    social ? : {
        facebook ? : string;
        instagram ? : string;
        linkedin ? : string;
        medium ? : string;
        twitter ? : string;
    };
}

Sending a Branded Email Notification​

  1. The Notification must be brand enabled in the Notification Settings.
  2. Include a Brand ID in the Send API call (if no Brand ID is provided, Courier will send using the Default Brand. See the Send API documentation for details.
Brand Notification Settings

Watch: Courier live: building and sending whitelabel emails via the Brands API.

Logo Dimensions and File Size Limits​

Courier Brands and email template logos should be 140px wide and no larger than 5MB.

  • The defined width for email notification logos is 140px. There is no defined height.
  • The maximum file size is 5MB
  • Courier does not accept SVG uploads for the logo field.
Brand Logo Dimensions
Was this helpful?