# Sign-up & Connect Embed
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.
## Customize it live
This is the real `SignUpFlow` component running in `fakeMode` (canned data, no API calls, no credentials). The embed brands itself from the `partner` object you pass it — swap the logo and name to see your own branding, and preset any of the account-creation fields.
## The sign-up flow
This is the flow for Sign-up & Connect embed:
1. Initial screen
1. Select "Already have an account? Sign in"
1. Login to your Checkr account
2. Get a code for your application backend to retrieve an access token.
3. Back to your application
2. Fill in user information and click "Get started"
1. Get business information for Checkr account creation. Here is the business data required:
1. Business Name
2. DBA name (optional)
3. Business Address (Street, City, State, Zip)
4. US Tax ID (Must match the city associated with the Business Address)
5. Credit Card information required for payment:
1. Cardholder Name
2. Card Number
3. Expiration Date
4. Security Code
5. Zip Code
2. Get a code for your application backend to retrieve an [access token](https://docs.checkr.com/partners/#section/Getting-Started/Connect-your-customers-to-Checkr)
3. Back to your application
Note that Sign-up & Connect Embed doesn’t handle [customer account credentialing](https://docs.checkr.com/partners/#section/Getting-Started/Customer-account-credentialing) step.
## Add the embed to your page
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.
### Add the embed inline
Both JavaScript and React may be used to insert the Embed inline in your application.
JavaScript
```javascript
const embed = new Checkr.Embeds.SignUpFlow({ oauthTokenPath='/your-backend/checkr-oauth-token', partner: { id: 'abcdef1', name: 'Enterprise Partner' } })
embed.render('#your-placeholder-div')
```
React
```jsx
```
Result
### Add the embed as a modal
Use JavaScript to launch the Embed as a modal, for example on the click of a button in your application.
JavaScript
```javascript
const btn = document.getElementById('your-button')
btn.addEventListener('click', event => {
const embed = new Checkr.Embeds.SignUpFlow({ oauthTokenPath='/your-backend/checkr-oauth-token', partner: { id: 'abcdef1', name: 'Enterprise Partner' } })
embed.modal()
})
```
Result
The default modal width is `600px` on desktops and `100%` on mobile devices. Use `width` option to change the desktop width.
```
embed.modal({ width: '700px' })
```
## Add Authentication
### Frontend Examples
JavaScript
```javascript
const embed = new Checkr.Embeds.SignUpFlow({ oauthTokenPath='/your-backend/checkr-oauth-token', partner: { id: 'abcdef1', name: 'Enterprise Partner' } })
```
### Backend Requirement: endpoint to accept Oauth Authorization Code
You will need to implement a backend endpoint to accept the Oauth Authorization Code obtained upon completion of the signup flow.
The Embed utilizes the `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.
The partner is required to possess both the `client_id` and `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.
#### Example
An example implementation of the backend call in javascript would be:
JavaScript
```javascript
import axios from "axios";
async function createOauthToken(body) {
try {
const response = await axios({
method: "POST",
url: `https://api.checkr.com/oauth/tokens`,
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
data: body,
});
return response.data;
} catch (error) {
throw error.response.errors;
}
}
async function getOauthToken(req, context) {
const { code } = await req.json();
const body = {
grant_type: "authorization_code",
client_id: "",
client_secret: "",
code: code,
};
const { access_token } = await createOauthToken(body);
//Decide where & how you want save the oauth token
await saveToken(access_token);
res.status(200).json({ message: 'Token created successfully' });
}
```
The steps:
1. Use code to call the ‘/oauth/tokens’ Checkr endpoint
2. Save oauth token in your database or other secured storage for later use
## Customize the embed
The Sign-up & Connect embed provides the following options to customize its default behavior.
### Add preset values for Account Creation step
Use `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:
* presetFirstName
* presetLastName
* presetEmail
* presetBusinessName
* presetAddress
* presetCity
* presetState
* presetZipcode
* presetUSTaxID
JavaScript
```javascript
const embed = new Checkr.Embeds.SignUpFlow({
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',
presetTaxId: '123-45-6789',
})
```
React
```jsx
```
Result