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

## Customize it live

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`](#style-the-embed) selector or [embed option](#customize-the-embed) — 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


## Add the embed to your page

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

| Parameter | Description | Required |
|  --- | --- | --- |
| accountName | Your organization name | Yes |
| candidateFullName | Candidate has to type their complete name to complete an electronic signature | Yes |
| candidateId | Candidate Id for whom background check will be created | Yes |
| packageSlug | Package slug for which background check will be created | Yes |
| sessionTokenPath | Your application's backend endpoint to get the Checkr session token | Yes |
| workLocationState | Work location state | Yes |
| workLocationCity | Work location city | No |
| zipCode | Candidate ZIP code | No |
| driverLicenseState | Driver license state | Only if package has MVR |


### Add the embed inline

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.

JavaScript
```javascript
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')
```

React
```jsx
import {Embeds} from '@checkr/web-sdk'
const DisclosureConsent = Embeds.DisclosureConsent.useReact(React, ReactDOM)

return (
  <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'
  />
)
```

Result
### Add the embed as a modal

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

JavaScript
```javascript
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()
});
```

Result
## Add authentication

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

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

React
```jsx
<DisclosureConsent sessionTokenPath='/your-backend/checkr-session-tokens' />
```

## Add request callbacks

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

### onLoadDisclosureError

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

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

React
```jsx
const handleOnLoadDisclosureError = (response) => { console.log(response) }
<DisclosureConsent onLoadDisclosureError={handleOnLoadDisclosureError}/>
```

Callback data
```json
{
  "errors": {
    "base": [
        "BasePackage not found"
    ]
  }
}
```

### onConsentSubmitError

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

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

React
```jsx
const handleOnConsentSubmitError = (response) => { console.log(response) }
<DisclosureConsent onConsentSubmitError={handleOnConsentSubmitError}/>
```

Callback data
```json
{
  "errors": {
    "base": [
        "Invalid package_slug"
    ]
  }
}
```

### onConsentSubmitSuccess

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

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

React
```jsx
const handleOnConsentSubmitSuccess = (response) => { console.log(response) }
<DisclosureConsent onConsentSubmitSuccess={handleOnConsentSubmitSuccess}/>
```

Callback data
```
'Candidate consent is recorded'
```

## Customize the embed

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.

| Parameter | Description | Default value |
|  --- | --- | --- |
| clientSideErrorMessage | Error message shown on embed if any UI or backend validation fails | There was an issue with the provided information. Contact {{accountName}} to check the details |
| consentSubmitSuccessMessage | Message shown on embed upon successful submission of candidate consent | You have completed the disclosure & consent section |
| embedTitle | Title of the embed | Disclosure & Consent |
| nextButtonLabel | Next button label | Continue > |
| language | Supported languages are `en` (English) & `es` (Spanish) | `en` |
| previousButtonLabel | Previous button label | < Previous |
| serverSideErrorMessage | Error message shown on embed for any server side errors | A system error occured. We have been notified and will resolve it as soon as possible. |
| submitButtonLabel | Submit button label | Submit |


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

React
```jsx
<DisclosureConsent
  embedTitle='This is embed title'
  nextButtonLabel='Next button label'
  previousButtonLabel='Previous button label'
  submitButtonLabel='Submit button label'
/>
```

Result
## Style the embed

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

### Adjust the width on the page

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.

### Customize the theme

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.


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

CSS can target classes below

| Embed CSS selectors |  | Loading CSS selectors |  |
|  --- | --- | --- | --- |
| .btn-primary | .checkbox-container | .checkr-embeds-loading-container | .rect4 |
| .btn-secondary | .disclosure-consent | .loading-bar | .rect5 |
| .card | .form-control | .rect1 |  |
| .card-header | .form-control-label | .rect2 |  |
| .card-block | .scrollable | .rect3 |  |


### 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 = {
  '.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
});
```

Result
The embed renders with the customized default theme.

### Define a custom theme

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.

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

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

Result
The embed renders with the custom theme.