Personal Loans Marketplace

Personal Loans Embed: Implementation, Syntax, Demo, Tags, Tracking, and Best Practices

This page outlines what's needed to integrate Engine's Personal Loans Embed into 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

Basic Embed Syntax

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.

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

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 prefill 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 pre-populated when the embed is rendered.

Supported Client Tag Keys

Client tag keys are matched exactly, including case. For example - subid and subId are stored as separate tags and will appear as separate keys in your reporting.

Please send each key with consistent casing across all requests, and use the exact spelling shown above.

Below are the client tag keys that are currently supported:

agentId
campaignId
clickId
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

Tracking Events Emitted by Embed

When you embed the Personal Loans experience, event callbacks fire automatically.

How It Works

As a consumer navigates through the experience, the embed emits partner messages: JSON objects with a name (the event type) and a payload (event-specific data). The iframe posts them to your host page via window.parent.postMessage(message, '*').

You do not register callbacks with Engine. You listen on your host page; messages arrive whether or not you handle them.
Not every UI action sends a message. Only the events listed below are part of the partner contract.
Messages are one-way. There is no acknowledgement or response channel.

Implementation Path

Partners using Web Embed receive events by listening for browser message events on the host page:

window.addEventListener('message', (event) => {
  const message = event.data
  if (!message || typeof message !== 'object' || typeof message.name !== 'string') return
  console.log(message.name, message.payload)
})

Message envelope

{
  "name": "eventName",
  "payload": {}
}

Field

Description

name

The event name (e.g. "onCreate", "onNavigate")

payload

Event-specific data; always includes timestamp (ISO-8601 string)

Events & Data

onCreate: Emitted when a lead-created model is mounted. For non-edit flows, editingPage is null.

{
  "name": "onCreate",
  "payload": {
    "timestamp": "2026-06-03T14:22:10.123Z",
    "leadUuid": "00000000-0000-0000-0000-000000000000",
    "createPage": "search",
    "editingPage": null
  }
}

onNavigate: Emitted when the flow moves from one step to another.

{
  "name": "onNavigate",
  "payload": {
    "timestamp": "2026-06-03T14:22:10.123Z",
    "leadUuid": "00000000-0000-0000-0000-000000000000",
    "fromPage": "income_info",
    "toPage": "financial_profile",
    "editingPage": null
  }
}

onUpdate: Emitted when a step is submitted. For normal submissions, editingPage is null. For confirmation edit submissions, editingPage is an array of edited pages.

{
  "name": "onUpdate",
  "payload": {
    "timestamp": "2026-06-03T14:22:10.123Z",
    "leadUuid": "00000000-0000-0000-0000-000000000000",
    "updatePage": "loan-amount",
    "editingPage": null
  }
}

{
  "name": "onUpdate",
  "payload": {
    "timestamp": "2026-06-03T14:22:10.123Z",
    "leadUuid": "00000000-0000-0000-0000-000000000000",
    "updatePage": "confirm",
    "editingPage": ["loan-amount"]
  }
}

onSubmit: Emitted when the final loan search is submitted.

{
  "name": "onSubmit",
  "payload": {
    "timestamp": "2026-06-03T14:22:10.123Z",
    "leadUuid": "00000000-0000-0000-0000-000000000000"
  }
}

onExit: Emitted when the user closes the embed (e.g. via the close button). experience is "search" when closed from the form flow and "compare" when closed from the results page.

{
  "name": "onExit",
  "payload": {
    "timestamp": "2026-06-03T14:22:10.123Z",
    "experience": "search"
  }
}

onErrorPageView: Emitted when a search error page is viewed.

{
  "name": "onErrorPageView",
  "payload": {
    "timestamp": "2026-06-03T14:22:10.123Z",
    "leadUuid": "00000000-0000-0000-0000-000000000000",
    "fromPage": "confirm_details",
    "editingPage": null
  }
}

onErrorPageRetry: Emitted when a user clicks retry from a search error page.

{
  "name": "onErrorPageRetry",
  "payload": {
    "timestamp": "2026-06-03T14:22:10.123Z",
    "leadUuid": "00000000-0000-0000-0000-000000000000",
    "toPage": "confirm_details",
    "editingPage": null
  }
}

onRateTableRender: Emitted when offers are rendered on the compare/results page.

{
  "name": "onRateTableRender",
  "payload": {
    "timestamp": "2026-06-03T14:22:10.123Z",
    "rateTableUuid": "123e4567-e89b-12d3-a456-426614174000",
    "loanOffers": [],
    "specialOffers": []
  }
}

Both arrays are always present. Typically one is populated and the other is empty, depending on which compare view rendered.

loanOffers[] item

Sent when the loans compare view is shown.

Field

Type

Definition

offerUuid

string

Offer UUID

financialInstitutionName

string

Lender name

financialInstitutionUuid

string

Lender UUID (empty string if unavailable)

productType

string

Product type from the API (e.g. "loan", "Loan")

productSubType

string

Product subtype (e.g. "personal_loan", "secured_loan")

loanAmount

number | string

Maximum loan amount (maxAmount)

apr

number | string

APR — resolved from maxApr, then meanApr, then minApr, else ""

termLength

number | string

