New Courier Inbox: Add a full-featured notification center to your app in minutes

Email and SMS are becoming increasingly busy channels. Sometimes, there’s no better way to reach a user than by sending a message to a notification center right inside of your app. However, building an inbox experience like this, from scratch, was a significant engineering effort.

Today, we are announcing a major update to Courier Inbox, a solution for developers to add an in-app notification center to their web application in a matter of minutes.

If you’re using the previous version of Inbox, we’ll cover the upgrade steps later in this post.

With Courier, we added a beautiful inbox and in-app push notifications in a matter of weeks. We used the great looking pre-built component to save even more time. Notifications are not our core competency, so it made complete sense to integrate rather than build out and support our own implementation.

James Pipe, VP of Product, DroneDeploy

What is Inbox?

Courier Inbox is an in-app notification center for web applications (and mobile inbox coming soon). Inbox acts as a convenient in-app notification feed with a clean interface where users can view notifications in real time directly inside your web app. It also lets them view their message history of all past notifications that you’ve sent to them.

Using in-app notifications allows you to get users’ attention when they are in the application. This makes your communication with your users more timely and convenient: instead of interrupting them with an email on their phone when they are busy doing something else, you can use an in-app notification to provide information that is relevant to what your users are trying to do right now. Showing notifications within your web application increases user engagement — and provides a more seamless experience, as you can link users directly to relevant parts of the web app within these notifications.

While many companies are considering building notifications into their web app, not everyone has the time or resources to build a full-fledged notification center. We first implemented Inbox two years ago together with the web-based pop-up notification functionality, and customers loved it exactly because it takes so little time to start using it.

The notifications that customers send via Inbox may include application activity such as discussions, new events, comments, alerts, and reminders, as well as news about feature updates.

Based on customer feedback, we’re excited to announce improvements to the Inbox functionality. Meet the new Inbox.

Introducing the new Inbox

The new Inbox has all the benefits of the original Inbox: it’s fast to implement via pre-built Courier JavaScript components, it offers an intuitive user experience, the design is customizable to your needs, and it natively integrates with the rest of the Courier platform. On top of that, Inbox includes a number of improvements, in terms of both design and functionality.

On the design side, we took customer feedback on board and simplified how the inbox looks and feels. Specifically, here’s what changed:

1. Visually, the inbox now looks more modern so that it fits better into customer apps.
2. There are no more separate tabs for read and unread messages — this separation into tabs previously led to confusion. Now everything is displayed more clearly in a single feed.
3. Hovering over a message now shows a check mark or cross to mark a message as read or unread, instead of a vertical three-dot menu taking up screen real estate.
4. Unread messages are identified by a colorful logo (vs. gray for unread), and the colors are customizable. A colored dot appears at the top showing how many unread messages there are in the inbox.
5. Hovering over a message makes the background of that message change color if it is clickable. Short messages where all the text can be viewed at a glance are not clickable and don't change color on hover.

Notification state is now synchronized between the inbox and other channels. For example, if a notification was sent as in-app and email, reading the email will mark the in-app notification as read.

Another new feature is message expiration. It’s now possible to set a timeline for the message to expire, say 7 days, and after that time the message will be removed from the inbox. This feature can help avoid a mess of older notifications for users that rarely sign into the web app.

The advanced branding options, including applying brand settings (we cover this below) and removing the Courier logo, as well as message retention are available on our Developer and Business tiers.

How to build an inbox

Let’s have a look at how you can integrate Inbox into your product.

The fastest option is to use our pre-built JavaScript components. The components can be used with React but are also suitable for vanilla JS projects if you don’t currently use React. Courier customers like using pre-built components because of how little work and time it takes to start using them and begin delivering customer value.

Here’s more detail about how we built the components, if you’re interested in the backstory.

Here are the steps you need to follow if you choose to integrate pre-built components into your front-end application.

Step 1: Authentication and state management. The aspect of connecting to the Courier API and authenticating users is taken care of by the Courier React provider. You can add it to your project as follows:

1
yarn add @trycourier/react-provider or npm i @trycourier/react-provider

Step 2: Add the Inbox UI component. Here’s the command you can use:

1
yarn add @trycourier/react-inbox or npm i @trycourier/react-inbox

Step 3: Use the Inbox component with the Provider in your app. Here’s a short example of the exact syntax:

1
import { CourierProvider } from "@trycourier/react-provider";
2
import { Inbox } from "@trycourier/react-inbox";
3

4
const MyApp = ({ children }) => {
5
  return (
6
    <CourierProvider clientKey={CLIENT_KEY} userId={USER_ID}>
7
      <Inbox/>
8
      {children}
9
    </CourierProvider>
10
  );
11
};

You can use the resulting inbox as-is, or you can customize its design and functionality to match your needs.

If you’re not using React, you can embed the Inbox components using a tag on your page. You will find more info about embedding Inbox with a tag in the Embedded Integration section of our documentation.

Customize your inbox

Once you’ve installed the Inbox components, adjust the look and feel of the inbox using the brand options settings in the Courier app. Create a brand or use an existing brand, and within this brand’s settings, click on the “In-app” tab to make style changes to your inbox. You can then configure the brand for your Inbox component using the component’s Brand prop. (The Brands tab in the Designer area inside the Courier interface where you can choose the brand to customize) (The In-App tab under Brand settings with customization options for the inbox component)

We offer hooks that you can use to listen to or intercept messages that are about to be shown in the inbox. So if you’d like to filter or modify the messages before displaying them in the inbox, you can take advantage of this customization. You can also use hooks to update the state of other elements on the page in response to a new message arriving.

As Courier is written in React, you can make use of Render Props for extra customization options. Render Props is a React technique that can be used to override the properties of any of the subcomponents of Inbox — including the header, footer, icon, and bell logo. It’s also possible to add custom labels and timestamps to the inbox messages.

For current Inbox users: upgrading to Inbox 2.0

If you are already using a pre-2.0 version of Courier’s pre-built components, upgrading to Inbox 2.0 will be as easy as updating the version of the React package. Depending on the level of customization you’ve applied to the inbox, you might need to re-adjust the styles for the new inbox to look good, but in almost all cases changes won’t be necessary.

We recommend upgrading in staging first and going through testing, before a production upgrade.

Get started with Inbox today

To get started with Inbox, check out the detailed Inbox documentation.