This guide provides detailed instructions for integrating Copyleaks’ web report module into your Angular application to display plagiarism detection, AI content detection, and Grammar Checker reports while maintaining your brand identity. Copyleaks Web Report is an Angular module designed to integrate plagiarism and AI detection reporting seamlessly into your application. This module offers a user-friendly, engaging, and flexible interface for presenting plagiarism and AI content reports, showcasing the authenticity and uniqueness of submitted files or text.

​
Key features

  • Customizable Layouts: Various layout options for report display
  • Responsive Design: Adapts to different screen sizes for consistent user experience
  • API Integration: Configurable endpoints for efficient data retrieval
  • Accessibility Focused: Inclusive design for a wider range of users
  • Error Handling: Effective management of data retrieval errors

​
Get started

1

​
Before you begin

Before you begin, ensure you have:
  • A Copyleaks account with the ability to complete successful scans and store results
  • Server-side application with access to stored Copyleaks reports
  • Angular application (version compatibility detailed below)
  • Familiarity with the Copyleaks’ Authenticity API. If you haven’t tried it yet, get started with the Detect Plagiarism guide
2

​
Installation

First, select the version corresponding to your Angular version:
Angular VersionLibrary Version
Angular 131.x.x (latest: 1.9.99)
Angular 192.x.x (starting at 2.0.0)
Then, install the package:
npm install @copyleaks/ng-web-report@^1.9.99 --save
Finally, ensure the following peer dependencies are installed:For Angular 13 (v1.x.x)
DependencyVersion
@angular/common^13.1.1
@angular/core^13.1.1
@angular/localize^13.1.1
@angular/material^13.1.1
@angular/flex-layout^13.0.0-beta.36
scroll-into-view-if-needed^2.2.28
ngx-skeleton-loader^5.0.0
npm install @angular/localize@^13.1.1 @angular/material@^13.1.1 @angular/flex-layout@^13.0.0-beta.36 scroll-into-view-if-needed@^2.2.28 ngx-skeleton-loader@^5.0.0 --save
For Angular 19 (v2.x.x)
DependencyVersion
@angular/common^19.2.14
@angular/core^19.2.14
@angular/localize^19.2.14
@angular/material^19.2.19
ngx-flexible-layout^19.0.0
scroll-into-view-if-needed^2.2.28
ngx-skeleton-loader^6.0.0
@swimlane/ngx-charts^22.0.0
npm install @angular/localize@^19.2.14 @angular/material@^19.2.19 ngx-flexible-layout@^19.0.0 scroll-into-view-if-needed@^2.2.28 ngx-skeleton-loader@^6.0.0 @swimlane/ngx-charts@^22.0.0 --save
3

​
Integration

The general integration process follows these steps:
  1. Create a Copyleaks account
  2. Use Copyleaks API to scan for plagiarism
  3. Use the Export Methods to extract data and save it on your server/cloud
  4. Create HTTP endpoints to access the stored data
  5. Present the data in your website via the Copyleaks web report module
4

​
Implementation

Add CopyleaksWebReportModule and HttpClientModule to your module’s imports:
// app.module.ts
import { CopyleaksWebReportModule } from '@copyleaks/ng-web-report';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [AppComponent],
  imports: [
    // ...
    CopyleaksWebReportModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}
Create an endpoint configuration object that tells the report component where to fetch data, and then add the component to your template.
// your.component.ts
import { IClsReportEndpointConfigModel, IEndpointDetails } from '@copyleaks/ng-web-report';

@Component({
  // ...
})
export class YourComponent {
  public endpointConfig: IClsReportEndpointConfigModel;
  
  constructor() {
    // Define your endpoint configuration
    this.endpointConfig = {
      crawledVersion: {
        url: 'https://your-api.com/copyleaks/{scanId}/source',
        headers: {
          'Authorization': 'Bearer your-token',
          'Content-Type': 'application/json'
        }
      },
      completeResults: {
        url: 'https://your-api.com/copyleaks/{scanId}/completed',
        headers: {
          'Authorization': 'Bearer your-token',
          'Content-Type': 'application/json'
        }
      },
      result: {
        url: 'https://your-api.com/copyleaks/{scanId}/results/{RESULT_ID}',
        headers: {
          'Authorization': 'Bearer your-token',
          'Content-Type': 'application/json'
        }
      }
      // Optional: progress endpoint for real-time results
      // progress: { ... }
    };
  }
  
  // Event handlers
  handleError(error: ReportHttpRequestErrorModel): void {
    // Your error handling logic here
    console.error('Report request error:', error);
  }
  
  handleUpdate(results: ICompleteResults): void {
    // Your logic for processing report updates here
    console.log('Complete results updated:', results);
  }
}
5

​
Advanced customization

You can add custom actions, tabs, and more to the report interface. Here are a few examples:Custom Actions
<copyleaks-web-report [reportEndpointConfig]="endpointConfig">
  <cr-actions>
    <!-- Your custom action buttons -->
    <button mat-button (click)="yourCustomAction()">Custom Action</button>
  </cr-actions>
</copyleaks-web-report>
Custom Tabs
<copyleaks-web-report [reportEndpointConfig]="endpointConfig">
  <cr-custom-tabs>
    <cr-custom-tab-item [flexGrow]="0.3">
      <cr-custom-tab-item-title>Custom Analysis</cr-custom-tab-item-title>
      <cr-custom-tab-item-content>
        <!-- Your custom tab content -->
        <div class="custom-analysis">
          <h3>Additional Analysis</h3>
          <p>Your custom analysis content here...</p>
        </div>
      </cr-custom-tab-item-content>
    </cr-custom-tab-item>
  </cr-custom-tabs>
</copyleaks-web-report>
6

​
Summary

You have successfully integrated the Copyleaks Web Report into your Angular application. You can now display detailed plagiarism and AI detection reports to your users.

​
Query parameters

The report component interprets several query parameters:
ParameterTypeDescription
contentModestringDetermines content view type (‘text’ or ‘html’)
sourcePagenumberPage number in text view pagination (starts from 1)
suspectPagenumberPage number in text view pagination (starts from 1)
suspectIdstringIdentifier of the selected matching result
alertCodestringCode of the selected alert

​
Next steps

Package repository on Github

Access the source code and contribute to the development of the Copyleaks Web Report.

Accessibility information (VPAT report)

Review the Voluntary Product Accessibility Template (VPAT) report for accessibility compliance.

​
Support

Should you require any assistance or have inquiries, contact Copyleaks Support or ask a question on Stack Overflow with the copyleaks-api tag.