Seth Profile Pic

Seth Carney

**Smart Notification Scheduling with Delivery Windows**

Sending a notification is simple—sending it at the right time is not. Whether it’s avoiding off-hours pings or managing users across time zones, timing matters. With Courier’s new Delivery Window, you can deliver messages at the perfect moment—without the overhead of custom scheduling code.

**Set the Rules, We’ll Handle the Rest**  
The Delivery Window feature lets you define when notifications should go out, and Courier ensures they follow your rules. Instead of instant delivery, send the notification when it’s best for your user to get it and act on it.

For example, if a non-urgent alert is triggered on Sunday at 3 PM, you can configure a delivery window for work hours: Monday to Friday, 10 AM to 4 PM. Courier will hold the message and deliver it Monday at 10 AM—seamlessly, no extra work required.

Some key features include:

* Time zone adaptability, allowing messages to be sent based on specific user locations  
* Support for both IANA and UTC± formats  
* Flexible scheduling with the ability to define complex windows

Here’s what it looks like in your API request:

```
// If sent Thursday at noon, will send immediately
// If sent Saturday at noon, will delay until 8am the following Monday
{
  "message": {
    "to": {
      "user_id": "test123",
      "timezone": "Americas/Los_Angeles"
    },
    "delay": {
      "until": "Mo-Fr 08:00-16:30"
    }
  }
}
```

**Get Started Today**  
Ready to see it in action? Explore the [Delivery Window docs](https://www.courier.com/docs/platform/sending/delay#delivery-window) and start sending notifications at the right time for users.


Delivery Window Header

Delivery Window Thumb

Smart Notification Scheduling with Delivery Windows

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

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