Credit Cards Marketplace
Implementation, Syntax, Consumer Experience, Tags, Tracking, and Best Practices
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
<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 componentThis 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.
/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.
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 Embed Demo
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
Prepopulating Known Customer Data
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
Reporting & Attribution
Used to send your own metadata to Engine in order to enrich reporting and attribution with Engine data
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:
To prefill fields in an embed, use the following syntax in the data-tags attribute within the embed script:
Sample Implementation
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
Below are the client tag keys that are currently supported. See Attribution Tracking for more information.
Most common
tag.clientIdtag.subIdtag.subId1tag.subId2tag.campaignId
Also supported
tag.agentIdtag.clickIdtag.deviceIdtag.mediumtag.sourceIdtag.subId3tag.targettag.trafficsourcetag.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:
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:
The message shape is always:
Events & Data
onOfferClick: Emitted when a user clicks an offer CTA. Suppressed if no leadUuid is available.
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.
onNavigate: Emitted when the search flow moves from one step to another.
onCreate: Emitted when a lead-created model is mounted for search or rate-table layouts. For non-edit flows, editingPage is null.
onRateTableRender: Emitted when a rate table mounts with a rate table UUID and visible credit-card offer metadata.
onErrorPageRetry: Emitted when a user clicks retry from a search error page.
onSubmit: Emitted when the final credit-card search is submitted.
onErrorPageView: Emitted when a search error page is viewed.
Two events are SDK-only and will not be emitted by the Engine web embed:
onBack: Emitted by the SDK header back buttononExit: Emitted by the SDK header exit button
Embed Best Practices & Troubleshooting
Last updated
Was this helpful?