# Install Open Source Web Report

> Integrate the Copyleaks open-source web report module into your app to display plagiarism, AI detection, and grammar results with full theming control.

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](https://angular.dev/) 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
<Steps>
  <Step>
    ### Before you begin
    Before you begin, ensure you have:

    - A [Copyleaks account](https://api.copyleaks.com/signup) 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](/guides/authenticity/detect-plagiarism-text/) guide
  </Step>

  <Step>
    ### Installation
    First, select the version corresponding to your Angular version:

    | Angular Version | Library Version |
    | ------- | ------------------------ |
    | Angular 13      | 1.x.x (latest: 1.9.99)   |
    | Angular 19      | 2.x.x (starting at 2.0.0) |

    Then, install the package:

    <CodeGroup>
        ```bash "Angular 13"
        npm install @copyleaks/ng-web-report@^1.9.99 --save
        ```
        ```bash "Angular 19"
        npm install @copyleaks/ng-web-report@^2.0.0 --save
        ```
    </CodeGroup>

    Finally, ensure the following peer dependencies are installed:

    **For Angular 13 (v1.x.x)**

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

    ```bash
    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)**

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

    ```bash
    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
    ```
  </Step>

  <Step>
    ### 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](/reference/actions/downloads/export/) 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
  </Step>

  <Step>
    ### Implementation
    Add `CopyleaksWebReportModule` and `HttpClientModule` to your module's imports:

    ```typescript
    // app.module.ts

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

    <CodeGroup>
    ```typescript your.component.ts
    // your.component.ts

    @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);
      }
    }
    ```
    ```html your.component.html
    <!-- your.component.html -->
    <copyleaks-web-report
      [reportEndpointConfig]="endpointConfig"
      [showDisabledProducts]="false"
      (onReportRequestError)="handleError($event)"
      (onCompleteResultUpdate)="handleUpdate($event)">
    </copyleaks-web-report>
    ```
    </CodeGroup>
  </Step>

  <Step>
    ### Advanced customization
    You can add custom actions, tabs, and more to the report interface. Here are a few examples:

    **Custom Actions**
    ```html
    <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**
    ```html
    <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>
    ```
  </Step>

  <Step>
    ### 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.
  </Step>
</Steps>

## 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

<CardGroup cols={2}>
  <Card title="Package repository on Github" icon="github" href="https://github.com/Copyleaks/ng-web-report">Access the source code and contribute to the development of the Copyleaks Web Report.</Card>
  <Card title="Accessibility information (VPAT report)" icon="universal-access" href="https://copyleaks.com/accessibility/">Review the Voluntary Product Accessibility Template (VPAT) report for accessibility compliance.</Card>
</CardGroup>

## Support

Should you require any assistance or have inquiries, contact [**Copyleaks Support**](https://help.copyleaks.com/hc/en-us/requests/new) or ask a question on [**Stack Overflow**](https://stackoverflow.com/questions/tagged/copyleaks-api) with the `copyleaks-api` tag.