Integration Code

Here are the steps for integrating the Fletch Insurance Widget (FIW) into website / web app / mobile app.

Copy the below code in the appropriate location of your webpage / web app / mobile app to embed the Fletch Insurance Widget (FIW). Height and width iFrame parameters are fully customizable.

// Replace the #PARTNERCODE# in the below string with the partner code. To get a partner code, please contact Fletch ([email protected])

Sandbox

For Sandbox environment, the code snippet would be

<iframe id="ifVCFrame" src="https://#PARTNERCODE#-wsb.fletch.co/" width="98%" 
        height="850px" style="border: 0px !important;" loading="lazy" ></iframe>

Production

For Production environment, the code snippet would be

<iframe id="ifVCFrame" src="https://#PARTNERCODE#-wp.fletch.co/" width="98%" 
        height="850px" style="border: 0px !important;" loading="lazy"></iframe>

Widget Display Types

Fletch offers two variations of our front end widget: full and mini widget. The full widget is optimized for 740px height while the mini widget is optimized for 400px height.

To configure the mini widget, append ?widget_type=Mini in the source URL.

Example full size widget source URL: https://#PARTNERCODE#-wsb.fletch.co/
Example mini widget source URL: https://#PARTNERCODE#-wsb.fletch.co/?widget_type=Mini

Appending Customer Data:

Partners have the ability to pass customer data and attribution tracking. This can be used to pre-fill the widget for a better customer experience that utilizes existing ecosystem data. It can also be used for analytics purposes via UTM parameters.

There are multiple ways to implement this; however, passing customer data is completely optional and does not affect widget functionality.

Query parameters is the set of key value pairs appended to the widget URL. The URL is appended with a ?key={value} and separated by & for multiple key value pairs.

Approach 1: Sending data from widget URL:

Use case: If widget is used in a full page redirect experience from the partner's ecosystem.

Fletch Hosted Widget URL:
https://#PARTNERCODE#-wp.fletch.co/?key1={value1}&key2={value2}&key3={value3}
https://#PARTNERCODE#-wp.fletch.co/?zip_code=19121&pet_type=Dog&pet_breed=Golden%20Retriever

Example Query Parameters:

Key	Value
zip_code	5-digit valid US zip code
pet_type	Cat, Dog
pet_dob_month	MM format. List of values from 01 to 12 representing January to December
pet_dob_year	YYYY format
pet_age	Value can be from 1 to 228 representing age in #months. Either pet_age or pet_dob_month & pet_dob_year can be used
pet_name	Name of pet
pet_breed	Breed name provided in dropdown list by Fletch
pet_gender (not applicable for mini widget)	Male, Female
owner_fname	Customer first name
owner_lname	Customer last name
owner_phone (not applicable for mini widget)	Customer phone number. Value should contain 10 digits
owner_email	Customer email ID
utm_source	Source site generating leading
utm_medium	Medium used (i.e. email, blog)
utm_campaign	Value of strategic or promotional campaign
utm_term	Value of the search term
utm_content	Value of named asset specifically clicked to bring the customer to the site
affiliate_id	Value of affiliate or partner promoting the campaign
insurer_toprank	Insurer quote that should be displayed top of the quote engine (valid values are pets_best or figo or pumpkin or prudent_pet or spot or lemonade or healthy_paws or fetch_pet_insurance)
solo_insurer	Partner who wants to offer specific insurer policy can use this query parameter (valid values are pets_best or figo or pumpkin or prudent_pet or spot or lemonade or healthy_paws or fetch_pet_insurance)
quotes_screen	When Partner embeds mini widget ie., widget_type=Mini, partner has ability to show quotes on same window using this key. The value of this quotes_screen key is same_window.

Approach 2: Sending data from client URL web page:

Use case: Redirect out to a separate landing page containing the embedded widget

Partner Hosted Website:
https://#PARTNERWEBSITE#/fletch/?key1={value1}&key2={value2}&key3={value3}
https://#PARTNERWEBSITE#/fletch/?zip_code=19121&pet_type=Dog&pet_breed=Golden%20Retriever

Fletch Hosted Partner Landing Page:
https://fletch.co/#PARTNERCODE/?key1={value1}&key2={value2}&key3={value3}
https://fletch.co/#PARTNERCODE/?zip_code=19121&pet_type=Dog&pet_breed=Golden%20Retriever

Example Query Parameters:

