# Partner Page and Widget Integration & Configuration Guide

### Auto Insurance Widget Integration

#### Introduction

This document describes how to integrate the Auto Insurance Widget into your web application. The widget allows users to get auto insurance ads seamlessly.

<figure><img src="https://3849802388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MeMvVDbjd8vJWZ9Hwf0%2Fuploads%2FQhvmOsxAcWmRmvQO6DCT%2Fimage.png?alt=media&#x26;token=dde13ffd-15ed-470d-a495-9a114fc5dbd3" alt=""><figcaption></figcaption></figure>

## Widget Script

### Production Script <a href="#production-script" id="production-script"></a>

Include the widget library by adding the following script tag to your HTML:

```html
<script src="https://www.moneylion.com/network/moneylion/website-autoinsurance-embed/web-component/auto-insurance-listing/index.js" strategy="afterInteractive" /> 
<moneylion-auto-insurance-listing prefetch="true"></moneylion-auto-insurance-listing>
```

### Staging Script <a href="#staging-script" id="staging-script"></a>

Include the widget library by adding the following script tag to your HTML:

```html
<Script src="https://www.moneylion.dev/network/moneylion/cnf-auto-insurance/web-component/auto-insurance-listing/index.js" strategy="afterInteractive" />
<moneylion-auto-insurance-listing prefetch="true"></moneylion-auto-insurance-listing>
```

## Integration of Auto Insurance Widget <a href="#integration-of-cnf-auto-insurance-widget" id="integration-of-cnf-auto-insurance-widget"></a>

The Auto Insurance Widget allows easy embedding into both **Next.js** projects and standard HTML. This guide will walk you through the steps to integrate the widget into your application.

### Integration with NextJS <a href="#integration-with-nextjs" id="integration-with-nextjs"></a>

1. **Add the Script Tag -** Place the `<Script />` component from Next.js to load the widget’s JavaScript file. Use the `strategy="beforeInteractive"` attribute to ensure that the script loads as soon as possible, which is essential for the widget's performance.

```javascript
import Script from 'next/script';

export default function MyPage() {
  return (
    <>
      <Script
        // Point to the widget source, in this case, it's pointing to staging site source
        src="https://www.moneylion.com/network/moneylion/website-autoinsurance-embed/web-component/auto-insurance-listing/index.js"
        strategy="beforeInteractive"
      />
      // Place this Element at the place where you want the widget to display
      <moneylion-auto-insurance-listing prefetch="true"></moneylion-auto-insurance-listing>
    </>
  );
}
```

2. **Add the Custom Element -** Place `<moneylion-auto-insurance-listing prefetch="true" />` where you want the widget to appear in your page.

### Integration with HTML <a href="#integration-with-html" id="integration-with-html"></a>

1. **Include the Script** Add a script tag in your HTML's `<head>` section to load the widget.

```html
<head>
  <script  type="application/javascript" src="https://www.moneylion.com/network/moneylion/website-autoinsurance-embed/web-component/auto-insurance-listing/index.js"></script>
</head>
```

2. **Add the Custom Element** - Place the `<moneylion-auto-insurance-listing></moneylion-auto-insurance-listing>` custom element in your HTML where you want the widget to appear.

```html
<body>
  <moneylion-auto-insurance-listing prefetch="true" enable-border="true"></moneylion-auto-insurance-listing>
</body>
```

### Prefilling Value in the Partner Page and Widget  <a href="#prefilling-value-in-the-partner-page-and-widget" id="prefilling-value-in-the-partner-page-and-widget"></a>

#### Partner Page <a href="#partner-page" id="partner-page"></a>

