Back to Engine.tech

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.

Widget Script

Production Script

Include the widget library by adding the following script tag to your 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

Include the widget library by adding the following script tag to your 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

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

  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.

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>
    </>
  );
}

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

Integration with HTML

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

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

  1. 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.

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

Prefilling Value in the Partner Page and Widget

Partner Page

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

app.providedCreditRating

  • excellent

  • good

  • fair

  • poor

  • limited

  • unknown

app.zipcode

any 5 digit number (e.g 10010)

app.ageRange

  • AGE_RANGE_18_20

  • AGE_RANGE_21_24

  • AGE_RANGE_25_34

  • AGE_RANGE_35_44

  • AGE_RANGE_45_54

  • AGE_RANGE_55_64

  • AGE_RANGE_65_PLUS

Only Insert this value if it's applicable, and set the query to true

app.is_military

true

app.has_multiple_vehicles

true

app.is_home_owner

true

app.is_currently_insured

true

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.

<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

query

Default query string for the form to fetch, if you provide this query, a initial search will be trigger

string - Please refer to the Pre-filling via query table for the attributes and values

e.g

app.providedCreditRating=fair& app.zipcode=90210& app.ageRange=AGE_RANGE_45_54& app.is_military=true& app.has_multiple_vehicles=true

enable-border

Whether to enable border for the widget

Please refer to Blog 2 (Without Border) and Blog 3 (With Border) in Demo Embeddable to view the attributes in action

“true” | “false”

Default Value - “false”

border-color

Specify the border color for the border

Any supported css color code

tags

Client tags to be passed to the engine. Please refer to this documentation.

<moneylion-auto-insurance-listing title="Search Listing" prefetch="true" tags="tag.clientId=1234&tag.source=search-listing" />

prefetch

Pre-fill & fetch offers

“true” | “falseDefault Value - “false”

Client Tags Integration

Partner Page

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:

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

<moneylion-auto-insurance-listing tags="tag.clientId=1234&tag.source=search-listng>
</moneylion-auto-insurance-listing>
PreviousOffer Wall API - New MarketplacesNextBrand Guidelines and Assets

Last updated

Was this helpful?