Building In-App Notifications for Web and Mobile Applications

If you’re a developer building a web or mobile application, you know that there are times when you want to message your users when they’re in the app. It might be information about a new feature, a billing update, or something that requires action from the user. That’s where in-app notifications via an inbox come in. They allow you to deliver key messages directly to your users and can be combined with other notification methods like push and email.

Courier is a development platform for notifications that also offers in-app notification inbox SDKs for web and mobile apps. The Inbox is not only feature rich, but is also integrated with Courier’s full platform, offering complete notification infrastructure and features to help you build the exact notification experience you need, across channels.

This article explores how to use the React SDK (Courier also offers a JavaScript SDK for non-React web apps) and Android SDK to implement versatile in-app notifications for both web and Android applications. Note that Courier also offers an iOS SDK, not discussed in this article. Here’s an example of using the iOS SDK with Next.js to build an Instagram clone… for puppies.

Overcoming in-app notification challenges with Courier

Designing, implementing, and maintaining an effective in-app notification system can be a challenging endeavor, particularly for small teams. The traditional approach calls for significant time and resources, requiring intricate coordination between front-end and back-end elements. This complexity escalates when you add the necessity of personalized targeting, adherence to user preferences, integration with push notifications, sequencing of read status across other platforms and channels, a user-friendly UI, and so on.

Enter Courier, a robust tool designed to streamline the in-app notification process. The tedious task of crafting an intuitive notification interface that’s full featured and aligns with your application’s aesthetics is simplified with Courier’s ready-made, customizable UI.

Additionally, Courier addresses the hurdle of setting up servers and databases to handle notification data, along with the back-end logic, by managing all the back-end processes. It removes the need for you to navigate the intricacies of back-end programming and complex server setups.

In terms of synchronizing the front-end and back-end systems, Courier’s APIs facilitate seamless communication, negating the requirement of creating and implementing intricate APIs yourself. Also, integrating user authentication to manage personalized notifications based on user preferences becomes effortless with Courier.

Finally, ensuring compatibility and synchronizing read status across multiple platforms like web, Android, and iOS is no longer a headache, as Courier coordinates the backend and offers libraries for each platform. This lets you provide a consistent notification experience to all users, regardless of which platform they use.

So, with that said, let’s see just how simple it is to get started with Courier.

In-app notifications for web applications

In this example we’ll look at how to implement an in-app notifications inbox for a web app using the React SDK and we’ll combine that with an implementation of toast notifications, which are small, non-disruptive messages that appear temporarily and disappear after a certain period. Clicking on the toast can take someone directly to a message in the inbox. This way, in-app notifications don't rely on the bell icon alone to alert a user that a new notification is waiting.

Signup for Courier

First things first, you’ll need a Courier account. You can sign up here.

Don’t worry, everything you’re about to use it’s completely free to try. In fact you can send up to 10,000 notifications per month for free.

Install and import the required packages

Start by installing the Courier React Provider and Toast packages.

1
npm install @trycourier/react-provider @trycourier/react-toast @trycourier/react-inbox

Once you’ve installed these packages, import them into your React component if you already have one; otherwise, you can use the basic React example below.

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

Example app

First, build a basic “hello world” React app.

If you haven’t already, then run:

1
npm install @trycourier/react-provider @trycourier/react-toast @trycourier/react-inbox

Next, replace the content of your index.js with the following:

1
import ReactDOM from 'react-dom/client';
2
import { CourierProvider } from "@trycourier/react-provider";
3
import { Toast } from "@trycourier/react-toast";
4
import { Inbox } from "@trycourier/react-inbox";
5

6
function InboxToast() {
7
return (
8

9
<h1>Example of the Courier Toast and Inbox in action</h1>
10
<CourierProvider userId="example_userId" clientKey="your_client_key_goes_here">
11
<Toast />
12
<Inbox />
13
</CourierProvider>
14
</>
15
);
16
}
17

18
const root = ReactDOM.createRoot(document.getElementById('root'));
19
root.render(<InboxToast />);

Remember that CourierProvider provides the context that all Courier components need to function, so you must wrap your root component with it:

1
<CourierProvider userId="user-id" clientKey="client-key">
2
  <YourApp />
3
</CourierProvider>

Replace user-id and client-key with the appropriate values for your application.

From the project root directory, run the following command to start the app.

1
npm start

The Inbox component will be visible straight away as a bell icon. Clicking this will initially show you an empty inbox until you start sending it messages. The toast component is invisible unless you’re receiving a notification.

That’s all there is to it! You’ve set up an in-app notification inbox plus toasts for your web application using the Courier Inbox SDK.

Send a notification to verify that your inbox and toast are working

The fastest way to test this is to send a request to the Courier API using cURL.

Send a request to the Courier API using cURL:

1
curl --request POST \
2
--url https://api.courier.com/send \
3
--header 'Authorization: Bearer <YOUR_API_KEY>' \
4
--header 'Content-Type: application/json' \
5
--data '{
6
    "message": {
7
          "to": {
8
            "user_id":"<YOUR_COURIER_USER_ID>",
9
            "courier":{
10
                  "channel":"<YOUR_CHANNEL>"
11
            }
12
          },
13
          "content": {
14
            "title":"Push up!",
15
            "body":"Hi {{name}}, just testing that the notification displays as a toast."
16
          },
17
          "routing": {
18
            "method":"single",
19
            "channels":["inbox"]
20
          },
21
          "data": {
22
            "name":"<YOUR_NAME>"
23
          }
24
    }
25
}'

