Personal Loans Marketplace

How to get started with an Engine by MoneyLion marketplace Embed integration for Personal Loans

This page outlines what's needed to integration Engine's Personal Loans Embed on your website. In this guide, we will explore what Engine’s Embed syntax looks like and best practices for loading it on your site. This includes topics like proactively addressing layout shift for optimized performance.

This is a high-level guide, and specific implementation details should be discussed with your Engine team.

Standard Embed Implementation

Engine's embed code can be placed in any order within your page, but for optimal user experience we recommend placing the script tag within the same div where the content is being rendered.

Basic Embed Syntax

PLEASE NOTE: Your Engine representative will provide you with your specific code snippet. Do not try to reproduce from the sample snippet outlined below.

<script
  async
src="https://www.moneylion.com/network/{channel}/{zone}/web-component/{component-name}/index.js"
  data-embed-type="auto-mount"
></script>

This is a representative example of what our embed code looks like, and contains placeholders as defined below. Placeholders and will be replaced with precise values in the embed code provided to you.

Embed Components

• Channel: placeholder that will be replaced with precise values in the embed code provided to you.

• Zone: placeholder that will be replaced with precise values in the embed code provided to you.

• Component Name: corresponds to the specific product or Engine experience type that's being rendered.

• data-embed-type: enables Engine's auto-mount functionality; without this attribute, the component will not render.

  • Acceptable Value: "auto-mount"

Customization & Auto Sizing

The web component loads iFrame and will automatically fill the container. Embeds are rendered wherever you include our HTML tag on your page and will responsively scale to fill the space available to it.

Personal Loans Specific Syntax

Component Names

• lending-search: A full application-style flow where the user enters key info (income, credit, loan amount, etc.) and Engine returns personalized loan matches in-session. Use this when you want a “start here, answer a few questions, get matched” experience as the primary entry point.

• lending-explore: A browse-and-filter offers experience that leans on data you already have (or have prefilled) to show preview or pre-qualified offers up front. Use this when you want a “see your loan options and refine” experience inside an existing logged-in area or dashboard.

Personal Loans Embed Demo

Here is a demo of the Personal Loans Embed. See it in action:

Compare Personal Loans | MoneyLionwww.moneylion.dev

User Experience (Search)

Client Tags & Prefilling Customer Data

Engine Embeds support the ability to add certain tags with varying use cases, which are outlined in this section.

Use Cases for Client Tags

• Prefilling customer data for certain non-PII fields

  • Decreases friction in the user experience and increases application submission rates

  • Useful when you already have that info on hand for that user, or want the front-end to default to particular values

• Channel Partner Reporting

How to Implement Client Tags for Reporting & Customer Data Prefill

To add client tags in an embed, use the following syntax in the data-tags attribute within the embed script:

tag.key_1=value_1&tag.key_2=value_2

To prerefill fields in an embed, use the following syntax in the data-tags attribute within the embed script:

app.key_1=value_1&app.key_2=value_2

Sample Implementation

<script 
      async src="https://www.moneylion.com/network/{channel}/{zone}/web-component/{component-name}/index.js\" 
      data-tags="tag.clientId=c1&tag.source=email&app.zipcode=93105\"
      data-embed-type=\"auto-mount\" 
></script>

In the above example, clientId and source are available as tags for reporting purposes and the embed and the zipcode field will be prepopulated when the embed is rendered.

Supported Client Tag Keys

These are the keys that are currently fully supported across all Engine embed types. Please note that the keys below are case-sensitive:

• agentId

• campaignId

• clientId

• deviceid

• medium

• sourceId

• subid

• subid1

• subid2

• subid3

• target

• trafficsource

• userid

If a different key is needed, please reach out to your Partner Manager - we may be able to accommodate, but adding nonstandard keys will increase the time it takes Engine to report Client Tag values back to you and is therefore not recommended.

Supported Keys for Personal Loans Customer Data Prefill

The following is a list of params that can be added to the Personal Loans embed code to prefill in the embed frontend:

Embed Field Name	Client Tag Key	Notes
Loan Purpose	app.purpose	Allowed values - LoanPurpose
Requested Loan Amount	app.loanAmount	No dollar signs, e.g. '6000'
Credit Rating	app.providedCreditRating	Allowed values - ProvidedCredRating
City*	app.city	Spaces should be converted to '%20', e.g. 'New%20York'
State*	app.state	Allowed values - State
Zip Code*	app.zipcode	Either 5 digits, or 9 digits separated by hyphen (5+4)
Property Status	app.propertyStatus	Allowed values - PropertyStatus
Date of Birth	app.dateOfBirth	Format: mm/dd/yyyy, e.g. '01/01/1990'
Highest Level of Education	app.educationLevel	Allowed values - EducationLevel
Employment Status	app.employmentStatus	Allowed values - EmploymentStatus
Annual Income	app.annualIncome	No dollar signs, e.g. '100000'
Pay Frequency	app.employmentPayFrequency	Allowed values - EmploymentPayFrequency

*These fields will be overwritten if the user’s location is detected

Embed Best Practices & Troubleshooting

Component Not Showing

1. Check the required attribute:

   1. Make sure data-embed-type="auto-mount" is present

2. Check browser console:

   1. Open developer tools and look for error messages

Loading Too Slowly

1. Make sure async attribute is present on the <script> tag

   1. This prevents block page load