Term length in months, or "" if unavailable

monthlyPayment

number | string

Monthly payment — resolved from maxMonthlyPayment, then monthlyPayment, then meanMonthlyPayment, else ""

Example:

{
  "offerUuid": "offer-123",
  "financialInstitutionName": "Lender One",
  "financialInstitutionUuid": "fi-123",
  "productType": "Loan",
  "productSubType": "personal_loan",
  "loanAmount": 10000,
  "apr": 14.99,
  "termLength": 36,
  "monthlyPayment": 340
}

specialOffers[] item

Sent when the special / other offers compare view is shown (debt relief, credit builder, cash advance, bill reduction, etc.).

Field

Type

Definition

offerUuid

string

Offer UUID

name

string

Offer headline / name shown in the UI

financialInstitutionName

string

Partner name

financialInstitutionUuid

string

Partner financial-institution UUID (empty string if unavailable)

productSubType

string

Product subtype (e.g. "credit_builder", "debt_relief", "bill_reduction")

Example:

{
  "offerUuid": "special-offer-123",
  "name": "Special Offer",
  "financialInstitutionName": "Partner One",
  "financialInstitutionUuid": "partner-123",
  "productSubType": "credit_builder"
}

Special-offer render items do not include productType, loanAmount, apr, termLength, or monthlyPayment.

What gets sent in each view

Compare view

loanOffers

specialOffers

Loans (default / paginated list)

Offers displayed on that page

[]

Special / other offers

[]

All special offers from the rate table

No offers

[]

[] (may still fire when empty render is emitted)

onOfferClick: Emitted when the user clicks an offer call-to-action. Suppressed if no leadUuid is available.

{
  "name": "onOfferClick",
  "payload": {
    "timestamp": "2026-06-03T14:22:10.123Z",
    "leadUuid": "lead-123",
    "offerUuid": "offer-456",
    "financialInstitutionName": "Acme Bank",
    "financialInstitutionUuid": "bank-789",
    "productType": "loan",
    "productSubType": "personal",
    "loanAmount": 5000,
    "apr": 12.34,
    "termLength": 24,
    "monthlyPayment": 236.18
  }
}

Payload fields

Field

Type

Definition

timestamp

string

ISO-8601 time when the click occurred

leadUuid

string

Applicant lead UUID (required on click)

offerUuid

string

Clicked offer UUID

financialInstitutionName

string

Lender / partner name

financialInstitutionUuid

string

Lender / partner UUID

productType

string

"loan" for loan offers; "Special" for special offers

productSubType

string

Product subtype

loanAmount

number | string

Loan amount (loan offers) or "undefined for specialOffers" (special offers)

apr

number | string

APR (loan offers) or "undefined for specialOffers" (special offers)

termLength

number | string

Term length (loan offers) or "undefined for specialOffers" (special offers)

monthlyPayment

number | string

Monthly payment (loan offers) or "undefined for specialOffers" (special offers)

Loan offer click

Same shape as a loanOffers[] item plus leadUuid and timestamp.

Special offer click

Uses the same field names, but productType is "Special" and the four metric fields are the literal string "undefined for specialOffers" (not null, not omitted):

{
  "name": "onOfferClick",
  "payload": {
    "timestamp": "2026-06-03T14:22:10.123Z",
    "leadUuid": "lead-123",
    "offerUuid": "special-offer-123",
    "financialInstitutionName": "Freedom Debt Relief",
    "financialInstitutionUuid": "fi-special-123",
    "productType": "Special",
    "productSubType": "debt_relief",
    "loanAmount": "undefined for specialOffers",
    "apr": "undefined for specialOffers",
    "termLength": "undefined for specialOffers",
    "monthlyPayment": "undefined for specialOffers"
  }
}

One event is SDK-only and will not be emitted by the Personal Loans web embed:

onBack: Emitted by the SDK header back button

Note: unlike the Credit Cards embed, onExit is emitted by the Personal Loans web embed (see above).

Common `productSubType` values

Examples seen in loan and special-offer payloads:

personal_loan, secured_loan, line_of_credit, debt_relief, credit_builder, cash_advance, bill_reduction, installment_loans

Treat this as a representative set, not a frozen enum — new subtypes may appear as products are added.

Embed Best Practices & Troubleshooting

Component Not Showing

Check the required attribute:
1. Make sure data-embed-type="auto-mount" is present
Check browser console:
1. Open developer tools and look for error messages

Loading Too Slowly

Make sure async attribute is present on the <script> tag
1. This prevents block page load

Last updated 11 days ago

Was this helpful?

Standard Embed Implementation

Basic Embed Syntax

Embed Components

Customization & Auto Sizing

Personal Loans Specific Syntax

Component Names

Personal Loans Embed Demo

User Experience (Search)

Client Tags & Prefilling Customer Data

Use Cases for Client Tags

How to Implement Client Tags for Reporting & Customer Data Prefill

Sample Implementation

Supported Client Tag Keys

Supported Keys for Personal Loans Customer Data Prefill

Tracking Events Emitted by Embed

How It Works

Implementation Path

Message envelope

Events & Data

Common productSubType values

Embed Best Practices & Troubleshooting

Common `productSubType` values