Key	Value
zip_code	5-digit valid US zip code
pet_type	Cat, Dog
pet_dob_month	MM format. List of values from 01 to 12 representing January to December
pet_dob_year	YYYY format
pet_age	Value can be from 1 to 228 representing age in #months. Either pet_age or pet_dob_month & pet_dob_year can be used
pet_name	Name of pet
pet_breed	Breed name provided in dropdown list by Fletch
pet_gender (not applicable for mini widget)	Male, Female
owner_fname	Customer first name
owner_lname	Customer last name
owner_number (not applicable for mini widget)	Customer phone number. Value should contain 10 digits
owner_email	Customer email ID
utm_source	Source site generating leading
utm_medium	Medium used (i.e. email, blog)
utm_campaign	Value of strategic or promotional campaign
utm_term	Value of the search term
utm_content	Value of named asset specifically clicked to bring the customer to the site
affiliate_id	Value of affiliate or partner promoting the campaign
insurer_toprank	Insurer quote that should be displayed top of the quote engine (valid values are pets_best or figo or pumpkin or prudent_pet or spot or lemonade or healthy_paws or fetch_pet_insurance)
solo_insurer	Partner who wants to offer specific insurer policy can use this query parameter (valid values are pets_best or figo or pumpkin or prudent_pet or spot or lemonade or healthy_paws or fetch_pet_insurance)
quotes_screen	When Partner embeds mini widget ie., widget_type=Mini, partner has ability to show quotes on same window using this key. The value of this quotes_screen key is same_window.

Please add the following script after the iFrame code:

<script>
  var iframe = document.getElementById("ifVCFrame");
  if (typeof(iframe) !== 'undefined' && iframe !== null && window.location.search !== '') {
    var url = iframe.src;
    var separator = (url.indexOf('?') === -1) ? '?' : '&';
    var addQueryParam = url + separator + window.location.search.substring(1);
    iframe.src = addQueryParam;
  }
</script>

Approach 3: Sending data from partner web application or mobile application:

Use case: Ecosystem partner application and Fletch widget reside on the same page

Please add the following script after the iFrame code

<script>
    var iframe = document.getElementById(‘ifFLFrame’)
    if(typeof(iframe) != 'undefined' && iframe != null ') {
        var url = iframe.src
        var separator = (url.indexOf('?') === -1) ? '?' : '&';
        var addQueryParam = url + separator + key1="+{value1}+"&key2="+{value of key2}+"&key3="+{value of key3}"  
        iframe.src= addQueryParam
    }
</script>

Example Query Parameters:

Key	Value
zip_code	5-digit valid US zip code
pet_type	Cat, Dog
pet_dob_month	MM format. List of values from 01 to 12 representing January to December
pet_dob_year	YYYY format
pet_age	Value can be from 1 to 228 representing age in #months. Either pet_age or pet_dob_month & pet_dob_year can be used
pet_name	Name of pet
pet_breed	Get breed name list by Fletch
pet_gender (not applicable for mini widget)	Male, Female
owner_fname	Customer first name
owner_lname	Customer last name
owner_number (not applicable for mini widget)	Customer phone number. Value should contain 10 digits
owner_email	Customer email ID
utm_source	Source site generating leading
utm_medium	Medium used (i.e. email, blog)
utm_campaign	Value of strategic or promotional campaign
utm_term	Value of the search term
utm_content	Value of named asset specifically clicked to bring the customer to the site
affiliate_id	Value of affiliate or partner promoting the campaign
insurer_toprank	Insurer quote that should be displayed top of the quote engine (valid values are pets_best or figo or pumpkin or prudent_pet or spot or lemonade or healthy_paws or fetch_pet_insurance)
solo_insurer	Partner who wants to offer specific insurer policy can use this query parameter (valid values are pets_best or figo or pumpkin or prudent_pet or spot or lemonade or healthy_paws or fetch_pet_insurance)
quotes_screen	When Partner embeds mini widget ie., widget_type=Mini, partner has ability to show quotes on same window using this key. The value of this quotes_screen key is same_window.

Approach 4: Opening widget in pop-up screen on click of CTA button:

Use case: Placing widget on pop-up screen when user clicks on CTA button

For reference, use the URL https://fletch.co/sritest/ and click on "View Rates" button to observe widget on pop-up screen. Kindly contact Fletch team for embedded script.

