Step-by-step guide to customizing the look and feel of your in-app toast and inbox using the Courier Brands Designer.
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 the Brands tab in the Designer, open a brand then select In-App.
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.
Please be sure to include px at the end of your number.
Message Auto-Close Timer
The Message Auto Close Timer 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.
Courier Inbox widgets can be customizable in order to match your brand.
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.
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
Courier's In-App Inbox 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.
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.
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.