{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-embeds/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["embed-studio","tabs","tab","embed-preview"]},"type":"markdown"},"seo":{"title":"Sign-up & Connect 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":"sign-up--connect-embed","__idx":0},"children":["Sign-up & Connect Embed"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the Sign-up & Connect embed to connect an existing Checkr account from an external application to Checkr and also create a Checkr account if needed."]},{"$$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":["SignUpFlow"]}," component running in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fakeMode"]}," (canned data, no API calls, no credentials). The embed brands itself from the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["partner"]}," object you pass it — swap the logo and name to see your own branding, and preset any of the account-creation fields."]},{"$$mdtype":"Tag","name":"EmbedStudio","attributes":{"component":"SignUpFlow","props":{"partner":{"id":"abcdef1","name":"Enterprise Partner","partner_name":"Enterprise Partner","logo_url":"https://assets.checkr.com/logo-navy-2022.svg"},"oauthTokenPath":"/fakemode-noop"},"codeProps":{"partner":{"id":"abcdef1","name":"Enterprise Partner","logo_url":"https://your-cdn.example.com/logo.svg"},"oauthTokenPath":"/your-backend/checkr-oauth-token"},"height":640,"controls":[{"key":"logoUrl","label":"Partner logo URL","kind":"text","placeholder":"https://…/logo.svg","prop":"partner.logo_url"},{"key":"partnerName","label":"Partner name","kind":"text","placeholder":"Enterprise Partner","prop":"partner.partner_name"},{"key":"presetName","label":"First name","kind":"text","placeholder":"John","prop":"presetName"},{"key":"presetLastName","label":"Last name","kind":"text","placeholder":"Doe","prop":"presetLastName"},{"key":"presetEmail","label":"Email","kind":"text","placeholder":"johndoe@test.com","prop":"presetEmail"},{"key":"presetBusinessName","label":"Business name","kind":"text","placeholder":"Test Company","prop":"presetBusinessName"},{"key":"presetCity","label":"City","kind":"text","placeholder":"San Francisco","prop":"presetCity"},{"key":"presetState","label":"State","kind":"text","placeholder":"CA","prop":"presetState"}]},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"the-sign-up-flow","__idx":2},"children":["The sign-up flow"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This is the flow for Sign-up & Connect embed:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Initial screen",{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Select \"Already have an account? Sign in\"",{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Login to your Checkr account"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Get a code for your application backend to retrieve an access token."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Back to your application"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Fill in user information and click \"Get started\"",{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Get business information for Checkr account creation. Here is the business data required:",{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Business Name"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["DBA name (optional)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Business Address (Street, City, State, Zip)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["US Tax ID (Must match the city associated with the Business Address)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Credit Card information required for payment:",{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Cardholder Name"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Card Number"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Expiration Date"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Security Code"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Zip Code"]}]}]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Get a code for your application backend to retrieve an ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/partners/getting-started#connect-your-customers-to-checkr"},"children":["access token"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Back to your application"]}]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Note that Sign-up & Connect Embed doesn’t handle ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/partners/getting-started#customer-account-credentialing"},"children":["customer account credentialing"]}," step."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"add-the-embed-to-your-page","__idx":3},"children":["Add the embed to your page"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Sign-up & Connect 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":4},"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."]},{"$$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.SignUpFlow({ oauthTokenPath='/your-backend/checkr-oauth-token', partner: { id: 'abcdef1', name: 'Enterprise Partner' } })\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":"<SignUpFlow oauthTokenPath='/your-backend/checkr-oauth-token' partner={ id: 'abcdef1', name: 'Enterprise Partner' }/>\n","lang":"jsx"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Result","disable":false},"children":[{"$$mdtype":"Tag","name":"EmbedPreview","attributes":{"component":"SignUpFlow","props":{"partner":{"id":"abcdef1","name":"Enterprise Partner"},"oauthTokenPath":"/your-backend/checkr-oauth-token"}},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-the-embed-as-a-modal","__idx":5},"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.SignUpFlow({ oauthTokenPath='/your-backend/checkr-oauth-token', partner: { id: 'abcdef1', name: 'Enterprise Partner' } })\n  embed.modal()\n})\n","lang":"javascript"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Result","disable":false},"children":[{"$$mdtype":"Tag","name":"EmbedPreview","attributes":{"component":"SignUpFlow","props":{"partner":{"id":"abcdef1","name":"Enterprise Partner"},"oauthTokenPath":"/your-backend/checkr-oauth-token"},"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":"Heading","attributes":{"level":2,"id":"add-authentication","__idx":6},"children":["Add Authentication"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"frontend-examples","__idx":7},"children":["Frontend Examples"]},{"$$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.SignUpFlow({ oauthTokenPath='/your-backend/checkr-oauth-token', partner: { id: 'abcdef1', name: 'Enterprise Partner' } })\n","lang":"javascript"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"backend-requirement-endpoint-to-accept-oauth-authorization-code","__idx":8},"children":["Backend Requirement: endpoint to accept Oauth Authorization Code"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You will need to implement a backend endpoint to accept the Oauth Authorization Code obtained upon completion of the signup flow."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Embed utilizes the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["oauthTokenPath"]}," property to send the Oauth Authorization Code to your backend where it should be exchanged for an Access Token. This token is used to request a session token which can be used in other embeds."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The partner is required to possess both the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["client_id"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["client_secret"]},", which can be located within the partner application data. This information is readily accessible for review via the Checkr dashboard and should live on your backend."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"example","__idx":9},"children":["Example"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["An example implementation of the backend call in javascript would be:"]},{"$$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":"import axios from \"axios\";\n\nasync function createOauthToken(body) {\n  try {\n    const response = await axios({\n      method: \"POST\",\n      url: `https://api.checkr.com/oauth/tokens`,\n      headers: {\n        \"Content-Type\": \"application/x-www-form-urlencoded\",\n      },\n      data: body,\n    });\n\n    return response.data;\n  } catch (error) {\n    throw error.response.errors;\n  }\n}\n\nasync function getOauthToken(req, context) {\n  const { code } = await req.json();\n\n  const body = {\n    grant_type: \"authorization_code\",\n    client_id: \"<your_partner_app_client_id>\",\n    client_secret: \"<your_partner_app_client_secret>\",\n    code: code,\n  };\n\n  const { access_token } = await createOauthToken(body);\n  //Decide where & how you want save the oauth token\n  await saveToken(access_token);\n\n  res.status(200).json({ message: 'Token created successfully' });\n}\n","lang":"javascript"},"children":[]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The steps:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use code to call the ‘/oauth/tokens’ Checkr endpoint"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Save oauth token in your database or other secured storage for later use"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"customize-the-embed","__idx":10},"children":["Customize the embed"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Sign-up & Connect embed provides the following options to customize its default behavior."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-preset-values-for-account-creation-step","__idx":11},"children":["Add preset values for Account Creation step"]},{"$$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 are displayed on the embed and it is available for users to edit it."," ","Checkr provides 9 preset values for the Sign-up & Connect Embed:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["presetFirstName"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["presetLastName"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["presetEmail"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["presetBusinessName"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["presetAddress"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["presetCity"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["presetState"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["presetZipcode"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["presetUSTaxID"]}]},{"$$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.SignUpFlow({\n  oauthTokenPath:'/your-backend/checkr-oauth-token',\n  partner:{id: 'abcdef1', name: 'Enterprise Partner'},\n  presetName: 'John',\n  presetLastName: 'Doe',\n  presetEmail: 'johndoe@test.com',\n  presetCity: 'San Francisco',\n  presetTaxId: '123-45-6789',\n  presetZipCode: '94103',\n  presetBusinessName: 'Test Company',\n  presetBusinessAddress: '123 Main St',\n  presetState: 'CA',\n  presetTaxId: '123-45-6789',\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":"<SignUpFlow\n  oauthTokenPath='/your-backend/checkr-oauth-token'\n  partner={{id: 'abcdef1', name: 'Enterprise Partner'}}\n  presetName='John'\n  presetLastName='Doe'\n  presetEmail='johndoe@test.com'\n  presetCity='San Francisco'\n  presetTaxId='123-45-6789'\n  presetZipCode='94103'\n  presetBusinessName='Test Company'\n  presetBusinessAddress='123 Main St'\n  presetState='CA'\n  presetTaxId='123-45-6789'\n/>\n","lang":"jsx"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Result","disable":false},"children":[{"$$mdtype":"Tag","name":"EmbedPreview","attributes":{"component":"SignUpFlow","props":{"oauthTokenPath":"/your-backend/checkr-oauth-token","partner":{"id":"abcdef1","name":"Enterprise Partner"},"presetName":"John","presetLastName":"Doe","presetEmail":"johndoe@test.com","presetCity":"San Francisco","presetTaxId":"123-45-6789","presetZipCode":"94103","presetBusinessName":"Test Company","presetBusinessAddress":"123 Main St","presetState":"CA"}},"children":[]}]}]}]},"headings":[{"value":"Sign-up & Connect Embed","id":"sign-up--connect-embed","depth":1},{"value":"Customize it live","id":"customize-it-live","depth":2},{"value":"The sign-up flow","id":"the-sign-up-flow","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":"Frontend Examples","id":"frontend-examples","depth":3},{"value":"Backend Requirement: endpoint to accept Oauth Authorization Code","id":"backend-requirement-endpoint-to-accept-oauth-authorization-code","depth":3},{"value":"Example","id":"example","depth":4},{"value":"Customize the embed","id":"customize-the-embed","depth":2},{"value":"Add preset values for Account Creation step","id":"add-preset-values-for-account-creation-step","depth":3}],"frontmatter":{"title":"Sign-up & Connect Embed","description":"Use the Sign-up & Connect embed to connect an existing Checkr account from an external application to Checkr and also create a Checkr account if needed.","markdown":{"toc":{"hide":true}},"seo":{"title":"Sign-up & Connect Embed"}},"lastModified":"2026-11-05T02:20:48.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/embeds/sign-up-connect-embed","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}