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.

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 selector — then copy the exact code your changes produce. (ReportsOverview is a read-only report view, so its customization is visual.)

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 property) as an argument.

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.

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

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

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

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

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 SessionToken based on the authentication section above. For example:

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

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

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:

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

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.

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.

The following classes may be targeted by CSS.

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

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

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.

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} />