{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-embeds/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["embed-studio","tabs","tab","embed-preview","admonition"]},"type":"markdown"},"seo":{"title":"NewInvitation 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":"newinvitation-embed","__idx":0},"children":["NewInvitation Embed"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the NewInvitation embed to invite candidates to the Checkr-Hosted Apply Flow."]},{"$$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":["NewInvitation"]}," component running in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fakeMode"]}," (canned data, no API calls, no credentials). Restyle and reconfigure 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 or embed option — then copy the exact code your changes produce."]},{"$$mdtype":"Tag","name":"EmbedStudio","attributes":{"component":"NewInvitation","props":{"sessionTokenPath":"/fakemode-noop"},"codeProps":{"sessionTokenPath":"/session-token"},"height":680,"controls":[{"key":"brand","label":"Brand color","kind":"color","default":"#2563EB","style":{"selectors":[".btn-submit",".btn-primary"],"props":["background-color","border-color"]}},{"key":"fieldBg","label":"Field background","kind":"color","default":"#ffffff","style":{"selectors":[".form-control"],"props":["background-color"]}},{"key":"labelColor","label":"Label color","kind":"color","default":"#374151","style":{"selectors":[".form-label"],"props":["color"]}},{"key":"radius","label":"Button corner radius","kind":"slider","default":0,"min":0,"max":24,"unit":"px","style":{"selectors":[".btn",".btn-submit"],"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":[".new-invitation"],"props":["font-family"]}},{"key":"emailLabel","label":"Email field label","kind":"text","placeholder":"Enter email","prop":"emailLabel"},{"key":"packageLabel","label":"Package field label","kind":"text","placeholder":"Select a package","prop":"packageLabel"}]},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following data is captured from the user of this Embed:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Checkr allows businesses to model their organization as a tree of nodes. A ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/apis/openapi/nodes"},"children":["node"]}," selector is shown if the account is configured with more than one node."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The employment work location. Work location defines where your candidate will be employed."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The package to be used for the background check. Packages are a list of screenings to be run for a report."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The email address used to invite the candidate to the background check."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Optionally, for US-based candidates, a phone number to which the invitation will also be sent."]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"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 NewInvitation 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."]},{"$$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.NewInvitation()\nembed.render('#your-placeholder-div')\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":"import {Embeds} from '@checkr/web-sdk'\nconst NewInvitation = Embeds.NewInvitation.useReact(React, ReactDOM)\n\nreturn <NewInvitation />\n","lang":"jsx"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Result","disable":false},"children":[{"$$mdtype":"Tag","name":"EmbedPreview","attributes":{"component":"NewInvitation","props":{"sessionTokenPath":"/test"}},"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.NewInvitation()\n  embed.modal()\n})\n","lang":"javascript"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Result","disable":false},"children":[{"$$mdtype":"Tag","name":"EmbedPreview","attributes":{"component":"NewInvitation","props":{"sessionTokenPath":"/test"},"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"]}," option to change the desktop width."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"embed.modal({ width: '700px' })\n"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"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.NewInvitation({ sessionTokenPath: '/your-backend/session-tokens' })\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":"<NewInvitation sessionTokenPath='/your-backend/checkr-session-tokens' />\n","lang":"jsx"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"add-request-callbacks","__idx":6},"children":["Add request callbacks"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Request callbacks are triggered when sending an invitation to a candidate is successful or fails."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"oninvitationsuccess","__idx":7},"children":["onInvitationSuccess"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onInvitationSuccess"]}," is triggered when an invitation is successfully sent to a candidate. Use this callback to capture details like the Checkr Invitation or Candidate id in your system."]},{"$$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 handleOnInvitationSuccess = (response) => { console.log(response) }\nconst embed = new Checkr.Embeds.NewInvitation({onInvitationSuccess: handleOnInvitationSuccess})\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":"const handleOnInvitationSuccess = (response) => { console.log(response) }\n<NewInvitation onInvitationSuccess={handleOnInvitationSuccess}/>\n","lang":"jsx"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Callback data","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"json","header":{"controls":{"copy":{}}},"source":"{\n  \"candidate_id\": \"00f3d4c23b83e2b845ffd991\",\n  \"candidate_url\": \"https://dashboard.checkr.com/candidates/00f3d4c23b83e2b845ffd991\",\n  \"created_at\": \"2021-09-28T03:41:30.722Z\",\n  \"custom_external_status\": {\n    \"code\": \"invitation_created\",\n    \"message\": \"Invitation Sent\"\n  },\n  \"external_background_check_id\": null,\n  \"external_candidate_id\": \"external_id\",\n  \"external_job_application_id\": null,\n  \"external_requester_id\": null,\n  \"external_system\": \"web-sdk\",\n  \"id\": \"bd6b0537212189fd6a4fa2db\",\n  \"invitation\": {\n    \"created_at\": \"2021-09-28T03:41:30.722Z\",\n    \"deleted_at\": null,\n    \"expires_at\": \"2021-12-28T03:41:30.722Z\",\n    \"id\": \"73a5d217bd981e885841b589\"\n  },\n  \"metadata\": {},\n  \"object\": {},\n  \"package\": {\n    \"id\": \"a44ax285528e6fde7d542192\",\n    \"name\": \"basic\",\n    \"slug\": \"basic\"\n  },\n  \"report\": {\n    \"created_at\": \"2021-09-28T03:41:30.722Z\",\n    \"completed_at\": null,\n    \"estimated_completion_time\": 1,\n    \"id\": \"e44aa283528e6fde7d542194\"\n  },\n  \"report_url\": \"https://dashboard.checkr.com/reports/e44aa283528e6fde7d542194\",\n  \"uri\": \"background_checks/bd6b0537212189fd6a4fa2db\"\n}\n","lang":"json"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"oninvitationerror","__idx":8},"children":["onInvitationError"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onInvitationError"]}," is triggered when sending an invitation fails. By default, these errors are displayed at the top of the rendered embed within your application. The NewInvitation embed will return all errors generated by the Checkr API."]},{"$$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 handleOnInvitationError = (response) => { console.log(response) }\nconst embed = new Checkr.Embeds.NewInvitation({onInvitationError: handleOnInvitationError})\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":"const handleOnInvitationError = (response) => { console.log(response) }\n<NewInvitation onInvitationError={handleOnInvitationError}/>\n","lang":"jsx"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Callback data","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"json","header":{"controls":{"copy":{}}},"source":"{\n  \"errors\": {\n    \"invitation\": [\n        \"Package not found\"\n    ]\n  }\n}\n","lang":"json"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"customize-the-embed","__idx":9},"children":["Customize the embed"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The NewInvitation embed provides the following options to customize its default behavior."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"define-a-custom-candidate-id","__idx":10},"children":["Define a custom Candidate ID"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You may define a custom candidate ID using the NewInvitation embed to reference Checkr candidates and their background checks. This will create a Checkr candidate with its ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["custom_id"]}," set to the specified external candidate ID."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You may use this custom ID to map Checkr candidate IDs to objects in your product. You may also use this custom candidate ID as an argument to the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/embeds/reports-overview-embed"},"children":["ReportsOverview embed"]},", to show all reports for the candidate."]},{"$$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.NewInvitation({ externalCandidateId : 'your-candidate-id' })\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":"<NewInvitation externalCandidateId='your-candidate-id' />\n","lang":"jsx"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-a-default-candidate-email-address-or-phone-number","__idx":11},"children":["Add a default candidate email address or phone number"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Checkr allows you to set a default value for the NewInvitations embed's email address or phone number. This value will appear in the Embed when launched, and may be modified by your users."]},{"$$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.NewInvitation({ defaultEmail: \"john@doe.com\", defaultPhone: \"555-867-5309\" })\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":"<NewInvitation defaultEmail=\"john@doe.com\" defaultPhone=\"555-867-5309\"/>\n","lang":"jsx"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Result","disable":false},"children":[{"$$mdtype":"Tag","name":"EmbedPreview","attributes":{"component":"NewInvitation","props":{"sessionTokenPath":"/test","defaultEmail":"john@doe.com","defaultPhone":"555-867-5309"}},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"hide-the-back-button","__idx":12},"children":["Hide the Back Button"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In certain use cases, the Back button may be unnecessary. You can hide it from the embed by using the following method:"]},{"$$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.NewInvitation({ hideBackButton: true })\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":"<NewInvitation hideBackButton={true}/>\n","lang":"jsx"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Result","disable":false},"children":[{"$$mdtype":"Tag","name":"EmbedPreview","attributes":{"component":"NewInvitation","props":{"sessionTokenPath":"/test","defaultEmail":"john@doe.com","hideBackButton":true}},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-preset-values","__idx":13},"children":["Add preset values"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["preset"]}," to specify a fixed value for an available input value. Preset inputs (except email and phone) are not displayed on the embed."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Checkr provides 4 preset values for the NewInvitation Embed:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["presetEmail"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["presetPhone"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["presetNodeCustomId"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["presetPackageSlug"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["presetWorkLocation"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["presetWorkLocation"]}," can be used to preset two different scenarios"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["The full work location"]}]},{"$$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.NewInvitation({\n  presetEmail: 'john@doe.com',\n  presetPhone: '555-867-5309',\n  presetNodeCustomId: '1000002',\n  presetPackageSlug: 'criminal_drug',\n  presetWorkLocation: {country: 'US', state: 'CA', city: 'Los Angeles'}\n})\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":"<NewInvitation\n  presetEmail='john@doe.com'\n  presetPhone='555-867-5309'\n  presetNodeCustomId='1000002'\n  presetPackageSlug='criminal_drug'\n  presetWorkLocation={country: 'US', state: 'CA', city: 'Los Angeles'} />\n","lang":"jsx"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Result","disable":false},"children":[{"$$mdtype":"Tag","name":"EmbedPreview","attributes":{"component":"NewInvitation","props":{"sessionTokenPath":"/test","presetEmail":"john@doe.com","presetPhone":"555-867-5309","presetNodeCustomId":"1000002","presetPackageSlug":"criminal_drug","presetWorkLocation":{"country":"US","state":"CA","city":"Los Angeles"}}},"children":[]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Only the country"]}]},{"$$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.NewInvitation({\n  presetEmail: 'john@doe.com',\n  presetPhone: '555-867-5309',\n  presetNodeCustomId: '1000002',\n  presetPackageSlug: 'criminal_drug',\n  presetWorkLocation: {country: 'US'}\n})\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":"<NewInvitation\n  presetEmail='john@doe.com'\n  presetPhone='555-867-5309'\n  presetNodeCustomId='1000002'\n  presetPackageSlug='criminal_drug'\n  presetWorkLocation={country: 'US'} />\n","lang":"jsx"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Result","disable":false},"children":[{"$$mdtype":"Tag","name":"EmbedPreview","attributes":{"component":"NewInvitation","props":{"sessionTokenPath":"/test","presetEmail":"john@doe.com","presetPhone":"555-867-5309","presetNodeCustomId":"1000002","presetPackageSlug":"criminal_drug","presetWorkLocation":{"country":"US"}}},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"define-labels-and-placeholders","__idx":14},"children":["Define labels and placeholders"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Checkr allows you to customize the embed's label and placeholder text for customer input fields."]},{"$$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.NewInvitation({\n  cityLabel: 'This is a city label',\n  cityPlaceholder: 'This is a city placeholder',\n  countryLabel: 'This is a country label',\n  countryPlaceholder: 'This is a country placeholder',\n  emailLabel: 'This is an email label',\n  emailPlaceholder: 'This is an email placeholder',\n  nodeLabel: 'This is a node label',\n  nodePlaceholder: 'This is a node placeholder',\n  packageLabel: 'This is a package label',\n  packagePlaceholder: 'This is a package placeholder',\n  phoneLabel: 'This is a phone label',\n  phonePlaceholder: 'This is a phone placeholder'\n  stateLabel: 'This is a state label',\n  statePlaceholder: 'This is a state placeholder'\n})\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":"<NewInvitation\n  cityLabel='This is a city label'\n  cityPlaceholder='This is a city placeholder'\n  countryLabel= 'This is a country label'\n  countryPlaceholder= 'This is a country placeholder'\n  emailLabel='This is an email label'\n  emailPlaceholder='This is an email placeholder'\n  nodeLabel='This is a node label'\n  nodePlaceholder='This is a node placeholder'\n  packageLabel='This is a package label'\n  packagePlaceholder='This is a package placeholder'\n  phoneLabel='This is a phone label'\n  phonePlaceholder='This is a phone placeholder'\n  stateLabel='This is a state label'\n  statePlaceholder='This is a state placeholder'/>\n","lang":"jsx"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Result","disable":false},"children":[{"$$mdtype":"Tag","name":"EmbedPreview","attributes":{"component":"NewInvitation","props":{"sessionTokenPath":"/test","cityLabel":"This is a city label","cityPlaceholder":"This is a city placeholder","emailLabel":"This is an email label","emailPlaceholder":"This is an email placeholder","nodeLabel":"This is a node label","nodePlaceholder":"This is a node placeholder","packageLabel":"This is a package label","packagePlaceholder":"This is a package placeholder","phoneLabel":"This is a phone label","phonePlaceholder":"This is a phone placeholder","stateLabel":"This is a state label","statePlaceholder":"This is a state placeholder"}},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"define-filters","__idx":15},"children":["Define filters"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You may define filters to limit the packages and nodes displayed to your customers within the Embed."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Filters may be defined based on the parameters included with the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/apis/openapi/packages"},"children":["package"]}," and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/apis/openapi/nodes"},"children":["node"]}," resources within the Checkr API."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example filters on the node's name, the package's slug, and also the work location country. The embed will display only nodes with names including ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["central"]},", only packages including ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["basic"]}," or ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["premium"]}," in their slug, and only ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Canada"]}," or the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["US"]}," as selectable countries."]},{"$$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.NewInvitation({\n  nodeFilter: allNodes =>\n    allNodes.filter(node => node.name.toLowerCase().includes('central')),\n  packageFilter: allPackages =>\n    allPackages.filter(pkg => ['basic', 'premium'].includes(pkg.slug.toLowerCase())),\n  workLocationCountryFilter: allCountries =>\n    allCountries.filter(country => ['US', 'CA'].includes(country.code))\n})\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":"const nodeFilter = allNodes => allNodes.filter(node => node.name.toLowerCase().includes('central'))\nconst packageFilter =  allPackages => allPackages.filter(pkg => ['basic', 'premium'].includes(pkg.slug.toLowerCase()))\nconst workLocationCountryFilter = allCountries => allCountries.filter(country => ['US', 'CA'].includes(country.code)\n\n<NewInvitation nodeFilter={nodeFilter} packageFilter={packageFilter} workLocationCountryFilter={workLocationCountryFilter}/>\n","lang":"jsx"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Result","disable":false},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The embed displays filtered packages and nodes."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"style-the-embed","__idx":16},"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":17},"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":18},"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 custom 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":[".btn"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".header"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".checkr-embeds-loading-container"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".loading-bar"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".btn-loading"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".new-invitation"]},{"$$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":[".btn-primary"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".select-city"]},{"$$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":[".btn-submit"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".select-country"]},{"$$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":[".btn-success"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".select-node"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".form-control"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".select-package"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".form-control-typeahead"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".select-state"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".form-control-clear-typeahead"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".success-view"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".form-group"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".typeahead-option-selected"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".form-group-email"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".typeahead-option"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".form-group-typeahead"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".typeahead-options"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".form-label"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".work-location"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".form-label-typeahead"]},{"$$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":19},"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  '.btn-primary': {\n    background: '#0a8080',\n  },\n  '.header': {\n    'font-size': '150%',\n    'font-weight': 'bold',\n    color: '#F45D48',\n  },\n  '.form-label': {\n    'font-weight': '700',\n  },\n  '.form-control': {\n    background: '#F3FAFB',\n    padding: '0.5rem',\n  },\n  '.form-control:focus, .form-control:focus-visible': {\n    'border-color': '#0a8080',\n  },\n};\n\nconst embed = new Checkr.Embeds.NewInvitation({ 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":20},"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  '.btn': {\n    'border-radius': '0.375rem',\n    color: '#ffffff',\n  },\n  '.btn-primary': {\n    'background-color': '#fcd669',\n  },\n  '.btn-submit': {\n    display: 'block',\n    width: '100%',\n  },\n  '.btn-submit:disabled': {\n    opacity: 0.7,\n  },\n  '.form-control': {\n    'background-color': '#7795f8',\n    border: '0',\n    color: '#fff',\n    padding: '0.5rem',\n    width: 'calc(100% - 1rem)',\n  },\n  '.form-control::placeholder': {\n    color: '#87bbfd',\n  },\n  '.form-control-container': {\n    display: 'inline-block',\n    position: 'relative',\n    width: '70%',\n  },\n  '.form-label': {\n    color: '#c4f0ff',\n    display: 'inline-block',\n    padding: '0.5rem 1rem',\n    'text-overflow': 'ellipsis',\n    'white-space': 'nowrap',\n    width: '30%',\n  },\n  '.form-group': {\n    'background-color': '#7795f8',\n    'border-radius': '0.375rem',\n    'box-shadow':\n      '0 6px 9px rgb(50 50 93 / 6%), 0 2px 5px rgb(0 0 0 / 8%), inset 0 1px 0 #829fff',\n    'margin-bottom': '1.5rem',\n  },\n  '.header': {\n    display: 'none',\n  },\n  '.new-invitation': {\n    'background-color': '#6772e5',\n    'border-radius': '0.375rem',\n    padding: '1.8rem 2rem',\n  },\n  '.success-view': {\n    color: '#fff',\n  },\n  '.typeahead-option-selected': {\n    'background-color': '#87bbfd',\n    color: '#fff',\n  },\n  '.typeahead-options': {\n    'background-color': '#fff',\n    'border-radius': '0.375rem',\n  },\n};\n\n<NewInvitation 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":"NewInvitation Embed","id":"newinvitation-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":"Add request callbacks","id":"add-request-callbacks","depth":2},{"value":"onInvitationSuccess","id":"oninvitationsuccess","depth":3},{"value":"onInvitationError","id":"oninvitationerror","depth":3},{"value":"Customize the embed","id":"customize-the-embed","depth":2},{"value":"Define a custom Candidate ID","id":"define-a-custom-candidate-id","depth":3},{"value":"Add a default candidate email address or phone number","id":"add-a-default-candidate-email-address-or-phone-number","depth":3},{"value":"Hide the Back Button","id":"hide-the-back-button","depth":3},{"value":"Add preset values","id":"add-preset-values","depth":3},{"value":"Define labels and placeholders","id":"define-labels-and-placeholders","depth":3},{"value":"Define filters","id":"define-filters","depth":3},{"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":"NewInvitation Embed","description":"Use the NewInvitation embed to invite candidates to the Checkr-Hosted Apply Flow.","markdown":{"toc":{"hide":true}},"seo":{"title":"NewInvitation Embed"}},"lastModified":"2026-11-05T02:20:48.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/embeds/new-invitation-embed","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}