@coverdash/quotes

A React component that embeds the Coverdash Insurance Experience into your application. This package provides a seamless way for partners to integrate Coverdash's insurance quoting platform into their React applications through an iframe wrapper.

Overview

The @coverdash/quotes component creates an iframe that loads quotes.coverdash.com with configurable parameters. It handles communication between the parent application and the embedded quote interface through postMessage events, providing callbacks for various user interactions and application state changes.

Installation

npm install @coverdash/quotes
# or
yarn add @coverdash/quotes

Basic Usage

import React from "react"
import CoverdashQuotes from "@coverdash/quotes"
import "@coverdash/quotes/lib/cjs/styles.css"

function App() {
  return (
    <div>
      <CoverdashQuotes
        env="production"
        license="your-license-key"
        styles={{ minHeight: "600px" }}
        onApplicationCreated={(applicationId) => {
          console.log("Application created:", applicationId)
        }}
        onApplicationSubmitted={(applicationId) => {
          console.log("Application submitted:", applicationId)
        }}
      />
    </div>
  )
}

Component Props

| Prop | Type | Default | Description | | ------------------------- | --------------------- | ------------------------ | -------------------------------------------------- | | styles | React.CSSProperties | { minHeight: "40rem" } | Custom CSS styles for the iframe container | | env | string | "production" | Environment ("production", "uat", "staging") | | allowScroll | boolean | true | Whether the iframe allows scrolling | | isDemo | boolean | false | Enable demo mode | | reset | boolean | true | Reset the application state | | applicationSubmissionId | string | - | Existing application ID to load | | coverdashBackButton | boolean | false | Show Coverdash back button | | hideChat | boolean | false | Hide the chat functionality | | license | string | - | Required - Your Coverdash license key | | autoResize | boolean | true | Automatically resize iframe based on content | | source | string | - | Source identifier for tracking | | fakeQuote | boolean | false | Use fake quotes for testing | | hideScrollbar | boolean | false | Hide the scrollbar | | showCobrandedPage | boolean | false | Show cobranded page | | partnerTrackingId | string | - | Partner tracking identifier |

Prefilled Data Props

The prefilled prop accepts an object with the following optional properties:

User Information

| Property | Type | Description | | --------------- | ---------------- | -------------------- | | userEmail | string \| null | User's email address | | userFirstName | string \| null | User's first name | | userLastName | string \| null | User's last name | | userPhone | string \| null | User's phone number |

Business Information

| Property | Type | Description | | -------------------------- | --------------------------------------------------------------------------------------------- | -------------------------- | | businessId | string \| null | Existing business ID | | businessName | string \| null | Business name | | legalEntityType | "ASSOCIATION" \| "CORPORATION" \| "LLC" \| "INDIVIDUAL" \| "PARTNERSHIP" \| "TRUST" \| null | Legal entity type | | businessClassificationId | string \| null | Business classification ID | | companyType | string \| null | Company type | | policyType | string \| null | Policy type | | effectiveDate | string \| null | Policy effective date | | startupIndustryId | string \| null | Startup industry ID | | businessStartYear | string \| null | Year business was started | | yearsInBusiness | number \| null | Years in business | | website | string \| null | Business website | | totalNumberOfEmployees | number \| null | Total number of employees | | totalAnnualRevenue | number \| null | Total annual revenue | | totalAnnualPayroll | number \| null | Total annual payroll |

Location & Mailing Address

| Property | Type | Description | | ------------------------------------- | ----------------- | ------------------------------------------- | | locationAddress | string \| null | Business location address | | locationAddress2 | string \| null | Business location address line 2 | | locationCity | string \| null | Business location city | | locationStateCode | string \| null | Business location state code | | locationZip | string \| null | Business location ZIP code | | mailingAddressSameAsLocationAddress | boolean \| null | Whether mailing address is same as location | | mailingAddress | string \| null | Mailing address | | mailingAddress2 | string \| null | Mailing address line 2 | | mailingCity | string \| null | Mailing city | | mailingStateCode | string \| null | Mailing state code | | mailingZip | string \| null | Mailing ZIP code |

E-commerce Specific Fields

| Property | Type | Description | | ------------------------------ | ----------------- | --------------------------------------------------- | | ecommerceCategory | string \| null | E-commerce category | | sellingPlatforms | string \| null | Platforms where products are sold | | manufactureOrRelabel | boolean \| null | Whether business manufactures or relabels products | | areProductsHandcrafted | boolean \| null | Whether products are handcrafted | | annualManufacturedUnits | number \| null | Annual manufactured units | | importGoodsInternationally | boolean \| null | Whether business imports goods internationally | | manufactureOrSellListedItems | boolean \| null | Whether business manufactures or sells listed items |

Risk & Claims Information

| Property | Type | Description | | ----------------------------------- | ----------------- | --------------------------------------------------- | | previousLosses | boolean \| null | Whether business has previous losses | | previousLossAmount | number \| null | Amount of previous losses | | previousLossDescription | string \| null | Description of previous losses | | policyCancelledOrNonRenewed | boolean \| null | Whether policy was cancelled or non-renewed | | operatedWithoutInsuranceCoverage | boolean \| null | Whether operated without insurance | | purchasedBefore | boolean \| null | Whether purchased insurance before | | ownOrOperateOtherBusinessSameName | boolean \| null | Whether owns/operates other business with same name | | filedForBankruptcy | boolean \| null | Whether filed for bankruptcy | | isSaasProvider | boolean \| null | Whether business is a SaaS provider |

