Preview generators

In-app notification center preview generator

Mock up an in-app notification center, the bell and its dropdown feed, with your own titles and text in light or dark, then export it as a PNG.

Accent color
Product icon (optional)
Image set
Notifications4 of 6
Preview
Background
2
NotificationsMark all as read
AllUnread2Archived
P
Priya commented on Q3 plan.pdf2m
Can we move the launch to week 2? Legal needs one more pass.
Reply
J
Edit access requested1h
Jonas Berg wants to edit Brand assets.
ApproveDecline
File request complete3h
12 files were uploaded to Contracts.
Storage almost full1d
You have used 92% of your plan's storage.
Upgrade

Put this feed in your product. Drop in Courier's prebuilt inbox and send to it like any other channel.

Add an inbox to your app

Instructions

How to use this tool

  1. 01Enter your product name, pick an accent color, and upload your icon if you have one.
  2. 02Edit each notification on its own card: who it is from, the title, the body, up to two actions, the time, and whether it is unread.
  3. 03Add notifications up to six, or remove the ones you don't need.
  4. 04Switch between Light and Dark to check both themes.
  5. 05Click Download PNG to export the bell and panel.

Background

What an in-app feed is for

An in-app feed is the list behind the bell icon in your product. Unlike an email or a push, it sits inside the app and waits: people open it when they are already there, and with Courier Inbox each notification stays in the list until it is archived or expires.

That changes how you write for it. A feed item has a title and one line of body text, and the title has to carry the meaning on its own.

Background

Writing feed items that survive a skim

Open with the thing that happened, not the thing that sent it: Export finished beats Notification from Reports. Keep the body to one sentence with the detail someone would act on, like a row count or a name.

Mark a few items unread to see how that state reads next to a seen one, and give the ones that need a decision an action, like Approve or Reply, so the user can act without opening anything. If your titles are indistinguishable at that size, they will be in the real feed too.

Background

Building the feed with Courier Inbox

Courier Inbox is a hosted version of this feed. You embed the prebuilt inbox component with a web SDK (React, Vue, Angular, or Web Components) or a mobile SDK (iOS, Android, React Native, or Flutter), and Courier stores each user's messages and delivers them in real time. Unread counts, Unread and Archived views, and pagination work without extra code.

Sending to it is the same call you use for any other channel: include inbox in the message's routing channels. The prebuilt inbox themes to your brand, including light and dark, and you can replace the header or list items with your own components when you need to.

FAQ

Frequently asked questions

How is an in-app notification different from a push?

A push is delivered by the operating system and shows up even when your app is closed. An in-app notification only appears inside your product, in a feed the user opens from the bell, and stays there until it is archived or expires.

How many notifications can I add to the preview?

Up to six, each with its own sender, title, body, actions, time, and unread state. A real feed scrolls and pages through far more than that, but six is enough to show how a mix of read and unread items looks together.

How do I send a message to the Courier inbox?

Include inbox in the routing channels of a normal send call. It is a channel like email or push, so the same Send API call delivers to it, and a signed-in user sees it arrive in real time.

How long do messages stay in the Courier inbox?

Until the user archives them or they expire. A message sent with an expiresAt time drops out of the feed when that time passes, and one sent without it stays. Read and archive state follows the user across devices.

Can the feed match my brand and support dark mode?

Yes. Courier's prebuilt inbox takes colors, fonts, and light and dark themes, and on the web you can swap in your own header or list items. The Light and Dark toggle here exports each theme as its own image.

Ship an in-app inbox without building the backend

Courier hosts the feed, delivers new messages in real time, and keeps read and archive state in sync across devices. You embed the component and send to the inbox channel.

Add an inbox with Courier