# Credit Cards Marketplace

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

<pre class="language-html"><code class="lang-html">&#x3C;script
<strong>    async
</strong>    src="https://www.moneylion.com/network/{channel}/{zone}/web-component/{component-name}/index.js"
>&#x3C;/script>
&#x3C;moneylion-credit-cards>&#x3C;/moneylion-credit-cards> // used for Explore component
&#x3C;moneylion-credit-cards-search>&#x3C;/moneylion-credit-cards-search> // used for Search component
</code></pre>

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

{% embed url="<https://www.moneylion.com/credit-cards/best>" %}

## 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
* [Channel Partner Reporting](/developer-center/channel-partner-reporting/engine-analytics-api.md)

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

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

<mark style="color:$primary;">Sample implementation for an Explore experience:</mark>

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

<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 and the embed</mark> <mark style="color:$primary;"></mark><mark style="color:$primary;">`providedCreditRating`</mark> <mark style="color:$primary;"></mark><mark style="color:$primary;">and</mark> <mark style="color:$primary;"></mark><mark style="color:$primary;">`zipcode`</mark> <mark style="color:$primary;"></mark><mark style="color:$primary;">fields will be prepopulated when the embed is rendered.</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.

### **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 | <p>Phone number </p><p>(XXX-XXX-XXXX; must be 10 digits or 11 starting with 1)</p> |
| 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                                                                            |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://even-financial.gitbook.io/developer-center/embeddable-integrations/embeds/credit-cards-marketplace.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.