Credit Cards Marketplace

Credit Card Embeds: Implementation, Syntax, Demo, Tags, Tracking, and Best Practices

This page outlines what's needed to integrate Engine's Credit Card 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

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"
></script>
<moneylion-credit-cards></moneylion-credit-cards> // used for Explore component
<moneylion-credit-cards-search></moneylion-credit-cards-search> // used for Search component

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.

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.

Credit Cards Specific Syntax

Component Names

• /web-component/credit-cards-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.

• /web-component/credit-cards/: 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.

Credit Cards Embed Demo

Top Credit Cards of 2025 | MoneyLionMoneyLion

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 tags attribute within the embed component tag:

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\" 
></script>
<moneylion-credit-cards       
      tags="tag.clientId=c1&tag.source=email&app.providedCreditRating=excellent&app.zipcode=93105\"
></moneylion-credit-cards>

In the above example, clientId and source are available as tags for reporting purposes and the embed providedCreditRating and zipcode fields 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.

Supported Keys for Credit Cards Customer Data Prefill

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

Key	Purpose
app.annualIncome	Annual income (number)
app.firstName	First name
app.lastName	Last name
app.email	Email (valid formatting)
app.primaryPhone	Phone number (XXX-XXX-XXXX; must be 10 digits or 11 starting with 1)
app.dateOfBirth	Date of birth (mm/dd/yyyy)
app.address1	Address line 1
app.address2	Address line 2
app.city	City
app.state	State (valid state code, e.g. "CA")
app.zipcode	Zipcode

Tracking Events Emitted by Embed

When you embed the Credit Cards experience, event callbacks will fire by default.

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. Other activity (e.g. form display, page load) is used internally and is not posted to the host.

• 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)
})

The message shape is always:

{
  "name": "onOfferClick",
  "payload": {}
}

Events & Data

onOfferClick: Emitted when a user clicks an offer CTA. Suppressed if no leadUuid is available.

{
  "name": "onOfferClick",
  "payload": {
    "timestamp": "2026-04-07T00:00:00.000Z",
    "leadUuid": "00000000-0000-0000-0000-000000000000",
    "offerUuid": "1f5bf62b-9e0f-40ef-91ef-84b5c01942ac",
    "financialInstitutionBrandName": "Chase",
    "cardName": "Sapphire Preferred",
    "isITA": true,
    "cardNetwork": "visa"
  }
}

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

{
  "name": "onUpdate",
  "payload": {
    "timestamp": "2026-04-07T00:00:00.000Z",
    "updatePage": "email",
    "leadUuid": "00000000-0000-0000-0000-000000000000"
  }
}

{
  "name": "onUpdate",
  "payload": {
    "timestamp": "2026-04-07T00:00:00.000Z",
    "updatePage": "confirm",
    "editingPage": ["address"],
    "leadUuid": "00000000-0000-0000-0000-000000000000"
  }
}

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

{
  "name": "onNavigate",
  "payload": {
    "timestamp": "2026-04-07T00:00:00.000Z",
    "fromPage": "email",
    "toPage": "address",
    "leadUuid": "00000000-0000-0000-0000-000000000000"
  }
}

onCreate: Emitted when a lead-created model is mounted for search or rate-table layouts. For non-edit flows, editingPage is null.

{
  "name": "onCreate",
  "payload": {
    "timestamp": "2026-04-07T00:00:00.000Z",
    "leadUuid": "00000000-0000-0000-0000-000000000000",
    "createPage": "search",
    "editingPage": null
  }
}

onRateTableRender: Emitted when a rate table mounts with a rate table UUID and visible credit-card offer metadata.

{
  "name": "onRateTableRender",
  "payload": {
    "timestamp": "2026-04-07T00:00:00.000Z",
    "rateTableUuid": "ab12cd34-ef56-7890-ab12-cd34ef567890",
    "creditCardOffers": [
      {
        "uuid": "1f5bf62b-9e0f-40ef-91ef-84b5c01942ac",
        "financialInstitutionBrandName": "Chase",
        "cardName": "Freedom Unlimited",
        "isITA": true,
        "cardNetwork": "visa"
      }
    ]
  }
}

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

{
  "name": "onErrorPageRetry",
  "payload": {
    "timestamp": "2026-04-07T00:00:00.000Z",
    "leadUuid": "00000000-0000-0000-0000-000000000000",
    "toPage": "search",
    "editingPage": null
  }
}

onSubmit: Emitted when the final credit-card search is submitted.

{
  "name": "onSubmit",
  "payload": {
    "timestamp": "2026-04-07T00:00:00.000Z",
    "leadUuid": "00000000-0000-0000-0000-000000000000"
  }
}

onErrorPageView: Emitted when a search error page is viewed.

{
  "name": "onErrorPageView",
  "payload": {
    "timestamp": "2026-04-07T00:00:00.000Z",
    "leadUuid": "00000000-0000-0000-0000-000000000000",
    "fromPage": "search"
  }
}

Two events are SDK-only and will not be emitted by the Engine web embed:

• onBack: Emitted by the SDK header back button

• onExit: Emitted by the SDK header exit button

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.