Introducing React Toast and Inbox for Notifications That Don’t Suck
We are excited to announce the availability of Courier’s newest provider, Courier Push! We have released Inbox and Toast, two open source React components that exemplify the potential future applications of this feature. With Toast, you can send your user a notification within your web application and Inbox allows you to create an embeddable notification repository so that your user can access all past in-app notifications.
Most importantly, Courier Push allows us the flexibility and customization to do app-to-user communication right. As software users ourselves, we are bombarded with messages constantly, which can...really suck. Yet, notifications are necessary to communicate with users. With Courier Toast and Inbox, developers can support custom notifications for their users’ specificities and communicate through multiple wide-ranging channels while maintaining a single in-app notifications repository. We are particularly excited about all the potential future applications of Courier Push in addition to Toast and Inbox and are looking forward to expanding its uses.
Here at Courier, we want to improve the integration experience for you, the developer, and the notification experience for your customers. We’ve done this with Courier Toast and Inbox.
Courier Toast and Inbox
What is Toast
One of the major tenets of Courier’s product offerings is sending notifications. Receiving them and displaying them in your application is game changing. The ease of implementation makes your job as a developer simple and enables you to build real-time web applications that provide a better user experience for your customers. Your end-users can see customized notifications pop up in your web application through a modular system you can easily customize.
What is Inbox
Alongside Toast messages is a customizable inbox, which is essentially a notification history. This takes the pressure off users to respond immediately, lessening the anxiety around the experience in general. Inside Inbox, a user can:
- Read their messages
- Mark messages as read or unread
- Delete messages
How to Integrate Toast and Inbox in a React App
Let’s walk through how you can integrate Courier Toast and Inbox React Components in a React app. Check out the Courier React Components repository on GitHub.
Step 1: Install CourierProvider
...to handle all of the authentication and integration with the backend.
Step 2: At the top level in your React tree, add something that resembles the following code. The Client Key can be found here and the User Id is the identifier for identifying your user. Note that it will be used later in the API call to courier.
N/B: You can add Toast to the frontend anywhere as long as it’s a child of the CourierProvider.
Step 3: Inbox should be added in the application as a child of CourierProvider, but where you want the Bell icon to display. For this example, we will just put it right next to Toast.
yarn add @trycourier/react-inbox
npm i @trycourier/react-inbox
How to Customize Toast and Inbox
There are two ways to customize your Inbox and Toast. First you can use the
studio to customize your application and the components will automatically update when the brand is published.
The second, you can pass properties right into each component. Each component supports a theme and also supports render properties. Here’s the code for props:
Courier Push opens the doors to perfecting app-to-human communication with its flexibility and potential for customization. Communication is a two-way street that requires not only good messaging, but also a channel and style that works uniquely for a specific type of user using a specific app. With Toast and Inbox, developers can create an effective notifications system that reaches end users when they want, how they want, and the way they want. To learn more, check out the documentation.
We believe that providing contextual notifications from within your app is an opportunity to provide better, more intuitive, and more interesting user experiences. We also believe that if done right, these can take us a long way towards accomplishing our goal of making computer to human communication delightful. This is just the beginning of our investment in solving this problem, so please stay tuned for more.
Check out Inbox and Toast and let us know what you think! Your feedback helps us to continuously improve.
More from Courier
Why Remote Work is Not Here to Stay at Courier
We all spent a year getting used to remote work; now, the big question is how do we transition back to t...
September 16, 2021
The Notifications Strategy that Put Us in the Product Hunt Newsletter
We were able to execute a strategy that helped us rank #5 on launch day and were featured in the Product...
July 15, 2021