Frontend SDKs

The Redacto Consent SDK enables developers to easily integrate consent management functionality into their applications. This guide covers the React SDK, with other platforms coming soon.

Supported Platforms

Architecture

The SDK follows a client-server architecture pattern:

┌─────────────┐         ┌──────────────┐         ┌─────────────────┐
│   Client    │────────▶│ Your Backend │────────▶│  Redacto API    │
│  (React)    │◀────────│    Server    │◀────────│   (CMP API)     │
└─────────────┘         └──────────────┘         └─────────────────┘
     │                        │
     │                        │
     ▼                        ▼
┌─────────────────────────────────────────────┐
│     @redacto.io/consent-sdk-react           │
│  (RedactoNoticeConsent /                    │
│   RedactoNoticeConsentInline)               │
└─────────────────────────────────────────────┘

How It Works:

1. Your Backend Server acts as a proxy between your React application and Redacto's API, handling token generation and refresh
2. Your React Application uses SDK components to display consent notices and collect user choices
3. SDK Components fetch consent content, render UI, and submit consent records

Installation

npm install @redacto.io/consent-sdk-react

Requirements:

• React 16.8.0 or higher (including React 17, 18, and 19)
• React DOM 16.8.0 or higher (including React DOM 17, 18, and 19)

Components

RedactoNoticeConsent

A modal popup component for consent collection. Displays a full-screen modal with consent options that blocks UI interaction until the user responds.

Best for: Initial consent collection, standalone consent flows

Key Characteristics:

• Requires tokens upfront (must be provided before rendering)
• Displays as a modal overlay
• Blocks UI interaction by default

Props:

validateAgainst Parameter:

• "all" (default): Validates all purposes and data elements. Responses are cached for performance.
• "required": Only validates required purposes. Responses bypass cache for fresh validation. Use for reconsent flows.

Usage Example:

import { RedactoNoticeConsent } from "@redacto.io/consent-sdk-react";

function ConsentModal() {
  return (
    <RedactoNoticeConsent
      noticeId={NOTICE_UUID}
      accessToken={tokens.accessToken}
      refreshToken={tokens.refreshToken}
      baseUrl={BASE_URL}
      blockUI={true}
      language="en"
      validateAgainst="all"
      onAccept={() => console.log("Consent accepted")}
      onDecline={() => console.log("Consent declined")}
      onError={(error) => console.error("Error:", error)}
    />
  );
}

RedactoNoticeConsentInline

An inline component for embedding consent directly in forms. Can load and display consent content without tokens, then auto-submits when tokens are provided.

Best for: Registration forms, checkout flows, multi-step processes

Key Characteristics:

• Can load content without tokens (tokens optional initially)
• Renders inline within your form
• Auto-submits consent when all conditions are met

Display Requirements (to show the component):

• org_uuid - Your organization UUID
• workspace_uuid - Your workspace UUID
• notice_uuid - The consent notice UUID

Submit Requirements (to submit consent):

1. accessToken must be provided
2. Consent content must be loaded
3. All required data elements must be checked

Props:

Usage Example:

import { RedactoNoticeConsentInline } from "@redacto.io/consent-sdk-react";

function RegistrationForm() {
  const [accessToken, setAccessToken] = useState();
  const [refreshToken, setRefreshToken] = useState();
  const [consentValid, setConsentValid] = useState(false);

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" placeholder="Email" />

      <RedactoNoticeConsentInline
        org_uuid={ORG_UUID}
        workspace_uuid={WORKSPACE_UUID}
        notice_uuid={NOTICE_UUID}
        accessToken={accessToken}
				refreshToken={refreshToken}
        baseUrl={BASE_URL}
        onValidationChange={setConsentValid}
        onAccept={() => console.log("Consent submitted")}
        onError={(error) => console.error("Error:", error)}
      />

      <button type="submit" disabled={!consentValid}>
        Register
      </button>
    </form>
  );
}

Component Comparison

Custom Styling

Both components support extensive styling customization through the settings prop:

const customSettings = {
  button: {
    accept: {
      backgroundColor: "#9810fa",
      textColor: "white",
    },
    decline: {
      backgroundColor: "#0a0a14",
      textColor: "white",
    },
    language: {
      backgroundColor: "#0a0a14",
      textColor: "white",
      selectedBackgroundColor: "#9810fa",
      selectedTextColor: "white",
    },
  },
  borderRadius: "8px",
  backgroundColor: "#1a1a2e",
  headingColor: "#ffffff",
  textColor: "#e6e6e6",
  borderColor: "white",
  link: "#9810fa",
  font: "Arial, sans-serif",
};

<RedactoNoticeConsent
  // ... other props
  settings={customSettings}
/>

Available Style Properties:

Localization

The SDK supports 20+ languages with a focus on Indian regional languages.

Supported Languages

Setting Language

Specify the language using the language prop:

<RedactoNoticeConsent
  // ... other props
  language="hi"  // Display in Hindi
/>

The SDK will:

1. Fetch translated consent content for the specified language
2. Display all UI text in that language
3. Show a language selector for users to switch languages (if configured in your notice)

Audio / Text-to-Speech

The SDK includes text-to-speech support for accessibility, allowing users to listen to consent notice content.

Supported Languages for Audio

Audio is available for a subset of languages:

How It Works

1. Audio is automatically generated when consent notices are created/translated
2. Users see an audio playback control in the consent notice
3. Clicking play reads out the consent notice content
4. Audio is pre-generated and cached for fast playback

Note: Audio generation is handled server-side. No additional configuration is needed in the SDK.

Additional Features

• TypeScript support with full type definitions
• ESM and CommonJS module formats
• Accessibility features (ARIA labels, keyboard navigation)
• Age verification and guardian consent for minors
• Reconsent flow support