@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

Prefilled Data Props

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

User Information

Business Information

Location & Mailing Address

E-commerce Specific Fields

Risk & Claims Information

BOP (Business Owner's Policy) Specific Fields

Cyber Insurance Specific Fields

Event Callback Props

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.

Security

Iframe sandbox

The embed iframe uses a restrictive sandbox attribute:

allow-scripts allow-forms allow-same-origin allow-popups

allow-top-navigation and allow-popups-to-escape-sandbox are intentionally omitted so a compromised iframe cannot navigate the parent tab or break out of the sandbox via popups. allow-popups remains enabled for payment and carrier flows that open new windows from the embedded app.

Subresource Integrity (SRI)

SRI is src-level, not iframe-level. Browsers verify integrity on each <script src="..."> or <link href="..."> in the document that loads the resource. The parent page cannot attach SRI to scripts inside the iframe; those attributes must be set in the HTML served by quotes.coverdash.com (the Next.js quotes app).

The hosted quotes app currently serves application bundles from same-origin /_next/static/... (hashes change every deploy; SRI belongs in that app’s build pipeline). No runtime .js files from cdn.coverdash.com were found in the quotes app at the time of this change. Third-party scripts loaded there (for example Intercom, Google Translate, unpkg) require per-URL integrity and crossOrigin="anonymous" on their <script> tags in the quotes repo, not in this npm wrapper.

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.