Example URL:[https://www.moneylion.com/network/moneylion/website-autoinsurance-embed/search?app.providedCreditRating=fair\&app.zipcode=57656\&app.ageRange=AGE\_RANGE\_18\_20\&app.has\_multiple\_vehicles=false\&app.is\_home\_owner=false\&app.is\_currently\_insured=false\&tag.utm\_source=web\&tag.utm\_medium=web\&tag.utm\_campaign=auto-insurance\&tag.traffic\_src=marketplace\&tag.medium=webdash](https://www.moneylion.com/network/moneylion/website-autoinsurance-embed/search?app.providedCreditRating=fair\&app.zipcode=57656\&app.ageRange=AGE_RANGE_18_20\&app.has_multiple_vehicles=false\&app.is_home_owner=false\&app.is_currently_insured=false\&tag.utm_source=web\&tag.utm_medium=web\&tag.utm_campaign=auto-insurance\&tag.traffic_src=marketplace\&tag.medium=webdash)

<figure><img src="https://3849802388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MeMvVDbjd8vJWZ9Hwf0%2Fuploads%2Faf3xSoHo4XuTYg8kufdf%2FScreenshot%202025-08-25%20at%204.45.06%E2%80%AFPM.png?alt=media&#x26;token=cda10b25-73cf-4678-af2a-c3728b9b7712" alt=""><figcaption></figcaption></figure>



<table data-header-hidden><thead><tr><th width="338.1875">Params</th><th>Value</th></tr></thead><tbody><tr><td><code>app.providedCreditRating</code></td><td><p></p><ul><li>excellent</li><li>good</li><li>fair</li><li>poor</li><li>limited</li><li>unknown</li></ul></td></tr><tr><td><code>app.zipcode</code></td><td>any 5 digit number (e.g 10010)</td></tr><tr><td><code>app.ageRange</code></td><td><ul><li>AGE_RANGE_18_20</li><li>AGE_RANGE_21_24</li><li>AGE_RANGE_25_34</li><li>AGE_RANGE_35_44</li><li>AGE_RANGE_45_54</li><li>AGE_RANGE_55_64</li><li>AGE_RANGE_65_PLUS</li></ul></td></tr><tr><td>Only Insert this value if it's applicable, and set the query to <code>true</code></td><td></td></tr><tr><td><code>app.is_military</code></td><td>true</td></tr><tr><td><code>app.has_</code><em><code>multiple_vehicles</code></em></td><td>true</td></tr><tr><td><code>app.is_home_owner</code></td><td>true</td></tr><tr><td><code>app.is_currently_insured</code></td><td>true</td></tr></tbody></table>

### Widget

The widget provides a field for the consumer to pass in the **query** and the URL format is the same as the Partner Page integration.

<figure><img src="https://3849802388-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MeMvVDbjd8vJWZ9Hwf0%2Fuploads%2FCuTZx3dWDyCckBxu7hET%2Fimage.png?alt=media&#x26;token=8d7b8d6d-e876-4c0b-a31f-6f450337f448" alt=""><figcaption></figcaption></figure>

```html
<script
  type="application/javascript"
  src="https://www.moneylion.com/network/moneylion/website-autoinsurance-embed/web-component/auto-insurance-listing/index.js"
/>
<moneylion-auto-insurance-listing
  title="Search Listing"
  query="app.providedCreditRating=fair&app.zipcode=90210&app.ageRange=AGE_RANGE_45_54&app.is_military=true&app.has_multiple_vehicles=true"
></moneylion-auto-insurance-listing>
```

Upon landing on the widget, the widget will auto fetch the data

### Widget Configuration

This table shows a list of attributes that can be passed down to the web component

<table data-header-hidden><thead><tr><th width="239.58984375">Attributes</th><th>Description</th><th>Value</th></tr></thead><tbody><tr><td>query</td><td>Default query string for the form to fetch, if you provide this query, a initial search will be trigger</td><td><p>string - Please refer to the <strong>Pre-filling via query</strong> table for the attributes and values</p><p>e.g</p><p><code>app.providedCreditRating=fair&#x26; app.zipcode=90210&#x26; app.ageRange=AGE_RANGE_45_54&#x26; app.is_military=true&#x26; app.has_multiple_vehicles=true</code></p></td></tr><tr><td>enable-border</td><td><p>Whether to enable border for the widget</p><p>Please refer to Blog 2 (Without Border) and Blog 3 (With Border) in <a href="https://www.moneylion.dev/network/test-ipsum/moneylion/demo-embeddable">Demo Embeddable</a> to view the attributes in action</p></td><td><p>“true” | “false”</p><p><strong>Default Value</strong> - “false”</p></td></tr><tr><td>border-color</td><td>Specify the border color for the border</td><td>Any supported css color code</td></tr><tr><td>tags</td><td>Client tags to be passed to the engine. Please refer to this <a href="https://engine.tech/developer-center/references/appendix/appendix-e-appending-client-tags-to-leads-posted-to-engine">documentation</a>.</td><td><p> </p><p><code>&#x3C;moneylion-auto-insurance-listing title="Search Listing" prefetch="true" tags="tag.clientId=1234&#x26;tag.source=search-listing" /></code></p></td></tr><tr><td>prefetch</td><td>Pre-fill &#x26; fetch offers</td><td>“true” | “false<strong>Default Value</strong> - “false”</td></tr></tbody></table>

### Client Tags Integration <a href="#client-tags-integration" id="client-tags-integration"></a>

#### **Partner Page** <a href="#partner-page.1" id="partner-page.1"></a>

To integrate client tags on the Partner Page, you can pass query parameters in the following format: `tag.x=y&tag.g=f`. These parameters will be automatically consumed.

**Examples:**

* [https://www.moneylion.dev/network/moneylion/cnf-auto-insurance/search?tag.clientId=1234\&tag.clientSource=email](https://www.moneylion.dev/network/moneylion/cnf-auto-insurance/search?tag.clientId=1234\&tag.clientSource=email)
* [https://www.moneylion.dev/network/moneylion/cnf-auto-insurance/search?app.providedCreditRating=excellent\&app.zipcode=90210\&app.ageRange=AGE\_RANGE\_65\_PLUS\&app.has\_multiple\_vehicles=true\&app.is\_home\_owner=true\&tag.clientId=1234\&tag.clientSource=email](https://www.moneylion.dev/network/moneylion/cnf-auto-insurance/search?app.providedCreditRating=excellent\&app.zipcode=90210\&app.ageRange=AGE_RANGE_65_PLUS\&app.has_multiple_vehicles=true\&app.is_home_owner=true\&tag.clientId=1234\&tag.clientSource=email)

Web Component

The Web Component now supports a `tags` attribute, which allows you to pass tag values directly to the component and follows the same convention `tag.x=y&tag.g=f`

```html
<moneylion-auto-insurance-listing tags="tag.clientId=1234&tag.source=search-listng>
</moneylion-auto-insurance-listing>
```
