# @coverdash/quotes 中文文档

规范地址：https://npmcn.com/package/%40coverdash/quotes/

版本：0\.0\.81
npm 元数据更新时间：2026-09-01T16:37:45.347Z
中文译文更新时间：2026-11-10T21:01:45.381Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40coverdash/quotes
原文对照：https://npmcn.com/package/%40coverdash/quotes/?lang=original
项目主页：https://github.com/coverdash/npm#readme
源码仓库：https://github.com/coverdash/npm

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：112 kB，16 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react ^16\.0\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0，react-dom ^16\.0\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0
- 首次发布：2022-10-07T03:50:39.350Z
- 最新版本发布：2026-09-01T16:37:45.152Z
- 近 30 天下载量：17862（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：50（近 12 个月 7 个）

## 中文简介

在您的应用程序中嵌入 Coverdash 保险体验的 反应组件 。 这个软件包为合作伙伴提供了一个无缝的方法,通过iframe包装将Coverdash的保险引用平台整合到他们的React应用中.

## 安装

```sh
npm install @coverdash/quotes
```

也可以使用：`pnpm add @coverdash/quotes`、`yarn add @coverdash/quotes`、`bun add @coverdash/quotes`

## README

# @ coverdash/ 引用

在您的应用程序中嵌入 Coverdash 保险体验的 反应组件 。 这个软件包为合作伙伴提供了一个无缝的方法,通过iframe包装将Coverdash的保险引用平台整合到他们的React应用中.

## 概览

这个 `@coverdash/quotes` 组件创建装入的 iframe `quotes.coverdash.com` 带有可配置参数。 它通过Message后事件处理母应用程序与嵌入式引文接口之间的通信,为各种用户互动和应用程序状态变化提供回调.

## 安装

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

## 基本用途

```typescript
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>
  )
}
```

## 组件道具

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `styles` | `React.CSSProperties` | `{ minHeight: "40rem" }` | 自定义 Iframe 容器的 CSS 样式 |
| `env` | `string` | `"production"` | 环境`"production"`, (中文(简体) ), `"uat"`, (中文(简体) ), `"staging"`(中文(简体) ) |
| `allowScroll` | `boolean` | `true` | Iframe 是否允许滚动 |
| `isDemo` | `boolean` | `false` | 启用演示模式 |
| `reset` | `boolean` | `true` | 重置应用程序状态 |
| `applicationSubmissionId` | `string` | \- 说吧 | 装入的现有应用程序 ID |
| `coverdashBackButton` | `boolean` | `false` | 显示覆盖后按钮 |
| `hideChat` | `boolean` | `false` | 隐藏聊天功能 |
| `license` | `string` | \- 说吧 | **需求** - 你的封面牌照钥匙 |
| `autoResize` | `boolean` | `true` | 根据内容自动调整框架大小 |
| `source` | `string` | \- 说吧 | 用于跟踪的源标识符 |
| `fakeQuote` | `boolean` | `false` | 用假引号进行测试 |
| `hideScrollbar` | `boolean` | `false` | 隐藏滚动条 |
| `showCobrandedPage` | `boolean` | `false` | 显示同名页面 |
| `partnerTrackingId` | `string` | \- 说吧 | 伙伴追踪识别器 |

### 预填数据道具

这个 `prefilled` prop 接受具有以下可选属性的对象 :

#### 用户信息

| 财产 | 类型 | 说明 |
| --- | --- | --- |
| `userEmail` | `string | null` | 用户的电子邮件地址 |
| `userFirstName` | `string | null` | 用户名 |
| `userLastName` | `string | null` | 用户姓 |
| `userPhone` | `string | null` | 用户的电话号码 |

#### 商业信息

| 财产 | 类型 | 说明 |
| --- | --- | --- |
| `businessId` | `string | null` | 现有业务编号 |
| `businessName` | `string | null` | 商业名称 |
| `legalEntityType` | `"ASSOCIATION" | "CORPORATION" | "LLC" | "INDIVIDUAL" | "PARTNERSHIP" | "TRUST" | null` | 法人类型 |
| `businessClassificationId` | `string | null` | 业务分类编号 |
| `companyType` | `string | null` | 公司类型 |
| `policyType` | `string | null` | 政策类型 |
| `effectiveDate` | `string | null` | 政策生效日期 |
| `startupIndustryId` | `string | null` | 启动行业 ID |
| `businessStartYear` | `string | null` | 年度业务开始 |
| `yearsInBusiness` | `number | null` | 营业年数 |
| `website` | `string | null` | 商业网站 |
| `totalNumberOfEmployees` | `number | null` | 雇员总数 |
| `totalAnnualRevenue` | `number | null` | 年度收入共计 |
| `totalAnnualPayroll` | `number | null` | 年薪共计 |

#### 地址( M)

