> 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/marketplace-integrations/web-embeds/banking-deposits-marketplace.md).

# Banking (Deposits) Marketplace

{% hint style="success" icon="person-waving" %}
This page outlines what's needed to integrate Engine's **Banking 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.
{% endhint %}

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

{% 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 %}

{% code overflow="wrap" %}

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

{% endcode %}

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.

## Banking Specific Syntax

{% hint style="info" %}
Engine's banking embed **requires an additional tag** to be included at the end of the standard script to be able to mount correctly: `<moneylion-banking></moneylion-banking>`
{% endhint %}

Full sample embed script looks like the following:

```html
<script
  async
src="https://www.moneylion.com/network/{channel}/{zone}/web-component/banking/index.js"
></script><moneylion-banking
tags="tag.clientId=c1&tag.source=email&app.providedCreditRating=excellent&app.zipcode=93105\"
></moneylion-banking>
```

#### Component Names

* **`/web-component/banking/`:** A full application-style flow where consumers browse and compare banking deposit offers on your site, in a block that feels like part of your page instead of redirecting them elsewhere. It keeps the experience focused on exploring rates and products in context, so users stay in your environment while they shop for savings-related accounts.

## Banking Embed Demo

{% embed url="<https://fiona.com/explore/savings>" %}

## Client Tags for Attribution

#### **Banking Experience Data Pre-population**

Engine's Banking experience **does not use tags for the purpose of pre-populating consumer data** like other Engine marketplaces do. This is because Banking doesn't require the same degree of fidelity when it comes to user information.

The one piece of consumer information that can be changed is <mark style="color:$primary;">`zipcode`</mark>. Instead of pre-populating with tags, **Engine leverages programmatic geolocation-based information to pr-epopulate&#x20;**<mark style="color:$primary;">**`zipcode`**</mark> <mark style="color:$primary;">- t</mark>he precedence is as follows:

* An explicit ZIP filter (if defined)
* The visitor's geolocation-derived zipcode (this is the default behavior for Engine embeds)
* A fallback zipcode (<mark style="color:$primary;">`10001`</mark>), only if geolocation is unavailable)

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

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

{% code overflow="wrap" %}

```html
<script
  async
src="https://www.moneylion.com/network/{channel}/{zone}/web-component/banking/index.js"
></script><moneylion-banking
tags="tag.clientId=c1&tag.source=email\"
></moneylion-banking>
```

{% endcode %}

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

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

## Tracking Events Emitted by Embed

When you embed the Banking 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:

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

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

| Field     | Description                                                        |
| --------- | ------------------------------------------------------------------ |
| `name`    | The event name (e.g. `"onCreate"`, `"onRateTableRender"`)          |
| `payload` | Event-specific data; always includes `timestamp` (ISO-8601 string) |

#### Events & Data

#### `onCreate`: Emitted when a lead is created on the explore page.

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

Note: `onCreate` is suppressed if no `leadUuid` is available.

#### `onRateTableRender`: Emitted when offers are rendered on the explore page.

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

**`bankingOffers[]` item**

| Field                      | Type             | Definition                                      |
| -------------------------- | ---------------- | ----------------------------------------------- |
| `offerUuid`                | string           | Offer UUID                                      |
| `financialInstitutionName` | string           | Partner name                                    |
| `financialInstitutionUuid` | string           | Partner UUID (empty string if unavailable)      |
| `productType`              | string           | Product type (e.g. `"savings"`)                 |
| `productSubType`           | string           | Product subtype (e.g. `"savings_account"`)      |
| `accountName`              | string           | Account name shown in the UI                    |
| `annualPercentYield`       | number \| string | APY, or `""` if unavailable                     |
| `minimumDeposit`           | number \| string | Minimum opening deposit, or `""` if unavailable |
| `monthlyFee`               | number \| string | Monthly maintenance fee, or `""` if unavailable |

Example:

```json
{
  "offerUuid": "offer-123",
  "financialInstitutionName": "Partner Bank",
  "financialInstitutionUuid": "fi-123",
  "productType": "savings",
  "productSubType": "savings_account",
  "accountName": "High-Yield Savings",
  "annualPercentYield": 4.75,
  "minimumDeposit": 0,
  "monthlyFee": 0
}
```

***

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

```json
{
  "name": "onOfferClick",
  "payload": {
    "timestamp": "2026-06-03T14:22:10.123Z",
    "leadUuid": "00000000-0000-0000-0000-000000000000",
    "offerUuid": "offer-123",
    "financialInstitutionName": "Partner Bank",
    "financialInstitutionUuid": "fi-123",
    "productType": "savings",
    "productSubType": "savings_account"
  }
}
```

**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 | Partner name                            |
| `financialInstitutionUuid` | string | Partner UUID                            |
| `productType`              | string | Product type                            |
| `productSubType`           | string | Product subtype                         |

Note: `onOfferClick` does not include `accountName`, `annualPercentYield`, `minimumDeposit`, or `monthlyFee`. Use the `offerUuid` to correlate with the corresponding item from `onRateTableRender` if those fields are needed.

***

#### Common `productSubType` values

| Value                           | Product                                              |
| ------------------------------- | ---------------------------------------------------- |
| `savings_account`               | Savings account                                      |
| `checking`                      | Checking account (includes `high_interest_checking`) |
| `money_market_account`          | Money market account                                 |
| `cash_management_account`       | Cash management account                              |
| `certificate_of_deposit`        | Certificate of deposit                               |
| `individual_retirement_account` | Individual retirement account                        |

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

***

#### `onErrorPageView`: Emitted when the error page is shown.

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

#### `onErrorPageRetry`: Emitted when the user clicks retry from the error page.

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

## 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, and the optional `goal` query parameter:

```
GET https://even-financial.gitbook.io/developer-center/marketplace-integrations/web-embeds/banking-deposits-marketplace.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.