GPT-5.2 Powered AI
DQM
React Component
Integrate Digital Quality Management directly into your React application. Real-time analysis for Accessibility, SEO, Content Quality, and more.
WCAG 2.1 AA/AAA compliant
Lightning-fast analysis
Enterprise-grade security
App.tsx
import { DQMSidebar } from '@crownpeak/dqm-react-component';
function App() {
return (
<DQMSidebar
open={sidebarOpen}
onClose={() => setSidebarOpen(false)}
onOpen={() => setSidebarOpen(true)}
/>
);
}Scroll Down
Powerful Features
Powerful Features
Everything you need for digital quality
Accessibility
SEO
Content
Performance
GPT-5.2
AI Translation
Automatic translation of analysis results using GPT-5.2 — supports over 40 languages with reasoning effort control.
GPT-5.2
Auto-Detect Language
Summary Generation
Contextual Translation
Quality Analysis
Comprehensive quality metrics with detailed scores for each category.
WCAG 2.1
Accessibility Testing
Automatic WCAG 2.1 AA/AAA compliance testing with detailed error reports and solutions.
Error Highlighting
Visual highlighting of issues directly in the HTML source code.
Secure Authentication
Backend session management with secure credential storage and Redis support.
i18n
Multilingual UI
User interface available in English, German, and Spanish with automatic language detection.
Widget Bundle
Standalone IIFE/ESM bundles for CMS integration without build pipeline.
Try it yourself
Try it yourself
Experience the power of DQM
Click the button below to open the interactive DQM Sidebar and explore the features with sample data.
https://your-website.com/page
16
Passed
3
Warnings
1
Errors
87%
Total Score
Easy Integration
Easy Integration
Get started in 5 minutes
Installation
npm install @crownpeak/dqm-react-componentReact / Next.js
import { DQMSidebar } from '@crownpeak/dqm-react-component';
import { useState } from 'react';
function App() {
const [sidebarOpen, setSidebarOpen] = useState(false);
return (
<>
<YourApp />
<DQMSidebar
open={sidebarOpen}
onClose={() => setSidebarOpen(false)}
onOpen={() => setSidebarOpen(true)}
config={{
apiKey: process.env.REACT_APP_DQM_API_KEY,
websiteId: process.env.REACT_APP_DQM_WEBSITE_ID,
}}
/>
</>
);
}