Using the Courier In-app Brand Designer

You can customize the look and feel of the Courier in-app toast and inbox using the Brands designer. To get started, go to Designer > Brands, open a brand then select In App.

In App Configuration

Defining your brand colors

If you previously set your brand colors for email, those colors are applied to In app as well. If not, you can define your brand colors in the in-app designer using hex codes.

The Primary color will be used on the bell icon, unread message count and markers, inbox text highlights, action buttons, and the auto close timer bar on toast messages.

The Secondary color will be used as the default inbox background color.

Inbox border radius

You can define the curve on the corners of your inbox using the Inbox Border Radius field. Note: be sure to include px at the end of your number.

Message Auto Close Time

The Message Auto Close Time field sets the amount of time your toast notification will stay open before auto closing.

You can see the auto close timer in action within your Courier workspace when you use the 'Send' tab and receive the toast notification that action triggers.

Widget Position

You can set the launch location of the widget relative to the bell icon. This will allow you to embed the widget in the top, left or right hand navigation bar.

Widget Background

By default, the inbox background is set the the Secondary brand color. You can also set your background to a two color gradient.

If you want to set your background to a solid color that is not the secondary brand color, set both the top and bottom colors in the gradient fields of the Widget Background editor.

Customizing In App Icons

In app uses icons in two places: the bell icon which indicates new messages, and the message icon, which is used in the toast message and inbox.

Bell Icon

The bell icon is customizable. To set a custom bell icon, drag and drop a PNG or JPG file with a width of 25px or more.

Message Icon

The message icon is used on the in app toast and in the inbox. To set a custom message icon, drag and drop a PNG or JPG file with a width of 25px or more.

You can disable the message icon if you don't want it to appear in the toast or inbox by checking the Disable Message Icon box. You cannot disable it in just one of those locations.

Publish changes to set them live

If you make edits to your in app branding or configuration, they will not be reflected in your application until you click publish changes.

Did this answer your question?