# New Marketplaces

Engine's New Marketplaces Embed, also called "generic offers" embed, can be configured dynamically to support a number of smaller product subverticals like: 

* Credit Builders
* Earned Wage Access
* Debt Relief

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

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

```html
<script
  async
src="https://www.moneylion.com/network/{channel}/{zone}/web-component/{component-name}/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:** 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.

## New Marketplaces Specific Syntax

### Component Name

* **generic-offers:** 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

## New Marketplaces Embed Demo

Credit Builder Embed Demo Link: [https://www.moneylion.com/network/cnbc-ml/credit-builders/iframe](#the-embed-code)

<figure><img src="https://3849802388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MeMvVDbjd8vJWZ9Hwf0%2Fuploads%2FLf8QW8y3GYh7lmDkLM2A%2Fimage.png?alt=media&#x26;token=a74a7c03-f93e-4f4e-a67c-e0ee6a4c2879" alt=""><figcaption><p>Credit Builder Embed</p></figcaption></figure>

## Client Tags for Reporting

Engine Embeds support the ability to add certain tags for the purpose of [channel-partner-reporting](https://even-financial.gitbook.io/developer-center/channel-partner-reporting "mention"), which is 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
```

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

```html
"<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>"
```

<mark style="color:$primary;">In the above example,</mark> <mark style="color:$primary;"></mark><mark style="color:$primary;">`clientId`</mark> <mark style="color:$primary;"></mark><mark style="color:$primary;">and</mark> <mark style="color:$primary;"></mark><mark style="color:$primary;">`source`</mark> <mark style="color:$primary;"></mark><mark style="color:$primary;">are available as tags for reporting purposes.</mark>

### Supported Client Tag Keys

These are the keys that are currently fully supported across all Engine embed types. Please note that the keys below are case-sensitive:

* agentId
* campaignId
* 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

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