> ## 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.

# Customize Popover

> Display the WorldVisa Inbox content outside the default popover and integrate it into your own custom popover, drawer, or full page layout.

The Inbox component provides a built-in popover triggered by its bell icon. In situations where you want more control over how and where notifications appear, you can display the notification feed directly or mount it inside your own custom popover, modal, or panel.

> [!NOTE]
>
> Use your application’s existing connection and authentication settings with these examples. [Set up Inbox](https://docs.worldvisagroup.com/developers/inbox/setup-inbox.md) covers the application identifier, subscriber, API and WebSocket URLs, and subscriber credentials.

## Display the standalone notification feed

You can render the notification feed directly into any part of your application, such as a dashboard panel or a dedicated notifications page. This is useful for situations where you don't need a popover trigger at all. WorldVisa provides two components for this.

Both components support the same customization props as the Inbox component, except for configuration options (like `applicationIdentifier`, `subscriber`, and `renderBell`).

### Notifications component

The Notifications component renders the core notification experience, which includes the Inbox header (with title and dropdown), the scrollable list of notifications, and the footer.

![notifications component](https://mintcdn.com/wv-enterprise/l3bkwl1N_3mOn9aW/images/developers/inbox/notifications-component.png?fit=max\&auto=format\&n=l3bkwl1N_3mOn9aW\&q=85\&s=5d704c481cc6e9eb2d763467025bc53d)

```tsx theme={null}
import { Inbox, Notifications } from '@wv/react';

function NotificationFeed() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriber="YOUR_SUBSCRIBER_ID"
    >
      <Notifications />
    </Inbox>
  );
}

export default NotificationFeed;
```

### InboxContent component

The InboxContent component renders everything the Notifications component does, but with one key addition: the Preferences page. This allows users to manage their notification settings directly from the component.

![notifications component](https://mintcdn.com/wv-enterprise/l3bkwl1N_3mOn9aW/images/developers/inbox/inboxcontent-component.png?fit=max\&auto=format\&n=l3bkwl1N_3mOn9aW\&q=85\&s=17ab8dabf28a2243792c11afd590d76c)

```tsx theme={null}
import { Inbox, InboxContent } from '@wv/react';

function NotificationFeed() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriber="YOUR_SUBSCRIBER_ID"
    >
      <InboxContent />
    </Inbox>
  );
}

export default NotificationFeed;
```

## Building a custom popover

Use the Notifications or InboxContent components inside your own popover to keep all of WorldVisa’s notification functionality while integrating with any external UI library. Trigger the popover with the Bell component or your own custom trigger.

> [tab] Using Notifications
>
> ```tsx theme={null}
> import { Inbox, Bell, Notifications } from '@wv/react';
> import { Popover, PopoverTrigger, PopoverContent } from '@wv/ui';
>
> function CustomPopoverPage() {
>
>   return (
>       <Inbox
>         applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
>         subscriber="YOUR_SUBSCRIBER_ID"
>       >
>         <Popover>
>           <PopoverTrigger>
>             <Bell />
>           </PopoverTrigger>
>           <PopoverContent className="h-[600px] w-[400px] p-0">
>             <Notifications />
>           </PopoverContent>
>         </Popover>
>       </Inbox>
>   );
> }
> export default CustomPopoverPage;
> ```

> [tab] Using InboxContent
>
> ```tsx theme={null}
> import { Inbox, Bell, InboxContent } from '@wv/react';
> import { Popover, PopoverTrigger, PopoverContent } from '@wv/ui';
>
> function CustomPopoverPage() {
>
>   return (
>       <Inbox
>         applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
>         subscriber="YOUR_SUBSCRIBER_ID"
>       >
>         <Popover>
>           <PopoverTrigger>
>             <Bell />
>           </PopoverTrigger>
>           <PopoverContent className="h-[600px] w-[400px] p-0">
>             <InboxContent />
>           </PopoverContent>
>         </Popover>
>       </Inbox>
>   );
> }
> export default CustomPopoverPage;
> ```

> [tab] With shadcn/ui Drawer
>
> ```tsx theme={null}
> "use client";
>
> import {
>   Drawer,
>   DrawerContent,
>   DrawerHeader,
>   DrawerTitle,
>   DrawerTrigger,
> } from "@/components/ui/drawer";
> import { Inbox, InboxContent } from "@wv/react";
>
> export default function PortalInbox() {
>   return (
>     <div className="min-h-screen p-8">
>       <Inbox
>         applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
>         subscriber="YOUR_SUBSCRIBER_ID"
>       >
>         <Drawer direction="left">
>           <DrawerTrigger
>             className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
>           >
>             Open Drawer
>           </DrawerTrigger>
>           <DrawerContent className="w-[300px]">
>             <DrawerHeader>
>               <DrawerTitle>WorldVisa Inbox</DrawerTitle>
>             </DrawerHeader>
>             <InboxContent />
>           </DrawerContent>
>         </Drawer>
>       </Inbox>
>     </div>
>   );
> }
> ```


## Related topics

- [Customize Bell Icon](https://docs.worldvisagroup.com/developers/inbox/advanced-customization/customize-bell.md)
- [Styling and Theming](https://docs.worldvisagroup.com/developers/inbox/configuration/styling.md)
- [Preferences](https://docs.worldvisagroup.com/developers/concepts/preferences.md)
- [Customize Notification Items](https://docs.worldvisagroup.com/developers/inbox/advanced-customization/customize-notification-items.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.