{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-embeds/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["embed-studio","tabs","tab","embed-preview","admonition"]},"type":"markdown"},"seo":{"title":"ReportsOverview Embed","description":"Checkr developer documentation for background check APIs, embeds, and partner integrations."},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"reportsoverview-embed","__idx":0},"children":["ReportsOverview Embed"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the ReportsOverview embed to show the progress and result of a background check for a candidate."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ReportsOverview embed displays:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["the name of the package ordered,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["the status of the invitation to the candidate,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["the status of the report's progress and its ETA,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["the result of the report and its completion timestamp, and"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["the status of any screenings being run for the given report."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"customize-it-live","__idx":1},"children":["Customize it live"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This is the real ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ReportsOverview"]}," component running in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fakeMode"]}," (canned data, no API calls, no credentials). Restyle it with the controls — every knob maps to a documented ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#style-the-embed"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles"]}]}," selector — then copy the exact code your changes produce. (ReportsOverview is a read-only report view, so its customization is visual.)"]},{"$$mdtype":"Tag","name":"EmbedStudio","attributes":{"component":"ReportsOverview","props":{"externalCandidateId":"demo-candidate-001","sessionTokenPath":"/fakemode-noop"},"codeProps":{"sessionTokenPath":"/session-token","externalCandidateId":"<candidate-id>"},"height":620,"controls":[{"key":"accent","label":"Dashboard link color","kind":"color","default":"#2563EB","style":{"selectors":[".bgc-dashboard-link"],"props":["background-color","border-color"]}},{"key":"packageColor","label":"Package name color","kind":"color","default":"#111827","style":{"selectors":[".bgc-package-name"],"props":["color"]}},{"key":"cardBg","label":"Card background","kind":"color","default":"#ffffff","style":{"selectors":[".bgc-item"],"props":["background-color"]}},{"key":"radius","label":"Card corner radius","kind":"slider","default":0,"min":0,"max":24,"unit":"px","style":{"selectors":[".bgc-item"],"props":["border-radius"]}},{"key":"font","label":"Font","kind":"select","default":"-apple-system, BlinkMacSystemFont, sans-serif","options":[{"label":"System","value":"-apple-system, BlinkMacSystemFont, sans-serif"},{"label":"Serif","value":"Georgia, \"Times New Roman\", serif"},{"label":"Monospace","value":"\"SF Mono\", Menlo, monospace"}],"style":{"selectors":[".reports-overview"],"props":["font-family"]}}]},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"add-the-embed-to-your-page","__idx":2},"children":["Add the embed to your page"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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 ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/embeds/new-invitation-embed#customize-the-embed"},"children":["externalCandidateId"]}," property) as an argument."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-the-embed-inline","__idx":3},"children":["Add the embed inline"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"JavaScript","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"const embed = new Checkr.Embeds.ReportsOverview({ externalCandidateId: 'wd-ba1hdmbaav' })\n","lang":"javascript"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"React","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"jsx","header":{"controls":{"copy":{}}},"source":"<ReportsOverview externalCandidateId='wd-ba1hdmbaav' />\n","lang":"jsx"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Result","disable":false},"children":[{"$$mdtype":"Tag","name":"EmbedPreview","attributes":{"component":"ReportsOverview","props":{"sessionTokenPath":"/test","externalCandidateId":"wd-ba1hdmbaav"}},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-the-embed-as-a-modal","__idx":4},"children":["Add the embed as a modal"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use JavaScript to launch the Embed as a modal, for example on the click of a button in your application."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"JavaScript","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"const btn = document.getElementById('your-button')\n\nbtn.addEventListener('click', event => {\n  const embed = new Checkr.Embeds.ReportsOverview({ candidateId: '4c262214ab5daabbd1a6basc' })\n  embed.modal()\n})\n","lang":"javascript"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Result","disable":false},"children":[{"$$mdtype":"Tag","name":"EmbedPreview","attributes":{"component":"ReportsOverview","props":{"sessionTokenPath":"/test","candidateId":"4c262214ab5daabbd1a6basc"},"mode":"modal"},"children":[]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The default modal width is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["600px"]}," on desktops and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["100%"]}," on mobile devices. Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["width"]}," property to change the default desktop width."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"embed.modal({ width: '700px' })\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"add-authentication","__idx":5},"children":["Add authentication"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add SessionToken based on the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/embeds/getting-started#add-authentication"},"children":["authentication"]}," section above. For example:"]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"JavaScript","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"const embed = new Checkr.Embeds.ReportsOverview({ sessionTokenPath: '/your-backend/session-tokens', externalCandidateId: 'wd-ba1hdmbaav' })\n","lang":"javascript"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"React","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"jsx","header":{"controls":{"copy":{}}},"source":"<ReportsOverview sessionTokenPath='/your-backend/checkr-session-tokens' externalCandidateId='wd-ba1hdmbaav' />\n","lang":"jsx"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"status-display","__idx":6},"children":["Status Display"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ReportsOverview embed will display the following status and results descriptions."]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Status"},"children":["Status"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Invitation Sent"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The Checkr invitation has been sent."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Invitation Expired"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The candidate did not complete the Checkr invitation within 7 days of its creation."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Invitation Canceled"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The invitation was canceled from the Dashboard or API."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Report Pending"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The report is in progress."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Report Suspended"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["An exception has not been resolved within 7 days (or two attempts), and the report has been placed in Suspended status."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Clear"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The background check report was completed with a Clear result value."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Clear with canceled screenings"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["A suspended or pending report was force completed, which cancelled some screenings. The completed screenings were all clear."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Did Not Pass"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No dispute was initiated by the candidate within the required 7 days after a pre-adverse action was initiated by the customer."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Report Canceled"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The report was cancelled from the Dashboard or API."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"screening-display","__idx":7},"children":["Screening Display"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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)."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To disable this feature, you can set the parameter of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["showIndividualScreenings"]}," to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," (to enable it, you can either omit the parameter or set it to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},")."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Additionally, these screenings are held in an expandable/collapsible section, to control what the ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["default"]}," state there is, you can set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["expandScreenings"]}," to either ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Screenings can have the following statuses:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Status"},"children":["Status"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Pending"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["This Screening is in progress."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Complete"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["This Screening has finished being run, but no decision has been made on it."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Clear"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["This screening has finished, with a Clear result value."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Consider"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["This screening has finished, with a Consider result value."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"style-the-embed","__idx":8},"children":["Style the embed"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use standard CSS to customize the look and feel of your embeds."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"adjust-the-width-on-the-page","__idx":9},"children":["Adjust the width on the page"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["By default, Embeds are rendered using the full width of their container ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["div"]},". Adjust the width of the container ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["div"]}," on your page to control the width of the embed."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"customize-the-theme","__idx":10},"children":["Customize the theme"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Embeds include a default theme, and allow users to both customize this default theme or build a theme from scratch."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["To customize the default theme, specify the styles you wish to override."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["To build a theme from scratch, use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["useBaseline"]}," option."]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["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."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following classes may be targeted by CSS."]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Embed CSS selectors"},"children":["Embed CSS selectors"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":""},"children":[]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Loading CSS selectors"},"children":["Loading CSS selectors"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":""},"children":[]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".reports-overview"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".row-content"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".checkr-embed-loading-container"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".loading-bar"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".bgc-item"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".bgc-status-container"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".rect1"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".rect2"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".bgc-package-name"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".bgc-status-text"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".rect3"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".rect4"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".bgc-time-description"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".bgc-candidate-link"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".rect5"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".bgc-dashboard-link"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".bgc-container"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".screenings-list"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".screening"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".screening-title"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".screening-status-badge"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".screening-timestamp"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"edit-the-default-theme","__idx":11},"children":["Edit the default theme"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To edit the default theme, specify new values for any of the default CSS selectors listed above."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"JavaScript","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"const styles = {\n  '.reports-overview': {\n    padding: '5px',\n  },\n  '.bgc-item': {\n    border: 'none',\n    'border-radius': '5px',\n    'box-shadow': '0px 2px 5px rgb(0 0 0 / 15%)',\n  },\n  '.bgc-package-name': {\n    'font-size': '150%',\n    'font-weight': 'bold',\n    color: '#F45D48',\n  },\n  '.bgc-status-container': {\n    'background-color': 'white !important',\n    color: 'black !important',\n    'font-size': '100%',\n  },\n  '.bgc-dashboard-link': {\n    'background-color': '#0a8080',\n    padding: '5px 8px 5px 8px',\n    'font-size': '14px',\n    color: 'white',\n    'text-decoration': 'none',\n    'border-radius': '3px',\n  },\n  '.bgc-dashboard-link:hover': {\n    opacity: '.9',\n    cursor: 'pointer',\n  },\n};\n\nconst embed = new Checkr.Embeds.ReportsOverview({ styles })\n","lang":"javascript"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Result","disable":false},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The embed renders with the customized theme."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"define-a-custom-theme","__idx":12},"children":["Define a custom theme"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To define a custom theme from scratch, set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["useBaseline"]}," to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"JavaScript","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"jsx","header":{"controls":{"copy":{}}},"source":"const styles = {\n  useBaseline: true,\n  '.reports-overview': {\n    'border-radius': '0.375rem',\n    'background-color': '#6772e5',\n    padding: '0.6rem 0.6rem',\n  },\n  '.bgc-container': {\n    padding: 'none',\n    border: 'none',\n  },\n  '.bgc-header-title': {\n    color: 'white',\n  },\n  '.bgc-item .container': {\n    'background-color': '#7795f8',\n    border: 'none',\n    'border-radius': '5px',\n    'box-shadow': '0px 2px 5px rgb(0 0 0 / 15%)',\n    padding: '15px',\n  },\n  '.bgc-package-name': {\n    'font-size': '130%',\n    'font-weight': 'bold',\n    color: 'white',\n  },\n  '.bgc-status-text': {\n    'font-size': '100%',\n    'font-weight': 500,\n    color: 'white',\n  },\n  '.bgc-time-description': {\n    color: '#87bbfd',\n  },\n  '.bgc-candidate-link': {\n    'background-color': '#fcd669',\n    padding: '5px 8px 5px 8px',\n    'font-size': '14px',\n    'text-decoration': 'none',\n    'border-radius': '3px',\n    color: 'black',\n  },\n  '.bgc-candidate-link:hover': {\n    opacity: '.9',\n    cursor: 'pointer',\n  },\n  '.screening-status-badge': {\n    color: 'white',\n  },\n}\n\n<ReportsOverview styles={styles} />\n","lang":"jsx"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Result","disable":false},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The embed renders with the custom baseline theme."]}]}]}]},"headings":[{"value":"ReportsOverview Embed","id":"reportsoverview-embed","depth":1},{"value":"Customize it live","id":"customize-it-live","depth":2},{"value":"Add the embed to your page","id":"add-the-embed-to-your-page","depth":2},{"value":"Add the embed inline","id":"add-the-embed-inline","depth":3},{"value":"Add the embed as a modal","id":"add-the-embed-as-a-modal","depth":3},{"value":"Add authentication","id":"add-authentication","depth":2},{"value":"Status Display","id":"status-display","depth":2},{"value":"Screening Display","id":"screening-display","depth":2},{"value":"Style the embed","id":"style-the-embed","depth":2},{"value":"Adjust the width on the page","id":"adjust-the-width-on-the-page","depth":3},{"value":"Customize the theme","id":"customize-the-theme","depth":3},{"value":"Edit the default theme","id":"edit-the-default-theme","depth":3},{"value":"Define a custom theme","id":"define-a-custom-theme","depth":3}],"frontmatter":{"title":"ReportsOverview Embed","description":"Use the ReportsOverview embed to show the progress and result of a background check for a candidate.","markdown":{"toc":{"hide":true}},"seo":{"title":"ReportsOverview Embed"}},"lastModified":"2026-09-18T10:51:22.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/embeds/reports-overview-embed","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}