This guide provides detailed instructions for integrating Copyleaks’ web report module into your Angular application to display plagiarism detection, AI content detection, and writing assistance 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 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	@copyleaks/ng-web-report
   13	Latest

   Then, install the package:

   npm

   npm install @copyleaks/ng-web-report --save

   yarn

   yarn add @copyleaks/ng-web-report

   Finally, ensure the following peer dependencies are installed:

   Dependency	Version
   @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

   You can install them using:

   npm

   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

   yarn

   yarn add @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

   
   

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

   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);
     }
   }

   your.component.html

   your.component.html

   <copyleaks-web-report
     [reportEndpointConfig]="endpointConfig"
     [showDisabledProducts]="false"
     (onReportRequestError)="handleError($event)"
     (onCompleteResultUpdate)="handleUpdate($event)">
   </copyleaks-web-report>

   
   

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. 🎉 Congratulations!

   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:

Parameter	Type	Description
contentMode	string	Determines content view type (‘text’ or ‘html’)
sourcePage	number	Page number in text view pagination (starts from 1)
suspectPage	number	Page number in text view pagination (starts from 1)
suspectId	string	Identifier of the selected matching result
alertCode	string	Code 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, please contact Copyleaks Support or ask a question on StackOverflow with the copyleaks-api tag. We appreciate your interest in Copyleaks and look forward to supporting your efforts to maintain originality and integrity.