Here is a screenshot of a sample code snippet of how you might implement the Mobile SDK into your app, with all prefilledData fields populated:
For your convenience, the same code snippet is pasted below as text, so you can copy-paste the bulk of the code. Please wrap the following snippet in a self closing < and />, following the screenshot above (the text below omits the wrapping </> so as not to trigger a CSS attack warning on this page).
EngineSdk
bearer="{your_token}"
primaryColor=”#11aa34”
secondaryColor=”#444444”
prefilledData={
"firstName": "Bob", // required
"lastName": "Dylan", // required
"email": "[email protected]", // required
"loanAmount": 7500,
// you can instead use "defaultSliderLoanAmount", if you want to suggest a default loan amount but still allow the user to edit it.
// if "loanAmount" is prefilled, "defaultSliderLoanAmount" will be ignored
"purpose": "credit_card_refi",
"dateOfBirth": new Date("1990-01-01"),
"address": {
"street": "1600 Pennsylvania Avenue",
"city": "Washington",
"state": "DC",
"zip": "20500"
},
"primaryPhone": "2325624852",
"creditRating": "good",
"propertyStatus": "own_with_mortgage",
"educationLevel": "associate",
"employmentStatus": "employed",
"annualIncome": "20000",
"hasDirectDeposit": false,
"ssn": "512-54-7862",
"bankRoutingNumber": "123456789",
"bankAccountNumber": "55555555555"
}
clientTags={ ...optional Client Tags, please see following Client Tag section }
{...optional Event Handlers, please see Event Handler section}
PrefilledData example
The prefilledData object should be structured with any fields you want the user not to have to answer themselves, if you already have that info available. Here is an example of prefilledData as a Javascript Object. You may prefill as many of these fields as desired; the only 3 required are firstName, lastName, and email.
{
"firstName": "Bob", // required
"lastName": "Dylan", // required
"email": "[email protected]", // required
"loanAmount": 7500,
// you can instead use "defaultSliderLoanAmount", if you want to suggest a default loan amount but still allow the user to edit it.
// if "loanAmount" is prefilled, "defaultSliderLoanAmount" will be ignored
"purpose": "credit_card_refi",
"dateOfBirth": new Date("1990-01-01"),
"address": {
"street": "1600 Pennsylvania Avenue",
"city": "Washington",
"state": "DC",
"zip": "20500"
},
"primaryPhone": "2325624852",
"creditRating": "good",
"propertyStatus": "own_with_mortgage",
"educationLevel": "associate",
"employmentStatus": "employed",
"annualIncome": "20000",
"hasDirectDeposit": false,
"ssn": "512-54-7862",
"bankRoutingNumber": "123456789",
"bankAccountNumber": "55555555555"
}
For any of these fields, DO NOT prefill any fields that are empty or otherwise unavailable. If you do not have info for a particular field available to prefill, omit that field in your prefilledDataobject.
//address is not prefilled, which forces the user to input their address in the UI and will allow them to submit complete info and be considered for offers
PrefilledData type validations
The data should follow a type schema, described here in Typescript notation:
interface PrefilledLeadData {
firstName: string;
lastName: string;
email: string;
loanAmount?: number; // whole numbers only
defaultSliderLoanAmount?: number | string; // if you want the loan amount slider to default to something other than 5000 but want to allow the user to edit the amount, enter it here
purpose?: LoanPurpose; // enum below
dateOfBirth?: Date;
address?: AddressData; // enum below
primaryPhone?: string; // leading 1 is fine, but no "+" or "-" chars allowed
phoneConsent?: boolean;
ssn?: string; // 9 digits with or without hyphens
creditRating?: CreditRating; // enum below
propertyStatus?: PropertyStatus; // enum below
educationLevel?: EducationLevel; // enum below
employmentStatus?: EmploymentStatus; // enum below
annualIncome?: AnnualIncomeBracket; // enum below
hasDirectDeposit?: boolean;
bankRoutingNumber?: string; (must be exactly 9 digits)
bankAccountNumber?: string;
}
interface AddressData {
/** Primary street address */
street?: string;
/** (Optional) Apartment Suite */
apartment?: string;
city?: string;
state?: string; // must be a valid 2-letter abbreviation
zip?: string;
}
defaultSliderLoanAmount
By default, the requested loan amount slider defaults to a $5,000 loan amount. You may prefill the loanAmount if you know how much the user is requesting. If you do not know the exact amount but want to specify any other default amount (e.g. $7,500 instead of $5,000), use the defaultSliderLoanAmount attribute.
You may prefill both loanAmount and defaultSliderLoanAmount, for cases where you know the desired request amount for some users but not others. E.g. for Lead A, you know they want to request $10,000, but for Lead B, you do not know their desired loan amount, and want to default to $7,500. In this case, you can specify both loanAmount: ${loanAmountWhenAvailable} and defaultSliderLoanAmount: 7500. This will prefill the loanAmount if provided by your code, and otherwise will show the lead the default request amount in the slider during that step.
Enums / accepted values for certain fields
Certain fields, although strings, must be within a predetermined list of accepted values. Here are those values:
Prefilled Data must align with the type validations above, and any fields with an accepted value enum must be within that enum. If you (the partner) prefill user data, and any type/value is invalid, that attribute will be stripped, and the lead will have to enter it again manually.
Prefilled values cannot be edited
Prefilled values cannot be edited by the user on the final confirm-details screen (before submitting the form). If the user's info is incorrect (e.g. Address is incorrect outdated), the user should edit the info in your app directly.
