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.
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.
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:
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
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.
By organizing internal hackathons in your company, your employees can challenge and compete to solve int...
January 13, 2022
We are excited to announce that Courier now integrates easily with Segment, the leading customer data pl...
December 08, 2021