New Marketplaces

Implementation, Syntax, Consumer Experience, Tags, Tracking, and Best Practices

This guide covers integrating Engine's New Marketplaces Embed into your website. Also called the generic offers embed, it supports smaller product subverticals including Credit Builders, Earned Wage Access, and Debt Relief.

Review the embed syntax and loading best practices. Address layout shift to optimize performance. Discuss specific implementation details with your Engine team.

Standard Embed Implementation

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/generic-offers/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 & Zone: placeholders that will be replaced with precise values in the embed code provided to you by your Engine representative.

• Component Name: generic-offers is the universal offers tile embed. It renders one or more cards from Engine’s Offer Catalog (any supported product type) using UUID + product type, and handles real-time availability, monetization rules, and fallback UX for you

  Mounting: manual is the default. Place where the marketplace should render. The script tag and the element can appear in either order on the page.

  • With data-embed-type="auto-mount", do not add the element - the script inserts the component immediately after itself when the bundle loads. In this mode the script tag must be inside , in the exact position where the marketplace should appear.

New Marketplaces Embed Demo

Credit Builder Embed Demo Link: https://www.moneylion.com/network/cnbc-ml/credit-builders/iframe

Credit Builder Embed

Client Tags for Attribution

Engine Embeds support the ability to add certain tags with varying use cases, which are outlined in this section.

How to Implement Client Tags

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.dev/network/{channel}/{zone}/web-component/generic-offers/index.js\" 
      data-tags=\"tag.clientId=c1&tag.source=email\"
      data-embed-type=\"auto-mount\" 
></script>"

In the above example, clientId and source are available as tags for reporting purposes.

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.

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.

   • Auto-mount snippet: Confirm data-embed-type="auto-mount" is on the tag.

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.