Banking (Deposits) Marketplace

Banking (Deposits) Embed: Implementation, Syntax, Demo, Tags, Tracking, and Best Practices

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.

Standard Embed Implementation

Banking Specific Syntax

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>

Full sample embed script looks like the following:

<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

Explore Savings | FionaFiona

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 zipcode. Instead of pre-populating with tags, Engine leverages programmatic geolocation-based information to pr-epopulate zipcode - the 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 (10001), 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

Sample Implementation

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

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

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.

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:

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", "onRateTableRender")
payload	Event-specific data; always includes timestamp (ISO-8601 string)

Events & Data

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

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

{
  "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:

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

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

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

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

Embed Best Practices & Troubleshooting

Best practices

1. Use the snippet Engine gives you. Don't hardcode channel, zone, or component paths yourself.

2. Keep async on the script tag. This prevents the embed script from blocking the rest of your page.

3. Give the embed a real container. Set a width on the parent. Set a min-height when possible. This gives the iframe room to render and avoids large layout shifts.

4. Allow Engine in your CSP. Your Content Security Policy must allow the Engine script in script-src and https://www.moneylion.com (or your Engine environment host) in frame-src.

5. Follow this page's tags and prefill guidance. Attributes differ by product. Use this page's sample, or your Engine-provided snippet, rather than copying syntax from another embed.

Troubleshooting

The component doesn't show

1. Check your install mode:

   • Explicit custom element: Confirm the moneylion-* element from your snippet is on the page.

2. Open the browser console. Check for script load failures or CSP blocks.

The page feels slow

1. Confirm the async attribute is on the <script> tag.

2. Avoid nesting the embed in a hidden container, such as display: none, at first load. This can delay useful height and layout work.

Events aren't firing

1. Confirm you listen for message events. Check for { name, payload } objects. See the tracking section on this page for product-specific events.

2. In production, filter by Engine's origin. This ignores unrelated postMessage traffic from other page scripts.