| 财产 | 类型 | 说明 |
| --- | --- | --- |
| `locationAddress` | `string | null` | 业务地址 |
| `locationAddress2` | `string | null` | 业务地址2 |
| `locationCity` | `string | null` | 商业地点城市 |
| `locationStateCode` | `string | null` | 业务地点州代码 |
| `locationZip` | `string | null` | 业务地点 ZIP 代码 |
| `mailingAddressSameAsLocationAddress` | `boolean | null` | 邮件地址是否与地址相同 |
| `mailingAddress` | `string | null` | 邮件地址 |
| `mailingAddress2` | `string | null` | 邮寄地址行2 |
| `mailingCity` | `string | null` | 邮寄城市 |
| `mailingStateCode` | `string | null` | 邮件状态代码 |
| `mailingZip` | `string | null` | 邮寄 ZIP 代码 |

#### 电子商务特定领域

| 财产 | 类型 | 说明 |
| --- | --- | --- |
| `ecommerceCategory` | `string | null` | 电子商务类别 |
| `sellingPlatforms` | `string | null` | 销售产品的平台 |
| `manufactureOrRelabel` | `boolean | null` | 企业是否制造或重新给产品贴上标签 |
| `areProductsHandcrafted` | `boolean | null` | 产品是否手工制作 |
| `annualManufacturedUnits` | `number | null` | 年制造单位 |
| `importGoodsInternationally` | `boolean | null` | 企业是否在国际上进口货物 |
| `manufactureOrSellListedItems` | `boolean | null` | 企业是否制造或销售上市物项 |

#### 风险和索偿信息

| 财产 | 类型 | 说明 |
| --- | --- | --- |
| `previousLosses` | `boolean | null` | B. 企业是否有先前的损失 |
| `previousLossAmount` | `number | null` | 先前损失额 |
| `previousLossDescription` | `string | null` | 以往损失说明 |
| `policyCancelledOrNonRenewed` | `boolean | null` | 是否取消策略或未更新 |
| `operatedWithoutInsuranceCoverage` | `boolean | null` | 是否没有保险 |
| `purchasedBefore` | `boolean | null` | 之前是否购买保险 |
| `ownOrOperateOtherBusinessSameName` | `boolean | null` | 是否拥有/经营同名的其他事项 |
| `filedForBankruptcy` | `boolean | null` | 是否申请破产 |
| `isSaasProvider` | `boolean | null` | 企业是否为 SaaS 供应商 |

#### BOP(企业所有人政策)

| 财产 | 类型 | 说明 |
| --- | --- | --- |
| `buildingSprinklered` | `boolean | null` | 建筑物是否有喷洒系统 |
| `valueOfAssets` | `number | null` | 企业资产价值 |
| `buildingSquareFootage` | `number | null` | 大楼平面 |
| `occupiedSquareFootage` | `number | null` | 占地面积 |

#### 网络保险特定领域

| 财产 | 类型 | 说明 |
| --- | --- | --- |
| `domainNames` | `string | null` | 企业拥有的域名 |
| `piiPhi` | `boolean | null` | 企业是否处理 PII/ PHI 数据 |
| `piiPhiCount` | `number | null` | PII/PHI记录数量 |
| `ccCustomerCount` | `number | null` | 存有信用卡的客户数量 |
| `awareOfNewClaims` | `boolean | null` | 是否知道新的索赔 |
| `awareOfNewClaimsExplanation` | `string | null` | 新的索赔意识的解释 |
| `numberOfClaims` | `number | null` | 索赔件数 |
| `encryptsData` | `boolean | null` | 企业是否加密数据 |
| `hasTechEo` | `boolean | null` | 是否有技术E&O覆盖 |
| `hasEoMpl` | `boolean | null` | 是否覆盖 E&O/ MPL |
| `contentComplaints` | `boolean | null` | 是否有与内容相关的投诉 |
| `reviewsContent` | `boolean | null` | 出版前是否审查内容 |
| `backupAndRestore` | `boolean | null` | 是否有备份和恢复程序 |
| `dualControl` | `boolean | null` | 是否使用双重控制系统 |
| `useCloudStorage` | `boolean | null` | 是否使用云存储 |

### 事件召回软件

| Prop | 类型 | 说明 |
| --- | --- | --- |
| `onApplicationCreated` | `(applicationId: string) => void` | 创建新应用程序时调用 |
| `onChangeBusiness` | `(businessId: string) => void` | 当商业信息发生变化时调用 |
| `onChangeIndustry` | `(industry: {naics17: string, display: string}) => void` | 当行业选择发生变化时调用 |
| `onApplicationSubmitted` | `(applicationId: string) => void` | 在提出申请时打电话 |
| `onBoundPolicy` | `(bound: boolean, policyId: string) => void` | 政策约束时调用 |
| `onRejectedFreeQuotes` | `(rejected: boolean) => void` | 拒绝自由引用时调用 |
| `onClickBackToPartner` | `(clicked: boolean) => void` | 点击返回伴侣按钮时调用 |
| `onQuotingProgress` | `(progress: number) => void` | 引用最新进展 |

