donnie-headshot

Donnie Wang

📣 __Join the conversation on [Product Hunt](https://www.producthunt.com/posts/courier-inbox-inapp-notification-center/) where we're discussing this groundbreaking launch and the future of in-app notifications.__

<a href="https://www.producthunt.com/posts/courier-inbox-inapp-notification-center?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-courier&#0045;inbox&#0045;inapp&#0045;notification&#0045;center" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=397476&theme=light" alt="Courier&#0032;Inbox&#0058;&#0032;InApp&#0032;Notification&#0032;Center - A&#0032;drop&#0045;in&#0032;notification&#0032;center&#0032;for&#0032;your&#0032;web&#0032;and&#0032;mobile&#0032;apps | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>

A notification center inside of web and mobile apps is now an expectation. It’s a way to reach specific audiences or users with tailored messages and a way to boost engagement by bringing people back into the app. 

While Courier has been adding Inbox capabilities over the last couple years, we’re excited to announce a complete set of SDKs that span web and mobile. You can drop in a full-featured inbox to give your users a best-in-class notification center inside your app that works seamlessly with your existing notification flows.

<iframe width="560" height="315" src="https://www.youtube.com/embed/12YeYSzxLw4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Here are just a few features of Courier Inbox:
- __All the code needed__ to build custom notification lists that show new messages when they arrive in real time.
- __Prebuilt-UI__ that allows you to add a notification center to your app in minutes rather than months.
- __API, event or manually triggered notifications__ to your user’s inbox, or using inbox as one step in a multichannel sequence that includes email, Slack, or any channel.
- __Synchronization of message status__ across web and mobile inboxes, as well as other channels used like email and SMS.
- __User notification preferences__ to offer more control to your users over what notifications they receive from your app and which channels work best for them.

To see the full set of features for Courier Inbox, head to [the docs](https://www.courier.com/docs/inbox/). Or, if you’d like to see an example of what you can build with Courier, check out our Instagram-inspired IOS app, [Puppygram](https://www.courier.com/blog/introducing-puppygram-powered-by-courier-inbox-next-js-and-inngest) or see how inbox is used at [LaunchDarkly, DroneDeploy, and Oyster HR](https://www.courier.com/blog/courier-inbox-complete-notification-center-web-mobile/#real-world-examples).

![inbox UI](//images.ctfassets.net/z7iqk1q8njt4/5TOVXtSVaIFCcad0L9i6QC/8f969b15380189effd777c71eeb4a88f/inbox_UI.gif)

## Options to build with Courier Inbox
Previously, it was only feasible for large engineering teams to pull off a full-fledged notification inbox. Smaller teams often found themselves strained by the sheer scope of the project. Besides the engineering challenges, the design and user interface for the notification inbox also required thoughtful attention. Even though standard patterns exist in popular apps, like Instagram and Amazon, there's pressure to deliver a user-friendly experience that’s on-brand and doesn’t compromise the aesthetic integrity of the overall application.

This was an important driver for Courier Inbox. We wanted to make sure we offered complete SDKs for web, Android and IOS, where a developer has access to the development tools and UI components so that the frontend is as well designed as the backend. Courier also offers [customizable branding design options](https://www.courier.com/docs/courier-designer/brands/how-to-brand-inbox-toast/), to match your inbox to your application's look and feel.

Whether you're looking for a fully hosted implementation that requires minimal configuration or a composable, headless offering that you can tailor to your specific needs, Courier has got you covered.

## Real-world examples
### DroneDeploy
As a leader in drone mapping software, [DroneDeploy](https://www.dronedeploy.com/) offers services that capture interior and exterior visual data of a construction project or other environment, managing drone fleets for site documentation and analysis.

> 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

DroneDeploy has integrated Courier's inbox into their web application as a notification center. This has significantly improved customer communications, providing timely updates and important information to clients directly within the app. 

Top notifications sent through their inbox include status updates when new maps, walkthroughs, or progress videos are uploaded, and edit access is requested/approved/declined.

### LaunchDarkly
LaunchDarkly offers a feature management platform to developers and DevOps engineers. The platform offers multivariate feature flags, which enables A/B testing and the ability to incrementally roll out new features.

> We were able to build the in-app notification experience that we wanted with excellent support and communication from the Courier staff. 
>
> __Lucy Wonsower__, Software Engineer, LaunchDarkly

LaunchDarkly uses Courier's inbox for:
- Managing event notifications for their feature management platform, such as requests for a new feature flag, or approvals of a feature flag request. The notification inbox speeds up these requests and approvals, thereby increasing value and customer retention.
- Sending team notifications such as team membership admin alerts, new user invites, welcome emails, and email verification messages.
- Billing notifications such as notifications that a user’s card was charged or that there was a failure to charge a card. 

### Oyster HR
Another organization that has reaped significant benefits from Courier's notification inbox is [Oyster HR](https://www.oysterhr.com/). As a global employment platform, Oyster HR enables businesses to hire, pay, and manage employees from across the world without the need to set up business entities in each country.

> Using Courier Inbox, Oyster saved 4 engineers 3 months of work from not having to construct a notification infrastructure, design a UI, and develop them to spec. But the most important benefit is that as Oyster scales, we won't need to hire additional engineers solely to manage our notification framework as the volume grows. 
>
> __Amy Weinrieb__, Senior Product Manager, Oyster HR

## Integrating Courier's notification inbox
One of the standout features of Courier's notification inbox is its simplicity of integration. Whether it's a mobile or a web application, a few lines of code are all you need to embed a fully functional notification inbox into your application. 

Here we have examples for adding an inbox to your web, IOS, and Android applications.

### Adding a notification center to your web application
For web applications, you can use either the [Courier React SDK](https://www.courier.com/docs/inbox/web/react-sdk/) or the vanilla [JavaScript SDK](https://www.courier.com/docs/inbox/web/javascript-sdk/). Here is a simple React example to illustrate this process.

```javascript
//App.js
import { CourierProvider } from "@trycourier/react-provider";
import { Inbox } from "@trycourier/react-inbox";

function App() {
  // Replace 'yourUserId' and 'YOUR_CLIENT_KEY' with your own details
  const userId = 'yourUserId';
  const clientKey = 'YOUR_CLIENT_KEY';

  return (
    <CourierProvider userId={userId} clientKey={clientKey}>
      <Inbox />
    </CourierProvider>
  );
}
```

The above code is all it takes to integrate Courier's notification inbox into your React application. You just need to import CourierProvider and Inbox from [@trycourier/react-provider](https://www.npmjs.com/package/@trycourier/react-provider) and [@trycourier/react-inbox](https://www.npmjs.com/package/@trycourier/react-inbox) respectively. Then, you set the userId and clientKey within the CourierProvider, and place the Inbox component within it. Look at the [README](https://github.com/trycourier/courier-react/tree/main/packages/react-inbox) on GitHub if you need more information.

The userId and clientKey are crucial for Courier to know who's using the inbox and to ensure the proper messages are displayed. The clientKey is a public-facing key that can be found by navigating to "Settings > [API keys](https://app.courier.com/settings/api-keys)" in the Courier app.

The snippet uses the basic authentication provided by Courier. However, for enhanced security, it is recommended to use JWT Authentication. The complete guide to set up JWT Authentication can be found [here](https://www.courier.com/docs/inbox/authentication/).

### Adding a notification center to your IOS application
Here is an example for an iOS application written in Swift:

```swift
import Courier_iOS

// Create the view
let courierInbox = CourierInbox(
    didClickInboxMessageAtIndex: { message, index in
        message.isRead ? message.markAsRead() : message.markAsUnread() 
        print(index, message)
    },
    didClickInboxActionForMessageAtIndex: { action, message, index in
        print(action, message, index)
    },
    didScrollInbox: { scrollView in
        print(scrollView.contentOffset.y)
    }
)

// Add the view to your UI
courierInbox.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(courierInbox)

// Constrain the view how you'd like
NSLayoutConstraint.activate([
    courierInbox.topAnchor.constraint(equalTo: view.topAnchor),
    courierInbox.bottomAnchor.constraint(equalTo: view.bottomAnchor),
    courierInbox.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    courierInbox.trailingAnchor.constraint(equalTo: view.trailingAnchor),
])

Task {
    try await Courier.shared.signIn(
        accessToken: "pk_prod_H12...",
        clientKey: "YWQxN...",
        userId: "example_user_id"
    )
}
```

This approach exemplifies the ”drop-in” method. You begin by importing the Courier_iOS package, add the view to your app, then sign in to your Courier account using your access token, client key, and user ID. The CourierInbox, for UIKit, and the CourierInboxView for SwiftUI, is then placed in your app how you’d like and, instantly embedding the notification inbox into your application with minimal effort. It's a quick and efficient way to get started, allowing developers to focus on building the core aspects of their app. This way, you can offer a powerful notification inbox to your users without spending significant time on implementation — and, more importantly, without compromising on the feature set.

### Adding a notification center to your Android application
For those interested in Android, here is the default inbox example for you.

```java
val inbox: CourierInbox = view.findViewById(R.id.courierInbox)

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

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

lifecycleScope.launch {
    Courier.shared.signIn(
        accessToken = "pk_prod_H12...",
        clientKey = "YWQxN...",
        userId = "example_user_id"
    )
}
```

This code snippet showcases the power of the Courier library in Android development, demonstrating the ability to log, mark messages as read or unread, and capture actions.

### Alternative, headless approach to building an inbox with Courier
But what if you need more control over your notification inbox's appearance and behavior? Courier also offers a headless option. This approach allows developers to customize every aspect of their inbox, tailoring it to meet specific design or functional requirements. You have the flexibility to change everything from the overall layout and individual components to the styling of each notification card. This way, Courier ensures that developers can create an inbox that not only fits their needs but also aligns perfectly with their application's UI and UX.

## Next steps
Whether you’re working on web or mobile app development, Courier provides a comprehensive, flexible, and easily integrable solution to ensure your users are always in the know and keep coming back to your app.

It’s [free to try](https://app.courier.com/signup). You can send 10,000 messages every month for no cost as you get to know the ins and outs of what’s possible with Inbox. To help you get started, we suggest exploring the detailed guides for each platform: [iOS](https://www.courier.com/docs/inbox/mobile/ios-sdk/), [Android](https://www.courier.com/docs/inbox/mobile/android-sdk/), and [web](https://www.courier.com/docs/inbox/web/javascript-sdk/). These comprehensive guides provide step-by-step instructions and code examples to guide you through the integration process.

Don't forget, Courier also provides seamless integration with push notifications. We've previously covered how to [set up push notifications with Courier](https://www.courier.com/blog/android-push-notifications-with-firebase-courier-sdk/). By combining these two  powerful features, you can provide a complete, personalized notification experience to your users.

Remember, providing a top-notch notification experience to your users doesn't have to be a daunting task. If you want to build a custom notification inbox that is not only user-friendly and efficient but also easily integrable across platforms, [start your notifications journey](https://app.courier.com/signup) with Courier today!


Courier makes it easy to send SMS, email, push and in-app notifications with a single API call. We have a REST API, client SDKs and Docs that you'll love 💜

Create Your Free Developer Account

Courier Inbox for web and mobile applications showing an example of the notification center UI

A notification center inside of web and mobile apps is now an expectation. It’s a way to reach specific audiences or users with tailored messages.

Courier Inbox for web and mobile, a complete notification center

Courier Inbox showing an example of the notification center UI with the bell icon lighting up with new unread messages

Jason Axtell

Send limits are a new addition to the Courier app that allow you to manage notification rate limits. This means you can set a maximum limit on the number of notifications you can send over a certain time period. The advantages of using send limits are twofold: you can save money by imposing spending caps on notifications, and you can improve the customer experience of your app by avoiding bombarding users with too many notifications at once.

Send limits can be applied in a variety of ways, including system-wide notification limits, as well as specific limits for individual users or notification topics. For instance, you can set an overall limit of 200,000 notifications per week.

This article will explore the various types of notification rate limits available, explain when send limits are useful, and provide guidance on how to set them up.

## The different types of Courier send limits
Send limits come in different types, offering various levels of control over your messaging costs and your customers’ experience. You can set global message limits that apply to all messages, or choose more precise options for greater control.

Each limit allows you to set a maximum number of messages for a particular unit of time, such as per day, week, month, or billing period. 
Note that the units of time are currently measured using fixed timescales. For example, if you want to set a message limit per day, you should be aware that a day runs from midnight to midnight. Similarly, a week is defined as running from 00:00:00 Sunday morning to 11:59:59 Saturday night.

The billing period option is particularly useful: if you have a contract based on sending a predicted volume of messages, this helps you stick to your plan, and ensures you won’t use up all your message budget before the time period ends.
![send-limits-settings](//images.ctfassets.net/z7iqk1q8njt4/53g6GNK3GPyjYLdNpJdkeg/881254957f3fdaea90f22bee47c7e143/send-limits.png)

### Global message limits
Global message limits are our simplest type of send limits. They allow a rule to be applied to all your messages, such as setting a maximum limit of 200,000 messages per week.

### Per-user message limits
With per-user message limits, you can set rules that limit the number of messages sent to each user, such as a daily limit of three messages per user.

### Per-user subscription topic limits
Per-user subscription topic limits are an additional send limits feature, which allow you to set individualized rules for specific subscription topics, such as "password reset messages" or "marketing messages." You can set up different rules for each topic, such as limiting marketing emails to two per day per user while also allowing up to ten password reset emails per day per user.
![per-user-subscription-topic-limit](//images.ctfassets.net/z7iqk1q8njt4/6t7Ukfn8JwzZGNKIzGP85V/9650e153492aaa4ca9a13d474cc51978/image2.jpg)

### Limit exclusions
Another feature of send limits is the ability to set limit exclusions. These rules allow certain subscription topics to bypass any other types of limits you may have added, enabling you to let certain types of messages through, regardless of any other rules you have set. For instance, you may want to allow billing alerts or password reset emails to come through, even if you’ve already reached your global message limit.
![send-limit-exclusions](//images.ctfassets.net/z7iqk1q8njt4/DCLoo9ZxmHAdfM1YCzYiq/90797fdab259567b79013080be2999c0/image3.jpg)

## Who are send limits for?
Send limits are a valuable feature for many Courier users. For those who need to stay within a budget, send limits allow you to impose a spending cap on your notifications, which can help you avoid unexpected costs.

If your focus is on providing a good customer experience, send limits provide an added layer of protection to prevent users from receiving too many notifications at once, which could cause them to become frustrated and even unsubscribe from your service.

If you typically send a lot of notifications, send limits can provide peace of mind. It's easy to lose track of the number of notifications sent, and send limits can help to ensure that you don't accidentally exceed your intended limit. This can help you to keep within your budget and avoid unexpected expenses.

One of the most significant benefits of send limits is the fine-grained control they offer over notification limits. For example, if you only want to send a maximum of two notifications to a person per day, send limits can help you achieve this. Similarly, if you want to limit the number of marketing notifications sent to a particular user to a maximum of three, send limits can enforce this limit.

## Get started using send limits
To set some send limits, navigate to "Settings" in the Courier app, and select "[Send Limits](https://app.courier.com/settings/guard-rails)." From here, you can toggle different types of message limits on or off, as described in our [Send limits documentation](https://www.courier.com/docs/guides/business/guardrails/).

You could start by setting up global message limits. Consider how many messages you’re already paying for in your contract and use that as a starting point to decide how many messages to allow each month. Make sure to pair this with “limit exclusions” for any important messages that you can’t afford to be blocked.

Subscription topic limits are for adding messaging limits to particular types of messages, such as marketing emails. Select a subscription topic from the drop-down box to begin setting limits for it. You can set different limits for as many different types of subscription topics as you need.

Keep in mind that the send limits feature is currently only available to business-tier customers. However, once you have access, utilizing the different types of message limits can provide greater control over both your costs and the customer experience.

If you're not currently a business-tier customer but are interested in the send limits feature, you can [request a demo](https://www.courier.com/request-demo/?utm_source=product_news&utm_medium=email&utm_campaign=changelog) of our business-tier offering. In addition to send limits, our business-tier offering also includes features such as template analytics and observability integrations.

Send limits offer a level of control over your notifications that can help you stay within budget and avoid overloading your users with too many messages. With send limits, you have the ability to set specific notification limits for each type of message, allowing for more granular control over your notification strategy.

If you're new to Courier and want to try it out, [sign up for free today](https://app.courier.com/signup), which includes up to 10,000 notifications per month.

Courier is a notification service that centralizes all of your templates and messaging channels in one place which increases visibility and reduces engineering time. 

Start Routing Notifications Today!

Send limits header

Courier’s new send limits feature allows you to apply notification rate limits, which can help you save money and improve your customers’ experience.

Controlling notification send limits in Courier

Send limits thumbnail

Courier Live Thumbnail

The Courier Team

Today, we are embarking on a significant redesign of Courier's interface consisting of some new things, some old things in new places, and an overall reorganization of the information architecture. Here's a sneak peek 👀

<iframe width="560" height="315" src="https://www.youtube.com/embed/Dsfv6cIebVU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

This redesign aims to address the challenges that come with the growth of our platform, where increased size and number of features leads to increased complexity, resulting in a product that may not be as intuitive for new users. We believe that this update will take us closer to a simpler and more organized Courier, setting the stage for more exciting improvements in the future. 

We hope you like the new look! 💜

Courier UI showing various integrations, notification health metrics, channel configurations and more.

courier-integrations-teaser

In the new design, we brought important features like integrations, notification health, automations, and the template designer front and center.

Designing the future of Courier

User interface in Courier showing integrations, channel health metrics, and more.

Designing the future of Courier

More from Product News

Build your first notification in minutes

Build your first notification in minutes

Platform

Use Cases

Explore

Company