Replace <YOUR_API_KEY> with your Courier API key, both instances of <YOUR_COURIER_USER_ID> with your Courier user ID, and <YOUR_NAME> with your name.

Et voilà! Your toast notification will appear!

And you should see your notification in your inbox when you click on the bell icon:

Make sure you have your React app open when sending the request, as toast notifications don’t hang around for long.

To see an example in action that we built, check out this full working demo with both toasts and an inbox.

Next, let’s take a look at the Courier in-app inbox for Android.

In-app notifications inbox for Android

The Courier Android Inbox SDK provides a ready-to-use, customizable notification center for your Android app. It includes an extensive set of properties and functions that enable you to create and manage your in-app notifications.

1. Set up your Android environment

Ensure that you have a compatible Android development environment. This guide assumes you’re using Android Studio. Create a new Android application project if you don’t already have one set up.

2. Include the Courier Android SDK

To use the Courier Inbox, you need to include the Courier Android SDK in your project. Open the build.gradle file of your Android application and add the dependency:

1
implementation 'com.courier:android:1.0.0'

Don’t forget to synchronize the project to ensure the library is downloaded and added to your project correctly.

3. Configure Courier Provider

You will need to set up a Courier Inbox Provider in the Courier app, to link your Courier Inbox to the SDK. Follow the instructions in the Courier documentation to create and configure your Provider.

4. Set up authentication

Courier’s Android SDK requires authentication to ensure secure access to the user’s inbox messages and push notifications. We will cover that here, but you can also look at the GitHub docs.

The SDK manages user credentials across app sessions, meaning that even if the user fully closes and restarts your app, they’ll remain signed in. The key features that require authentication are Courier Inbox, which requires it to view inbox messages that belong to a user, and push notifications, which require it to synchronize push notification device tokens with the current user and Courier.

To handle authentication, place the following code where you usually manage your user’s state:

1
lifecycleScope.launch {
2
    // Saves credentials locally and accesses the Courier API with them
3
    // Uploads push notification device tokens to Courier if needed
4
    Courier.shared.signIn(
5
        accessToken = <YOUR_API_KEY>,
6
        clientKey = <YOUR_CLIENT_KEY>,
7
        userId = <YOUR_COURIER_USER_ID>
8
    )
9
    // Removes the locally saved credentials
10
    // Deletes the user's push notification device tokens in Courier if needed
11
    Courier.shared.signOut()
12
}

The accessToken is your Courier API key, which you need to authenticate requests to the Courier API. You’ll need the clientKey to get Courier Inbox messages for the current user. The userId is the ID of the user you want to read and write to. Replace <YOUR_API_KEY>, <YOUR_CLIENT_KEY>, and <YOUR_COURIER_USER_ID> with your own values.

For more information on how to get production ready, check out Courier’s docs on tokens.

Now that you’ve completed these steps, your application is set up to securely manage user credentials and access Courier services.

5. Create the inbox view

Define the CourierInbox view in your activity’s layout XML file:

1
<com.courier.android.inbox.CourierInbox
2
        android:id="@+id/courierInbox"
3
        android:layout_width="match_parent"
4
        android:layout_height="match_parent"/>

6. Initialize and customize the inbox

In your activity file, find the CourierInbox view and configure it as needed. This is where you can set various listeners and customize the appearance of your inbox. Below is a sample implementation using the default inbox style:

1
val inbox: CourierInbox = view.findViewById(R.id.courierInbox)
2

3
inbox.setOnClickMessageListener { message, index ->
4
    Courier.log(message.toString())
5
    if (message.isRead) message.markAsRead() else message.markAsUnread()
6
}
7

8
inbox.setOnClickActionListener { action, message, index ->
9
    Courier.log(action.toString())
10
}

Remember, the Courier Inbox is highly customizable, allowing you to create an in-app notification center that matches your application’s look and feel. For more detailed documentation, refer to the GitHub page.

7. Test your inbox

You can test this exactly the same way as we suggested you test your inbox in your React app:

Send a request to the Courier API using cURL:

1
curl --request POST \
2
--url https://api.courier.com/send \
3
--header 'Authorization: Bearer <YOUR_API_KEY>' \
4
--header 'Content-Type: application/json' \
5
--data '{
6
    "message": {
7
          "to": {
8
            "user_id":"<YOUR_COURIER_USER_ID>",
9
            "courier":{
10
                  "channel":"<YOUR_CHANNEL>"
11
            }
12
          },
13
          "content": {
14
            "title":"Push up!",
15
            "body":"Hi {{name}}, just testing that the push notification displays as a toast."
16
          },
17
          "routing": {
18
            "method":"single",
19
            "channels":["inbox"]
20
          },
21
          "data": {
22
            "name":"<YOUR_NAME>"
23
          }
24
    }
25
}'

Replace <YOUR_API_KEY> with your Courier API key, both instances of <YOUR_COURIER_USER_ID> with your Courier user ID, and <YOUR_NAME>` with your name.

You should now be able to see your message in your inbox in your Android app.

Conclusion

Implementing a robust, intuitive, and seamless in-app notification system is crucial to enhance user engagement and improve the overall user experience. As we’ve demonstrated, it’s simple to effectively manage the complexities of building such a system with Courier, a comprehensive solution that takes care of the heavy lifting, letting developers focus on creating more value in their applications.

From an easy-to-integrate web application using React toast notifications to a full-fledged Android and iOS in-app notification center, Courier provides all the tools and services you may need. It offers scalable solutions that meet both simple and complex requirements, making it an ideal choice for individual developers and small teams, as well as larger enterprises.

Try it out for yourself, and experience the difference!