> ## Documentation Index
> Fetch the complete documentation index at: https://docs.worldvisagroup.com/llms.txt
> Use this file to discover all available pages before exploring further.
# WorldVisa Inbox
> Integrate the WorldVisa Inbox component for real-time in-app notifications in your application. Drop-in UI with bell icon, feed, and preferences.
Add real-time in-app notifications to your application with the WorldVisa Inbox component. Use the workspace’s [`@wv/react` package](https://docs.worldvisagroup.com/developers/inbox/setup-inbox), render the [``](https://docs.worldvisagroup.com/developers/inbox/setup-inbox) component with your application identifier and subscriber ID, and WorldVisa handles delivery, unread counts, and preferences.
The WorldVisa Inbox is a prebuilt, ready-to-use, and fully customizable UI component for delivering real-time in-app notifications. It gives your subscribers a centralized place to view and manage notifications.
> [!NOTE]
>
> Inbox displays one-way notifications. Use it for updates and actions that take subscribers back to your application.
## What is the composable Inbox architecture?
The WorldVisa Inbox is built with a composable architecture. It is composed of other sub-components:
> [card] [Bell](https://docs.worldvisagroup.com/developers/inbox/advanced-customization/customize-bell.md#bell-component)
>
> Used to display the bell icon and trigger the notification component when clicked
> [card] [Notifications](https://docs.worldvisagroup.com/developers/inbox/advanced-customization/customize-popover.md#notifications-component)
>
> Displays the notifications list
> [card] [InboxContent](https://docs.worldvisagroup.com/developers/inbox/advanced-customization/customize-popover.md#inboxcontent-component)
>
> Displays the content of the `` menu
> [card] [Preferences](https://docs.worldvisagroup.com/developers/inbox/configuration/preferences.md#using-the-preferences--component)
>
> Used to display the preferences modal
By composing these individual components, you can create multiple popular inbox layouts that fit perfectly within your application's design.
## What features does the Inbox include?
* Full stack integration: The Inbox handles UI, unread states, routing, and preferences all in one place.
* Highly customizable: Override styles, replace every UI elements and icons.
* Flexible layouts: Use the default Inbox UI layout or build your own.
* Built-in support for Tabs and filters, localization, snoozing, preferences management, and more.
## How does the WorldVisa Inbox component work?
At a high level, the Inbox abstracts away the complexity of building an in-app notification feed.
1. When you drop the Inbox component into your application, it securely connects to WorldVisa's services.
2. It automatically fetches user notifications and manages the real-time unread count displayed on the bell icon.
3. When a user clicks the bell, it presents the list of notifications and user preferences.
4. All user interactions, such as marking a notification as read or changing a preference, are automatically synchronized with the WorldVisa backend in real-time.
## What are the ways to implement the WorldVisa Inbox?
There are two integration approaches, depending on your needs for speed versus customization.
> [tab] Plug-and-play
>
> This is the fastest way to integrate the WorldVisa Inbox. The Inbox component, encapsulate all the UI and logic. You simply drop the component into your application, configure it with the necessary properties, and you're done.
> [tab] Build your own
>
> For maximum flexibility and complete control over the look and feel, use the @wv/react SDK for React hooks or the `@wv/js` client for framework-agnostic JavaScript methods.
>
> You get the power of WorldVisa's notification engine while building a user interface that perfectly matches your application's design system.
## Frequently asked questions
> [accordion] How do I add the Inbox to my app?
>
> Follow [Set up Inbox](https://docs.worldvisagroup.com/developers/inbox/setup-inbox.md). Use the workspace package, add the `` component with your application identifier and subscriber ID, then trigger a workflow from the WorldVisa Dashboard.
> [accordion] Can I customize the Inbox UI?
>
> Yes. Override styles, replace sub-components, or use headless hooks from `@wv/react` or `@wv/js` to build a fully custom Inbox experience.
> [accordion] Does the Inbox support user notification preferences?
>
> Yes. The Inbox includes built-in preference management so subscribers can control which workflows and channels they receive notifications through.
> [accordion] How do I pass or update subscriber profile fields from the Inbox?
>
> Pass a `subscriber` object with fields such as `firstName`, `email`, `locale`, and `data`. New subscribers are created on the first session; updating an existing profile requires [HMAC encryption](https://docs.worldvisagroup.com/developers/inbox/setup-inbox.md#secure-the-subscriber-session) and `subscriberHash`.
> [accordion] What is the minimum React version required for the Inbox?
>
> The `@wv/react` package requires **React 18.0.0 or later**. React 19 is also supported. React 17 and earlier versions are not supported.
## Related topics
- [Inbox with Context](https://docs.worldvisagroup.com/developers/inbox/configuration/inbox-with-context.md)
- [Set up Inbox](https://docs.worldvisagroup.com/developers/inbox/setup-inbox.md)
- [Styling and Theming](https://docs.worldvisagroup.com/developers/inbox/configuration/styling.md)
- [Preferences](https://docs.worldvisagroup.com/developers/inbox/configuration/preferences.md)
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.