BOP (Business Owner's Policy) Specific Fields

| Property | Type | Description | | ----------------------- | ----------------- | ------------------------------------- | | buildingSprinklered | boolean \| null | Whether building has sprinkler system | | valueOfAssets | number \| null | Value of business assets | | buildingSquareFootage | number \| null | Building square footage | | occupiedSquareFootage | number \| null | Occupied square footage |

Cyber Insurance Specific Fields

| Property | Type | Description | | ----------------------------- | ----------------- | --------------------------------------------- | | domainNames | string \| null | Domain names owned by business | | piiPhi | boolean \| null | Whether business handles PII/PHI data | | piiPhiCount | number \| null | Number of PII/PHI records | | ccCustomerCount | number \| null | Number of customers with credit cards on file | | awareOfNewClaims | boolean \| null | Whether aware of new claims | | awareOfNewClaimsExplanation | string \| null | Explanation of new claims awareness | | numberOfClaims | number \| null | Number of claims | | encryptsData | boolean \| null | Whether business encrypts data | | hasTechEo | boolean \| null | Whether has tech E&O coverage | | hasEoMpl | boolean \| null | Whether has E&O/MPL coverage | | contentComplaints | boolean \| null | Whether has content-related complaints | | reviewsContent | boolean \| null | Whether reviews content before publishing | | backupAndRestore | boolean \| null | Whether has backup and restore procedures | | dualControl | boolean \| null | Whether uses dual control systems | | useCloudStorage | boolean \| null | Whether uses cloud storage |

Event Callback Props

| Prop | Type | Description | | ------------------------ | -------------------------------------------------------- | --------------------------------------------- | | onApplicationCreated | (applicationId: string) => void | Called when a new application is created | | onChangeBusiness | (businessId: string) => void | Called when business information changes | | onChangeIndustry | (industry: {naics17: string, display: string}) => void | Called when industry selection changes | | onApplicationSubmitted | (applicationId: string) => void | Called when application is submitted | | onBoundPolicy | (bound: boolean, policyId: string) => void | Called when policy is bound | | onRejectedFreeQuotes | (rejected: boolean) => void | Called when free quotes are rejected | | onClickBackToPartner | (clicked: boolean) => void | Called when back to partner button is clicked | | onQuotingProgress | (progress: number) => void | Called with quoting progress updates |

Complete Example

import React from "react"
import CoverdashQuotes from "@coverdash/quotes"
import "@coverdash/quotes/lib/cjs/styles.css"

function InsuranceQuotes() {
  const handleApplicationCreated = (applicationId: string) => {
    console.log("New application created:", applicationId)
    // Save to your database, analytics, etc.
  }

  const handlePolicyBound = (bound: boolean, policyId: string) => {
    if (bound) {
      console.log("Policy bound successfully:", policyId)
      // Handle successful policy binding
    }
  }

  return (
    <div className="insurance-container">
      <h1>Get Your Business Insurance Quote</h1>

      <CoverdashQuotes
        env="production"
        license="your-license-key-here"
        styles={{
          minHeight: "600px",
          maxWidth: "1200px",
          margin: "0 auto",
          borderRadius: "8px",
          boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
        }}
        prefilled={{
          userEmail: "[email protected]",
          userFirstName: "John",
          userLastName: "Doe",
          businessName: "Example Business LLC",
          legalEntityType: "LLC",
          locationCity: "San Francisco",
          locationStateCode: "CA",
        }}
        onApplicationCreated={handleApplicationCreated}
        onApplicationSubmitted={(id) =>
          console.log("Application submitted:", id)
        }
        onBoundPolicy={handlePolicyBound}
        onQuotingProgress={(progress) =>
          console.log("Progress:", progress + "%")
        }
        autoResize={true}
        hideChat={false}
      />
    </div>
  )
}

export default InsuranceQuotes

Development Workflow

When contributing to this project, follow these steps:

1. Local Development

• Make changes to example/src/components/Main.tsx and example/src/App.tsx for easy testing
• Run the example app locally to test your changes:

  cd example
  yarn install
  yarn start

2. Adding New Props

• Update example/src/components/Main.tsx with new prop logic
• Important: Also update src/index.tsx to include any new props in the component interface and pass them through to the Main component

3. Building

• The build process copies Main.tsx from the example to the main project:

  yarn build

• This runs the scripts defined in package.json:
  • copy-files: Copies components from example to src
  • build:esm & build:cjs: Compiles TypeScript
  • build:css: Processes CSS with Tailwind

4. Publishing

1. Commit your changes
2. Update the version:

   npm version patch  # This updates package.json and creates a commit

3. Push changes to the repository
4. Manually run the GitLab pipeline to publish the new version to NPM

5. File Structure

quotes_npm/
├── example/                 # Test/development app
│   ├── src/
│   │   ├── components/
│   │   │   └── Main.tsx    # Main component (source of truth)
│   │   └── App.tsx         # Example usage
├── src/
│   ├── components/
│   │   └── Main.tsx        # Copied from example during build
│   └── index.tsx           # Package entry point
├── lib/                    # Built output (generated)
└── package.json

Environment URLs

The component loads different URLs based on the env prop:

• production: https://quotes.coverdash.com
• uat: https://quotes.uat.coverdash.com
• staging: https://quotes.staging.coverdash.com

License Requirements

A valid license key is required to use this component. Contact Coverdash at https://www.coverdash.com/partner to obtain your license.

Browser Support

This component works in all modern browsers that support:

• ES6+ JavaScript features
• PostMessage API
• Iframe embedding

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes following the development workflow above
4. Test thoroughly using the example app
5. Submit a pull request

Support

For technical support or questions about integration, please contact the Coverdash team or visit https://www.coverdash.com/partner.