HTML in Notifications

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.

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.

Use your application’s existing connection and authentication settings with these examples. Set up Inbox covers the application identifier, subscriber, API and WebSocket URLs, and subscriber credentials.

Step 1: Disable content sanitization in your workflow

In your WorldVisa workflow:

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

Disable content sanitization in the WorldVisa in-app step editor

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.

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 tags with dynamic values

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

For the notification subject

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

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.

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;

Getting Started

Integrate <Inbox />

Build a Workflow

Integrate Channels Providers

Account

Step 1: Disable content sanitization in your workflow

Step 2: Display the HTML in your app

For the notification body

Example usage

For the notification subject

For the notification subject and body

​Step 1: Disable content sanitization in your workflow

​Step 2: Display the HTML in your app

​For the notification body

​Example usage

​For the notification subject

​For the notification subject and body

Step 1: Disable content sanitization in your workflow

Step 2: Display the HTML in your app

For the notification body

Example usage

For the notification subject

For the notification subject and body