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

# HTML in Notifications

> Enable and safely render raw HTML in the notification subject and body of the WorldVisa Inbox component for rich text formatting and inline styling.

By default, WorldVisa sanitizes the `subject` and `body` of all in-app step notifications to ensure that they are safe to display. This process prevents security risks by removing suspicious HTML tags (like `<script>`) and escaping HTML entities (like `&`, `<`, `>`).

However, you can disable this feature to display richly formatted content with links, bold text, and more. The Inbox component supports this by letting you inject HTML using `dangerouslySetInnerHTML` into your notification content, providing control over layout, formatting, and design.

> [!WARNING]
>
> Disabling content sanitization can expose your application to Cross-Site Scripting (XSS) attacks. You should only enable this feature if you completely trust the source of your notification data and have full control over the trigger payload.

Enabling HTML formatting is a two-step process: you must first disable sanitization in your WorldVisa workflow and then use the appropriate render prop in your application to display the HTML.

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

## Step 1: Disable content sanitization in your workflow

In your WorldVisa workflow:

1. navigate to the **In-App editor**.
2. In the editor, find and turn on the **Disable content sanitization** toggle.

![Disable content sanitization in the WorldVisa in-app step editor](https://mintcdn.com/wv-enterprise/l3bkwl1N_3mOn9aW/images/developers/inbox/disable-content-sanitization.png?fit=max\&auto=format\&n=l3bkwl1N_3mOn9aW\&q=85\&s=82af4d96db8b03969d9bb9d1fc2aa157)

This setting instructs the WorldVisa API to send the raw, unescaped HTML content for both the subject and body to your application.

## Step 2: Display the HTML in your app

Once sanitization is disabled, you must use a `render` prop in your application to correctly interpret and display the raw HTML. Sanitize the HTML in your application before rendering it. These examples use `dompurify`, which you must add to your application, together with React's `dangerouslySetInnerHTML` property. This extra sanitization matters even when you control the workflow, because trigger payloads can contain client-provided values.

### For the notification body

To display HTML in the notification's body, use the `renderBody` prop.

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

function CustomInbox() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriber="YOUR_SUBSCRIBER_ID"
      renderBody={(notification) => (
        <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(notification.body ?? '') }} />
      )}
    />
  );
}

export default CustomInbox;
```

#### Example usage

If your workflow's in-app message body contains the following content with HTML tags and variables:

```html html tags with dynamic values theme={null}
{{subscriber.firstName}}, A <b>Good news!</b> We've just launched the <i>advanced
analytics dashboard</i> you asked for. Check it out <a href="https://example.com"
target="_blank" rel="noopener noreferrer">here</a>.
```

When you trigger this notification, the code will render this content with the HTML formatting applied, displaying bold and italic text, and a functional link.

![Display HTML in notification body](https://mintcdn.com/wv-enterprise/l3bkwl1N_3mOn9aW/images/developers/inbox/display-html-in-body.png?fit=max\&auto=format\&n=l3bkwl1N_3mOn9aW\&q=85\&s=5a89d8b2a2d9fbbdd439ad4f33d83f66)

### For the notification subject

Similarly, to display HTML in the notification's subject, use the `renderSubject` prop.

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

function CustomInbox() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriber="YOUR_SUBSCRIBER_ID"
      renderSubject={(notification) => (
        <span dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(notification.subject ?? '') }} />
      )}
    />
  );
}

export default CustomInbox;
```

### For the notification subject and body

If you need to display HTML in both the subject and body, use the `renderNotification` prop.

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

function CustomInbox() {
  return (
    <Inbox
      applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
      subscriber="YOUR_SUBSCRIBER_ID"
      renderNotification={(notification) => (
        <div style={{ borderBottom: '1px solid #eee', padding: '16px' }}>
          <h3 dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(notification.subject ?? '') }} />
          <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(notification.body ?? '') }} />
        </div>
      )}
    />
  );
}

export default CustomInbox;
```


## Related topics

- [Channels Template Editors](https://docs.worldvisagroup.com/developers/workflow/add-notification-content/channels-template-editors.md)
- [How to Write Email Templates in WorldVisa](https://docs.worldvisagroup.com/developers/integrations/email/writing-email-template.md)
- [Resend Email Integration with WorldVisa](https://docs.worldvisagroup.com/developers/integrations/email/resend.md)
- [Notification event](https://docs.worldvisagroup.com/developers/concepts/notification-event.md)


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