Approach 5: Incorporating the Fletch Widget with the web integration package

This approach showcases the integration of the Fletch widget into a partner-hosted web page through the use of the web integration package. This package simplifies the process of configuring and customizing the Fletch widget on a partner's website, providing a user-friendly experience.

Integration Steps

Include Fletch javascript package:
Include the Fletch JS package by adding the following script tag in the section:

<script src="https://unpkg.com/@fletch-tech/[email protected]/dist/main.min.js"></script>

Important note:Changes made to the Fletch widget are version-controlled (i.e. follows semantic versioning). If a partner uses a specific version (e.g., 1.0.0), any further changes will require updating to the latest version at their end.

Opting for the latest version without specifying a version number is possible, but it's not recommended due to potential breaking changes.

Semantic versioning ranges, such as @fletch-tech/widget^1.0.0, can be used to match any version within a specified range (e.g., 1.x) while avoiding versions outside that range.

Using a range version in the script src (e.g., https://unpkg.com/@fletch-tech/[[email protected]](mailto:[email protected])) will redirect to the latest version within the specified range (e.g., 1.0.0 at the moment). However, this approach is not recommended due to potential delays caused by redirects and caching considerations.

Initialize Fletch Widget:
Use the fletchApp.init() function to initialize the Fletch widget.
Customize the parameters within the init function according to your requirements.

<script>
      // Fletch widget initialization script
      fletchApp.init({
        src: "https://<partner-name>.fletch.co",
        usePopup: false,
        useMiniWidget: true,
        syncQueryParams: false,
        iframeProps: {
          height: "500px", 
          width: "800px",
          style: {
            borderRadius: '25px',
          }
        },
        popupProps: {
          width: "800px",
          height: "500px",
        },
        queryParams: {
          // Specify default query parameters
          zip_code: "60615",
          pet_type: "Dog",
          pet_name: "Max",
          pet_breed: "Afghan Hound",
          pet_gender: "Female",
          owner_fname: "Fletchtestone",
          owner_lname: "Fletchtesttwo",
          owner_phone: "9999999999",
          owner_email: "[email protected]",
          pet_age: "24",
          utm_source: "blog",
          utm_medium: "organic",
          utm_campaign: "email",
          utm_content: "TEST",
          utm_term: "fullterm",
          affiliate_id: "partner-name",
          quotes_screen: "same_window",
        },
        mediaQueries: [
          // Responsive styles for different screen sizes
          {
            query: "(max-width: 768px)",
            style: {
              width: "500px",
              height: "700px",
            },
          },
          {
            query: "(max-width: 500px)",
            style: {
              width: "400px",
              height: "400px",
            },
          },
        ],
      });
    </script>

Notes

Adjust the src property in the fletchApp.init() function to match your partner-hosted website URL.
fletchApp.init() function should be after the
or click me

Parameter	Description
src	The URL of the partner-hosted website where the Fletch widget will be embedded.
usePopup	A boolean flag that determines whether to utilize a popup for the widget. When set to true, a popup will be employed; otherwise, the widget will be embedded as an iframe. To activate this feature, a button with the id "fletch-iframe-trigger" should be present.
useMiniWidget	A boolean indicating whether to use the mini-widget. If set to true, the mini-widget will be used
syncQueryParams	A boolean indicating whether to synchronize query parameters between the partner's website and the embedded widget. If set to true, query parameters from the partner's website will be mirrored in the widget.
iframeProps	Object containing properties for the iframe, such as height, width, style
popupProps	Object containing properties for the popup when usePopup is set to true,
queryParams	Default query parameters that pre-fill information in the widget. For the list of query-parameters, refer to approach 1 <#link> or 2 <#link> or 3 <#link>.
mediaQueries	An array of objects defining responsive styles based on different screen sizes. Each object includes a query and style property. The query is a media query string, and style is an object containing CSS styles to apply when the query matches.

Let's expand on the iframeProps and popupProps:

Property	Description
height	The height of the iframe or popup.
width	The width of the iframe or popup.
style	An object containing additional CSS styles for the iframe or popup.

Example iframeProps:

iframeProps: {
  height: "500px",
  width: "800px",
  style: {
    borderRadius: '25px',
  }
}

Example popupProps:

popupProps: {
  width: "800px",
  height: "500px",
  style: {
    borderRadius: '25px',
  }

}

                    Copyright Fletch Technologies, Inc. 2024