## 完整示例

```typescript
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: "user@example.com",
          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
```

## 发展 工作流量

在对该项目作出贡献时,遵循这些步骤:

### 1\. 地方发展

-   更改为 `example/src/components/Main.tsx` 财务报告和审定财务报表 `example/src/App.tsx` 方便测试
-   在本地运行示例应用程序以测试您的更改 :
    
    ```bash
    cd example
    yarn install
    yarn start
    ```
    

### 2\. 添加新道具

-   更新 `example/src/components/Main.tsx` 带有新道克逻辑
-   **重要**: 也更新 `src/index.tsx` 将任何新道具纳入组件接口,并传递给主组件

### 3\. 大楼

-   构建进程副本 `Main.tsx` 从实例到主要项目:
    
    ```bash
    yarn build
    ```
    
-   此运行定义的脚本 `package.json`数字 :
    -   `copy-files`: 从示例复制到 src 组件
    -   `build:esm` 打开 `build:cjs`: 编译类型脚本
    -   `build:css`: 用 Tailwind 处理 CSS

### 4\. 出版

1.  提交更改
2.  更新版本 :
    
    ```bash
    npm version patch  # This updates package.json and creates a commit
    ```
    
3.  将更改推入仓库
4.  人工运行GitLab管道,向国家预防机制公布新版本

### 5\. 文件结构

```
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
```

## 环境 URL

组件根据 `env` 道具 :

-   `production`数字 : `https://quotes.coverdash.com`
-   `uat`数字 : `https://quotes.uat.coverdash.com`
-   `staging`数字 : `https://quotes.staging.coverdash.com`

## 许可证要求

使用此组件需要有效的许可证密钥 。 联系地址: [https://www.coverdash.com/ partners. 互联网档案馆的存檔,存档日期2013-12-21](https://www.coverdash.com/partner) 获取你的执照.

## 警卫

### Iframe 沙盒

嵌入式框架使用限制性 `sandbox` 属性 :

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

`allow-top-navigation` 财务报告和审定财务报表 `allow-popups-to-escape-sandbox` 被故意省略,因此一个被损坏的iframe不能通过弹出来导航母标签或从沙盒中突出. `allow-popups` 仍然允许从嵌入式应用程序打开新窗口的付款和载体流量.

### 分资源廉正

性权利倡议是 **弧级**,而不是iframe级。 浏览器验证 `integrity` 每个 `<script src="...">` 或者说 `<link href="...">` 在装入资源的文档中。 母页面不能将 SRI 附加到 iframe 内的脚本; 这些属性必须在 HTML 服务中设置 `quotes.coverdash.com` (下个.js引用应用).

主机引用的app目前服务于来自同源的应用程序捆绑 `/_next/static/...` (hashes改变每次部署;SRI属于该应用的构建管道). 无运行时间 `.js` 来自 `cdn.coverdash.com` 此更改时在引文应用中找到。 在那里装入的第三方脚本(例如Intercom,Google Translate, unpkg)需要每URL `integrity` 财务报告和审定财务报表 `crossOrigin="anonymous"` 他们的 `<script>` 引文中标记 repo, 不在此 npm 包装中 .

## 浏览器支持

此组件在所有现代浏览器中工作,支持:

-   ES6+ JavaScript 特性
-   后传 API
-   框架嵌入

## 捐款

1.  叉子存储器
2.  创建特性分支
3.  按照上面的开发工作流程进行修改
4.  使用示例应用程序进行彻底测试
5.  提交拉动请求

## 支助

关于技术支持或融合问题,请与Coverdash小组联系或访问 [https://www.coverdash.com/ partners. 互联网档案馆的存檔,存档日期2013-12-21](https://www.coverdash.com/partner)。 。 。 .

## 常见问题

### @coverdash/quotes 是什么？

在您的应用程序中嵌入 Coverdash 保险体验的 反应组件 。 这个软件包为合作伙伴提供了一个无缝的方法,通过iframe包装将Coverdash的保险引用平台整合到他们的React应用中\.

### 如何安装 @coverdash/quotes？

在项目目录运行 npm install @coverdash/quotes，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.0\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0）、react-dom（^16\.0\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @coverdash/quotes 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @coverdash/quotes 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @coverdash/quotes 可以商用吗？

@coverdash/quotes 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @coverdash/quotes 的下载量有多少？

根据 npm 官方下载统计，@coverdash/quotes 在 2026/10/11 – 2026/11/09 这 30 天内被下载 17,862 次，日均约 595 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @coverdash/quotes 还在维护吗？

最新版本 0\.0\.81 发布于 2026/09/02（2 个月前）；至今共发布 50 个版本，其中过去 12 个月发布了 7 个；首次发布于 2022/10/07。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。