# ReportsOverview Embed

Use the ReportsOverview embed to show the progress and result of a background check for a candidate.

The ReportsOverview embed displays:

* the name of the package ordered,
* the status of the invitation to the candidate,
* the status of the report's progress and its ETA,
* the result of the report and its completion timestamp, and
* the status of any screenings being run for the given report.


The ReportsOverview embed also provides a link to the candidate in the Checkr Dashboard if the invitation has not yet been completed, and a link to the report once it has been initiated.

## Customize it live

This is the real `ReportsOverview` component running in `fakeMode` (canned data, no API calls, no credentials). Restyle it with the controls — every knob maps to a documented [`styles`](#style-the-embed) selector — then copy the exact code your changes produce. (ReportsOverview is a read-only report view, so its customization is visual.)

## Add the embed to your page

The ReportsOverview embed may be added to your page either inline or as a modal. Adding the embed inline will render the embed on your application's page. Adding it as a modal allows you to launch the embed from a button or other feature on your page.
The embed requires a Checkr candidate ID or an external candidate ID (the [externalCandidateId](/embeds/new-invitation-embed#customize-the-embed) property) as an argument.

### Add the embed inline

Both JavaScript and React may be used to insert the Embed inline in your application. The results shown below are examples of the Embed's default appearance.

JavaScript
```javascript
const embed = new Checkr.Embeds.ReportsOverview({ externalCandidateId: 'wd-ba1hdmbaav' })
```

React
```jsx
<ReportsOverview externalCandidateId='wd-ba1hdmbaav' />
```

Result
### Add the embed as a modal

Use JavaScript to launch the Embed as a modal, for example on the click of a button in your application.

JavaScript
```javascript
const btn = document.getElementById('your-button')

btn.addEventListener('click', event => {
  const embed = new Checkr.Embeds.ReportsOverview({ candidateId: '4c262214ab5daabbd1a6basc' })
  embed.modal()
})
```

Result
The default modal width is `600px` on desktops and `100%` on mobile devices. Use `width` property to change the default desktop width.

```
embed.modal({ width: '700px' })
```

## Add authentication

Add SessionToken based on the [authentication](/embeds/getting-started#add-authentication) section above. For example:

JavaScript
```javascript
const embed = new Checkr.Embeds.ReportsOverview({ sessionTokenPath: '/your-backend/session-tokens', externalCandidateId: 'wd-ba1hdmbaav' })
```

React
```jsx
<ReportsOverview sessionTokenPath='/your-backend/checkr-session-tokens' externalCandidateId='wd-ba1hdmbaav' />
```

## Status Display

The ReportsOverview embed will display the following status and results descriptions.

| Status | Description |
|  --- | --- |
| Invitation Sent | The Checkr invitation has been sent. |
| Invitation Expired | The candidate did not complete the Checkr invitation within 7 days of its creation. |
| Invitation Canceled | The invitation was canceled from the Dashboard or API. |
| Report Pending | The report is in progress. |
| Report Suspended | An exception has not been resolved within 7 days (or two attempts), and the report has been placed in Suspended status. |
| Clear | The background check report was completed with a Clear result value. |
| Clear with canceled screenings | A suspended or pending report was force completed, which cancelled some screenings. The completed screenings were all clear. |
| Did Not Pass | No dispute was initiated by the candidate within the required 7 days after a pre-adverse action was initiated by the customer. |
| Report Canceled | The report was cancelled from the Dashboard or API. |


## Screening Display

Each Report is made up of a variety of Screenings. Beneath the overall Report status you can see the Screenings listed out, and their respective statuses, as well as their time of completion (if they have completed).

To disable this feature, you can set the parameter of `showIndividualScreenings` to `false` (to enable it, you can either omit the parameter or set it to `true`).

Additionally, these screenings are held in an expandable/collapsible section, to control what the *default* state there is, you can set `expandScreenings` to either `true` or `false`.

Screenings can have the following statuses:

| Status | Description |
|  --- | --- |
| Pending | This Screening is in progress. |
| Complete | This Screening has finished being run, but no decision has been made on it. |
| Clear | This screening has finished, with a Clear result value. |
| Consider | This screening has finished, with a Consider result value. |


## Style the embed

Use standard CSS to customize the look and feel of your embeds.

### Adjust the width on the page

By default, Embeds are rendered using the full width of their container `div`. Adjust the width of the container `div` on your page to control the width of the embed.

### Customize the theme

Embeds include a default theme, and allow users to both customize this default theme or build a theme from scratch.

* To customize the default theme, specify the styles you wish to override.
* To build a theme from scratch, use the `useBaseline` option.


**Note:** An embed's styles neither inherit nor conflict with your site's styles. Embed UIs are complex, have a specific structure, and therefore have specific styling needs. Inheriting an external page's styling will break the embed.

The following classes may be targeted by CSS.

| Embed CSS selectors |  | Loading CSS selectors |  |
|  --- | --- | --- | --- |
| .reports-overview | .row-content | .checkr-embed-loading-container | .loading-bar |
| .bgc-item | .bgc-status-container | .rect1 | .rect2 |
| .bgc-package-name | .bgc-status-text | .rect3 | .rect4 |
| .bgc-time-description | .bgc-candidate-link | .rect5 |  |
| .bgc-dashboard-link | .bgc-container |  |  |
| .screenings-list | .screening |  |  |
| .screening-title | .screening-status-badge |  |  |
| .screening-timestamp |  |  |  |


### Edit the default theme

To edit the default theme, specify new values for any of the default CSS selectors listed above.

JavaScript
```javascript
const styles = {
  '.reports-overview': {
    padding: '5px',
  },
  '.bgc-item': {
    border: 'none',
    'border-radius': '5px',
    'box-shadow': '0px 2px 5px rgb(0 0 0 / 15%)',
  },
  '.bgc-package-name': {
    'font-size': '150%',
    'font-weight': 'bold',
    color: '#F45D48',
  },
  '.bgc-status-container': {
    'background-color': 'white !important',
    color: 'black !important',
    'font-size': '100%',
  },
  '.bgc-dashboard-link': {
    'background-color': '#0a8080',
    padding: '5px 8px 5px 8px',
    'font-size': '14px',
    color: 'white',
    'text-decoration': 'none',
    'border-radius': '3px',
  },
  '.bgc-dashboard-link:hover': {
    opacity: '.9',
    cursor: 'pointer',
  },
};

const embed = new Checkr.Embeds.ReportsOverview({ styles })
```

Result
The embed renders with the customized theme.

### Define a custom theme

To define a custom theme from scratch, set `useBaseline` to `true`, then specify values for any of the selectors listed below. If values are not set for a selector, the embed will render without styles for that value.

JavaScript
```jsx
const styles = {
  useBaseline: true,
  '.reports-overview': {
    'border-radius': '0.375rem',
    'background-color': '#6772e5',
    padding: '0.6rem 0.6rem',
  },
  '.bgc-container': {
    padding: 'none',
    border: 'none',
  },
  '.bgc-header-title': {
    color: 'white',
  },
  '.bgc-item .container': {
    'background-color': '#7795f8',
    border: 'none',
    'border-radius': '5px',
    'box-shadow': '0px 2px 5px rgb(0 0 0 / 15%)',
    padding: '15px',
  },
  '.bgc-package-name': {
    'font-size': '130%',
    'font-weight': 'bold',
    color: 'white',
  },
  '.bgc-status-text': {
    'font-size': '100%',
    'font-weight': 500,
    color: 'white',
  },
  '.bgc-time-description': {
    color: '#87bbfd',
  },
  '.bgc-candidate-link': {
    'background-color': '#fcd669',
    padding: '5px 8px 5px 8px',
    'font-size': '14px',
    'text-decoration': 'none',
    'border-radius': '3px',
    color: 'black',
  },
  '.bgc-candidate-link:hover': {
    opacity: '.9',
    cursor: 'pointer',
  },
  '.screening-status-badge': {
    color: 'white',
  },
}

<ReportsOverview styles={styles} />
```

Result
The embed renders with the custom baseline theme.