Disclosure & Consent Embed

Use the Disclosure & Consent embed to include the required disclosures in your application process. These are the disclosures that candidates must read, understand and agree to before you can order a background check. The Disclosure & Consent embed works only for United States (US) screenings.

This is the real DisclosureConsent component running in fakeMode (canned data, no API calls, no credentials). Restyle and reconfigure it with the controls — every knob maps to a documented styles selector or embed option — then copy the exact code your changes produce.

The following data is captured from the user of this Embed:

• The candidate's consent to create a background check
• The date and time when the candidate submitted their e-signature for consent
• The candidate's IP address

You can add the Disclosure & Consent embed to your page either inline or as a modal. Adding the embed inline renders 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 initializes with some required and optional parameters

You can use both JavaScript and React 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.DisclosureConsent({
    accountName='Your Company Name'
    candidateFullName='Kobe Bryant'
    candidateId='4c262214ab5daabbd1a6basc'
    language='en'
    packageSlug='basic'
    sessionTokenPath='/your-backend/checkr-session-tokens'
    workLocationState='CA'
    workLocationCity='San Francisco'
    zipCode='94001'
});
embed.render('#your-placeholder-div')

Use JavaScript to launch the Embed as a modal triggered by a user-interface element.

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

btn.addEventListener('click', event => {
  const embed = new Checkr.Embeds.DisclosureConsent({
    accountName='Your Company Name'
    candidateFullName='Kobe Bryant'
    candidateId='4c262214ab5daabbd1a6basc'
    language='en'
    packageSlug='basic'
    sessionTokenPath='/your-backend/checkr-session-tokens'
    workLocationState='CA'
    workLocationCity='San Francisco'
    zipCode='94001'
  });
  embed.modal()
});

Add SessionToken based on the authentication section above.

const embed = new Checkr.Embeds.DisclosureConsent({ sessionTokenPath: '/your-backend/checkr-session-tokens' })

Request callbacks trigger when the loading of the disclosure fails, or when a candidate's submitted consent is either successful or unsuccessful.

onLoadDisclosureError triggers when the disclosure fails to load. This could because of an invalid input to the embed or errors from the Checkr API. The error messages pass as the callback data. The embed UI shows a generic error message which can be customized using the embed input property clientSideErrorMessage and serverSideErrorMessage.

const handleOnLoadDisclosureError = (response) => { console.log(response) }
const embed = new Checkr.Embeds.DisclosureConsent({onLoadDisclosureError: handleOnLoadDisclosureError})

onConsentSubmitError triggers when the submission of the candidate's consent fails. The reasons for the failure pass as the callback data. The embed UI shows a generic error message which can be customized using the prop clientSideErrorMessage and serverSideErrorMessage.

const handleOnConsentSubmitError = (response) => { console.log(response) }
const embed = new Checkr.Embeds.DisclosureConsent({onConsentSubmitError: handleOnConsentSubmitError})

onConsentSubmitSuccess triggers when the candidate's consent submits successfully. The embed UI shows a generic success message which can be customized using the embed input property successMessage.

const handleOnConsentSubmitSuccess = (response) => { console.log(response) }
const embed = new Checkr.Embeds.DisclosureSubmit({onConsentSubmitSuccess: handleOnConsentSubmitSuccess})

The Disclosure & Consent embed provides the following option to customize its default behavior.

Checkr allows you to customize the embed's title, label and message texts shown on the UI. The parameters are below.

const embed = new Checkr.Embeds.DisclosureConsent({
    embedTitle: 'This is embed title',
    nextButtonLabel: 'Next button label',
    previousButtonLabel: 'Previous button label',
    submitButtonLabel: 'Submit button label'
});

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

By default, Embeds render 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 custom theme.

• To customize the default theme, specify the styles you wish to override.
• To build a custom theme, use the useBaseline option.

CSS can target classes below

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

const styles = {
  '.btn-primary': {
    'background': '#0a8080',
  },
  '.card-block': {
    'background': '#F3FAFB',
  },
  '.card-header': {
    'background': '#0a8080',
    'font-style': 'italic',
    'color': 'white'
  },
  '.checkbox-container': {
    'font-style': 'italic',
    'font-weight': 'bold',
  }
};

const embed = new Checkr.Embeds.DisclosureConsent({
    styles: styles
});

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

const styles = {
  useBaseline: true,
  '.btn-primary': {
    'background': '#002853',
    'color': 'white',
  },
  '.btn-secondary': {
    'background': '#D3D3D3',
    'color': 'black',
  },
};

const embed = new Checkr.Embeds.DisclosureConsent({
  styles: styles
})