> For the complete documentation index, see [llms.txt](https://even-financial.gitbook.io/developer-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://even-financial.gitbook.io/developer-center/embeddable-integrations/widgets-and-embeds/embeds.md).

# Personal Loans Marketplace

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**

{% hint style="info" icon="triangle-exclamation" %}
**PLEASE NOTE**: Your Engine representative will provide you with your specific code snippet. Do not try to reproduce from the sample snippet outlined below.
{% endhint %}

```html
<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:

{% embed url="<https://www.moneylion.dev/network/moneylion/personal-loans/iframe>" %}

### User Experience (Search)

{% columns %}
{% column %}

<figure><img src="/files/GLLseCXDcSghW4oMmdLl" alt="" width="344"><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="/files/yg2yGAolE58aTi7nWh1h" alt="" width="341"><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column %}

<figure><img src="/files/svfTYGG90l3u4AcjhOoi" alt="" width="341"><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="/files/uptbLl1qIPfS9jNp7Agj" alt="" width="345"><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column %}

<figure><img src="/files/PZxqFltFzAib41af3Erd" alt="" width="343"><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="/files/JoDxSppFSJ51C59Jptkl" alt="" width="345"><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column %}

<figure><img src="/files/G6UXSL3fNjQyCDwdTDOd" alt="" width="345"><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

{% endcolumn %}
{% endcolumns %}

## 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](/developer-center/channel-partner-reporting/engine-analytics-api.md)

### 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
```

#### <mark style="color:$primary;">Sample Implementation</mark>

```html
<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>
```

<mark style="color:$primary;">In the above example,</mark> <mark style="color:$primary;">`clientId`</mark> <mark style="color:$primary;">and</mark> <mark style="color:$primary;">`source`</mark> <mark style="color:$primary;">are available as tags for reporting purposes and the embed and the</mark> <mark style="color:$primary;">`zipcode`</mark> <mark style="color:$primary;">field will be prepopulated when the embed is rendered.</mark>

### Supported Client Tag Keys

{% hint style="warning" %}
**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.&#x20;

**Please send each key with consistent casing across all requests, and use the exact spelling shown above.**
{% endhint %}

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.&#x20;

### **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:

<table><thead><tr><th width="185.8134765625">Embed Field Name</th><th>Client Tag Key</th><th>Notes</th></tr></thead><tbody><tr><td>Loan Purpose</td><td>app.purpose</td><td><a href="https://engine.tech/docs/api-reference/#tocS_LoanPurpose"><mark style="color:blue;">Allowed values - LoanPurpose</mark></a></td></tr><tr><td>Requested Loan Amount</td><td>app.loanAmount</td><td>No dollar signs, e.g. '6000'</td></tr><tr><td>Credit Rating</td><td>app.providedCreditRating</td><td><a href="https://engine.tech/docs/api-reference/#tocS_ProvidedCreditRating"><mark style="color:blue;">Allowed values - ProvidedCredRating</mark></a></td></tr><tr><td>City*</td><td>app.city</td><td>Spaces should be converted to '%20', e.g. 'New%20York'</td></tr><tr><td>State*</td><td>app.state</td><td><a href="https://engine.tech/docs/api-reference/#tocS_State"><mark style="color:blue;">Allowed values - State</mark></a></td></tr><tr><td>Zip Code*</td><td>app.zipcode</td><td>Either 5 digits, or 9 digits separated by hyphen (5+4)</td></tr><tr><td>Property Status</td><td>app.propertyStatus</td><td><a href="https://engine.tech/docs/api-reference/#tocS_PropertyStatus"><mark style="color:blue;">Allowed values - PropertyStatus</mark></a></td></tr><tr><td>Date of Birth</td><td>app.dateOfBirth</td><td>Format: mm/dd/yyyy, e.g. '01/01/1990'</td></tr><tr><td>Highest Level of Education</td><td>app.educationLevel</td><td><a href="https://engine.tech/docs/api-reference/#tocS_EducationLevel"><mark style="color:blue;">Allowed values - EducationLevel</mark></a></td></tr><tr><td>Employment Status</td><td>app.employmentStatus</td><td><a href="https://engine.tech/docs/api-reference/#tocS_EmploymentStatus"><mark style="color:blue;">Allowed values - EmploymentStatus</mark></a></td></tr><tr><td>Annual Income</td><td>app.annualIncome</td><td>No dollar signs, e.g. '100000'</td></tr><tr><td>Pay Frequency</td><td>app.employmentPayFrequency</td><td><a href="https://engine.tech/docs/api-reference/#tocS_EmploymentPayFrequency"><mark style="color:blue;">Allowed values - EmploymentPayFrequency</mark></a></td></tr></tbody></table>

*\*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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://even-financial.gitbook.io/developer-center/embeddable-integrations/widgets-and-embeds/embeds.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.