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

# Notification Click Behavior

> Configure routing and click handling for notifications in the WorldVisa Inbox using routerPush, onNotificationClick, and per-action redirect URLs.

The Inbox component provides props that can be used to manage navigation and event handling, giving you full control over how notifications behave when users interact with them.

> [!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.

## Enable navigation from notifications

The Inbox component uses the `routerPush` prop to make your notifications navigable. When you define a `redirect.url` in your workflow definitions, WorldVisa automatically passes this URL to the `routerPush` function you provide.

> [tab] Next.js
>
> ```tsx theme={null}
> 'use client';
>
> import { Inbox } from '@wv/react';
> import { useRouter } from 'next/navigation';
>
> export function PortalInbox() {
>   const router = useRouter();
>
>   return (
>     <Inbox
>       applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
>       subscriber="YOUR_SUBSCRIBER_ID"
>       routerPush={(path: string) => router.push(path)}
>     />
>   );
> }
> ```

> [tab] React Router
>
> ```tsx theme={null}
> import { Inbox } from '@wv/react';
> import { useNavigate } from 'react-router-dom';
>
> export function PortalInbox() {
>   const navigate = useNavigate();
>
>   return (
>     <Inbox
>       applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
>       subscriber="YOUR_SUBSCRIBER_ID"
>       routerPush={(path: string) => navigate(path)}
>     />
>   );
> }
> ```

> [tab] Remix
>
> ```tsx theme={null}
> import { Inbox } from '@wv/react';
> import { useNavigate } from '@remix-run/react';
>
> export function PortalInbox() {
>   const navigate = useNavigate();
>
>   return (
>     <Inbox
>       applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
>       subscriber="YOUR_SUBSCRIBER_ID"
>       routerPush={(path: string) => navigate(path)}
>     />
>   );
> }
> ```

> [tab] Gatsby
>
> ```tsx theme={null}
> import { Inbox } from '@wv/react';
> import { navigate } from 'gatsby';
>
> export function PortalInbox() {
>   return (
>     <Inbox
>       applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
>       subscriber="YOUR_SUBSCRIBER_ID"
>       routerPush={(path: string) => navigate(path)}
>     />
>   );
> }
> ```

To make navigation work, you need to specify the `routerPush` behavior based on your routing library

## Event Handling

Beyond navigation, you can handle various notification events to create custom behaviors like opening modals, triggering actions, or updating application state.

### Handle notification click events

You can intercept a notification click event and define a custom behavior using the `onNotificationClick` prop. This is particularly useful when you want to open modals, drawers, or perform custom actions instead of navigating to a page.

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

function WorldVisa() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriber="YOUR_SUBSCRIBER_ID"
      onNotificationClick={(notification) => {
        // your logic to handle notification click
      }}
    />
  );
}
```

### Handle action button clicks

Some notifications include primary and secondary action buttons. You can handle these clicks using the `onPrimaryActionClick` and `onSecondaryActionClick` props. These handlers give you access to the notification object and allow you to implement custom logic for each action type.

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

function WorldVisa() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriber="YOUR_SUBSCRIBER_ID"
      onPrimaryActionClick={(notification) => {
        // your logic to handle primary action click
      }}
      onSecondaryActionClick={(notification) => {
        // your logic to handle secondary action click
      }}
    />
  );
}
```


## Related topics

- [Integrations](https://docs.worldvisagroup.com/developers/concepts/integrations.md)
- [How WorldVisa Console works](https://docs.worldvisagroup.com/developers/how-worldvisa-console-works.md)
- [How do workflows work in WorldVisa?](https://docs.worldvisagroup.com/developers/concepts/workflows.md)
- [Preferences](https://docs.worldvisagroup.com/developers/concepts/preferences.md)


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