# Novu Framework TypeScript In-App Step (/framework/typescript/steps/inApp)

Learn how to use the In-App step to send notifications to your web or mobile app's inbox

The `inApp` step allows you to send a message to your user's `<Inbox />` for your web or a mobile app.

## Example Usage

```tsx
await step.inApp('inbox', async () => {
  return {
    subject: 'Welcome to Acme!',
    body: 'We are excited to have you on board.',
    avatar: 'https://acme.com/avatar.png',
    redirect: {
      url: 'https://acme.com/welcome',
      target: '_blank',
    },
    primaryAction: {
      label: 'Get Started',
      redirect: {
        url: 'https://acme.com/get-started',
        target: '_self',
      },
    },
    secondaryAction: {
      label: 'Learn More',
      redirect: {
        url: 'https://acme.com/learn-more',
        target: '_self',
      },
    },
    data: {
      customData: 'customValue',
      text: payload.text,
    },
  };
});
```

## Return Value

```tsx
const { seen, read, lastSeenDate, lastReadDate } = await step.inApp('inbox', resolver);
```

## In-App Step Output

### body

* **Type**: `string`
* **Required**: Yes
* **Description**: The body of the inbox notification. The main content of the notification.

### subject

* **Type**: `string`
* **Required**: No
* **Description**: The subject of the inbox notification. This property communicates the subject of the notification to the user.

### avatar

* **Type**: `string`
* **Required**: No
* **Description**: The avatar shown in the inbox notification. When specified, overrides the avatar of the actor initiating the notification.

### redirect

* **Type**: `object`
* **Required**: No
* **Description**: The redirect object is used to define the URL to visit when interacting with the notification. This property can be omitted in place of an `onNotificationClick` [handler](/platform/inbox/advanced-customization/notification-click-behavior#handle-notification-click-events) implemented in the `<Inbox />` component.
* **Properties**:
  * `url` (string, required): The URL to visit when clicking on the notification.
  * `target` (string): The target attribute specifies where the new window or tab will be opened. Defaults to `_blank`. Supported values: `_self, _blank, _parent, _top, _unfencedTop`.

### primaryAction

* **Type**: `object`
* **Required**: No
* **Description**: Define a primary action to be shown in the inbox notification. The primary action will appear with an accent color.
* **Properties**:
  * `label` (string, required): The label of the action.
  * `redirect` (object):
    * `url` (string, required): The URL to visit when clicking on the notification action button.
    * `target` (string): The target attribute specifies where the new window or tab will be opened. Defaults to `_blank`. Supported values: `_self, _blank, _parent, _top, _unfencedTop`.

### secondaryAction

* **Type**: `object`
* **Required**: No
* **Description**: Define a secondary action to be shown in the inbox notification. The secondary action will appear with a muted color.
* **Properties**:
  * `label` (string, required): The label of the action.
  * `redirect` (object):
    * `url` (string, required): The URL to visit when clicking on the notification action button.
    * `target` (string): The target attribute specifies where the new window or tab will be opened. Defaults to `_blank`. Supported values: `_self, _blank, _parent, _top, _unfencedTop`.

### data

* **Type**: `object`
* **Required**: No
* **Description**: Custom data to be sent with the notification. This data can be used to [customize the notification item rendered](/platform/inbox/configuration/styling#render-notification-component) in the `<Inbox />`.

## In-App Step Result

### seen

* **Type**: `boolean`
* **Required**: Yes
* **Description**: A flag indicating if the notification has been seen. This property is useful when conditionally delivering notifications in subsequent steps via the `skip` function. A notification is marked as seen when the user views the notification.

### read

* **Type**: `boolean`
* **Required**: Yes
* **Description**: A flag indicating if the notification has been read. A notification is marked as read when the user confirms the notification.

### lastSeenDate

* **Type**: `date | null`
* **Required**: Yes
* **Description**: The date the notification was last seen. This corresponds to the date the `seen` property was set to `true`, or `null` if the notification has not been seen.

### lastReadDate

* **Type**: `date | null`
* **Required**: Yes
* **Description**: The date the notification was last read. This corresponds to the date the `read` property was set to `true`, or `null` if the notification has not been read.