@ coverdash/ 引用

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

概览

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

安装

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

基本用途

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

组件道具

预填数据道具

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

用户信息

商业信息

地址( M)

电子商务特定领域

风险和索偿信息

BOP(企业所有人政策)

网络保险特定领域

事件召回软件

完整示例

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

发展 工作流量

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

1. 地方发展

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

  cd example
  yarn install
  yarn start
  

2. 添加新道具

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

3. 大楼

• 构建进程副本 Main.tsx 从实例到主要项目:

  yarn build
  

• 此运行定义的脚本 package.json数字 :
  • copy-files: 从示例复制到 src 组件
  • build:esm 打开 build:cjs: 编译类型脚本
  • build:css: 用 Tailwind 处理 CSS

4. 出版

1. 提交更改
2. 更新版本 :

   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 获取你的执照.

警卫

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