Buddy 提供组件

添加的反射组件 哥们 保险网关

目录

• 所需资源
• 安装
• 基本用途
• 道具
• 配置文件
  • 第2版配置文件(建议)
  • 版本 1 配置文件
• 查看类型
• 离职
  • 只供客户端应用
  • 用于完整堆栈的应用程序
• 预填数据
• 样式
  • 颜色调色板
  • 覆盖
  • 类别和组成部分
• 抓取数据

所需资源

• 反应 16.8.0+
• 联系人 哥们 获取 partnerID 兼容 ions 对于你的具体用途.

安装

从 npm 安装并将其纳入您的 React 构建进程

npm install @buddy-technology/offer-component 或者说 yarn add @buddy-technology/offer-component

基本用途

import React from 'react';
import BuddyOfferElement from '@buddy-technology/offer-component';

function App() {
  return (
    <div id="app">
      <h1>My App</h1>
      <BuddyOfferElement ion="MY_ION" partnerID="my-partner-id" stage="STAGING" />
    </div>
  );
}
export default App;

道具

*必须

配置文件

第2版配置文件(建议)

2 版本配置文件( 使用 Buddy.embedOptions),简单地将文件的 URL 传递到 configSrc 道具 (英语). 配置文件中定义的属性将与此执行中定义的任何道具合并.

实例

// config.js 

const configTheme = {
  baseTheme: 'base',
  palette: 'base',
  overrides: {
    styles: {
      h1: { color: 'blue' }
      h2: { color: 'blue' }
    }
  },
};

window.Buddy.embedOptions.theme = configTheme // attach our theme to embedOptions.

// React implementation

import React from 'react';
import BuddyOfferElement from '@buddy-technology/offer-component';

function App() {
  const overrideConfigTheme = {
    overrides: {
      styles: {
        h2: { color: 'red' }
      }
    }
  };

  return (
    <div id="app">
      <h1>My App</h1>
      <BuddyOfferElement
        ion="MY_ION"
        partnerID="my-partner-id"
        stage="staging"
        configSrc="https://js.buddy.insure/config.js" // URL of our config file
        theme={overrideConfigTheme} // deep merges our theme, h2's will now be red, but h1's are still blue.
      />
    </div>
  );
}
export default App;

版本 1 配置文件

注: 此特性是有用的配对配置文件, 使用 config 变量图案。 关于如何实施新配置的信息见: 版本 2 配置文件。 。 。 .

用于配置文件 config 可变模式,我们需要先使用 useConfig 钩住,然后把我们的选择 执行.

import React from 'react';
import BuddyOfferElement, { useConfig } from '@buddy-technology/offer-component';

function App() {
  const { config, isLoading } = useConfig('https://config-domain.com/config.js');

  if (isLoading || !config) {
    return null;
  }

  // grab relevant properties from config
  const theme = config.themeBase;
  const data = config.data;
  const handleUserEvents = config.userEvents;

  return (
    <div id="app">
      <h1>My App</h1>
      <BuddyOfferElement
        ion="MY_ION"
        partnerID="my-partner-id"
        stage="staging"
        theme={theme}
        data={data}
        onUserEvent={handleUserEvents}
      />
    </div>
  );
}
export default App;

查看类型

Buddy的"提供元素"分为三种不同的取景类型:

• 标注 (default) - 由用户点击到下一节的相接表.
• 单表 - 单一形式,所有字段都显示在同一可滚动视图中.
• 仅提供 - 展示保险报价的图片 上面有放火的引文和复选框 onOptIn 检查时 onOptOut 当不选中时( 见 用于完整堆栈的应用程序 以获得更多信息. 页:1: " 仅提供 " 的实施工作意在在具有必要数据的控制环境中进行,并且需要付款整合才能离职(见Buddy's 伙伴 API 文件) (中文(简体) ). 如果缺少或无效任何字段,则将随包括所需字段的个人意见而形成一个分步形式。 对满意字段的视图将被跳过 。 一旦用户纠正了任何需要的信息,他们将只降落在屏幕上.

离职

只供客户端应用

嵌入部件的默认模式包括全取出. 客户可以通过整个流程进入安全采购,政策将直接送到其收件箱.

要明确设置包含取出内容的部件,请设置 includeCheckout 属性改为 true。 。 。 .

用于完整堆栈的应用程序

在客户已经购买了其他产品的服务器侧和全存储应用程序中,最好将部件中的安全检查排除在外,这样客户就可以与任何其他产品一起购买保险,作为单一交易的一部分。 后端集成( 见 Buddy's 伙伴 API 文件)是完成交易所必需的.

要使用此模式, 设置 includeCheckout 改为 false,或设置视图 offer-only。 。 。 .

当用户选择加入时 onOptIn 与已完成的应用程序对象一起发射回调。 如果用户选择退出, onOptOut 将召入.

// simple paginated example to collect data
import React from 'react';
import BuddyOfferElement from '@buddy-technology/offer-component';
import { handleAddToCart, handleRemoveFromCart } from './myApi';

function App() {
  const handleAddToCart = (payload) => {
    handleAddToCart(payload)
  };

  const handleRemoveFromCart = (payload) => {
    handleRemoveFromCart(payload)
  };

  return (
    <div id="app">
      <h1>My App</h1>
      <BuddyOfferElement
        ion="MY_ION"
        partnerID="my-partner-id"
        viewType="paginated"
        includeCheckout={false}
        onOptIn={handleAddToCart}
        onOptOut={handleRemoveFromCart}
        stage="PRODUCTION"
      />
    </div>
  );
}
export default App;

// example using offer-only and passing in customer/policy data
import React from 'react';
import BuddyOfferElement from '@buddy-technology/offer-component';
import { handleAddToCart, handleRemoveFromCart } from './myApi';

// passing down data as prop in this example
function App({ userAndPolicyData }) {
  const handleAddToCart = (payload) => {
    handleAddToCart(payload)
  };

  const handleRemoveFromCart = (payload) => {
    handleRemoveFromCart(payload)
  };

  return (
    <div id="app">
      <h1>My App</h1>
      <BuddyOfferElement
        ion="MY_ION"
        partnerID="my-partner-id"
        viewType="offer-only"
        data={userAndPolicyData} // data is passed in, if any fields are invalid, they will be displayed to user to rectify before purchasing.
        onOptIn={handleAddToCart}
        onOptOut={handleRemoveFromCart}
        stage="PRODUCTION"
      />
    </div>
  );
}
export default App;

预填数据

在任何已经为优化用户体验而收集的客户和政策数据中传递数据是最佳做法. 除非视图Type是 offer-only,用户可以查看并编辑任何通过的数据.

数据遵循应用程序对象结构. 参见您的特定ION(或提供)文档.

import React from 'react';
import BuddyOfferElement from '@buddy-technology/offer-component';

function App() {
  const data = {
    customer: {
      firstName: 'customer first name',
      lastName: 'customer last name',
      address: {
        line1: 'street address',
        city: 'city',
        state: 'state',
        zip: 'zip',
      }
    },
    policy: {
      startDate: '12/31/2022',
    }
  };

  return (
    <div id="app">
      <h1>My App</h1>
      <BuddyOfferElement
        ion="MY_ION"
        partnerID="my-partner-id"
        data={data}
        stage="PRODUCTION"
      />
    </div>
  );
}
export default App;

样式

Buddy的提供元素支持广泛的视觉定制,使您能够将您的站点设计与主题道具无缝匹配.

1. 选择一个基础主题和颜色调色板 : 快速运行,选择预建的主题和调色板,最接近您的网站.

2. 通过添加更进一步自定义 覆盖数字 : 几乎任何财产都可以使用 CSS 对象样式。 。 。 .

import React from 'react';
import BuddyOfferElement from '@buddy-technology/offer-component';

function App() {
  const customTheme = {
    baseTheme: "base",
    palette: "buddy",
    overrides: {
      webFonts: [
        'https://fonts.googleapis.com/css2?family=Rubik:wght@700&display=swap',
      ],
      styles: {
        h1: {
          color: 'var(--color-text-primary)',
          fontFamily: 'Rubik, sans-serif',
          fontSize: '2rem',
          '@media (min-width: 992px)': {
            fontSize: '3rem',
          },
          '&:hover': {
            boxShadow: 'none',
            backgroundColor: '#FBF9EF',
          },
        },
        body: { color: '#0A242D' },
        '.input-text': {
          border: 'none',
          color: '#333333',
        }
      },
      colors: { textPrimary: '#0A242D' },
    },
  };

  return (
    <div id="app">
      <h1>My App</h1>
      <BuddyOfferElement
        ion="MY_ION"
        partnerID="my-partner-id"
        theme={customTheme}
        stage="PRODUCTION"
      />
    </div>
  );
}
export default App;

颜色调色板

目前我们提供两个彩色调色板.

基础数字 :

primary: '#000000',
secondary: '#254E70',
tertiary: '#848484',
negative: '#e45b78',
positive: '#A3D9B1',
textPrimary: '#000',
textSecondary: '848484',
backgroundPrimary: '#fff',
backgroundSecondary: '#7d8387',

哥们数字 :

初级: '#DC5648', 中学: '0A242D99', 高等学校: '#46460E33', 负:"#D62719", 阳性:"#A3D9B1", 文本初级 : '# 0A242D', 文本倒数第二: '# 0A242D99', 背景初级 : “ 线性梯度 (# D6F1F2, #F8F6D2) ” , 二次:“#FBF9EF”,

覆盖

覆盖对象由三个主要属性组成:

webFonts: 用于网页字体的字符串 URL 阵列. 注意:如果使用网页字体,仍有必要设置 fontFamily 属性.

styles: CSS 样式对象,在特定主题上具有任何 CSS 覆盖功能. 样式将覆盖现有的主题样式。 媒体查询和孩子选择器可以作为字符串密钥名访问,并在给定选择器内嵌入(参见上例). 构成部分类别 也可以在样式对象内被操纵.

colors: 颜色对象将覆盖下表中的任何颜色属性:

类别和组成部分

一些组件可以通过访问主题对象中的类名来直接修改. 参见以下组件类名称的完整列表.

  var customTheme = {
    style: {
      h1: { fontSize: 36 },
      '.button-primary': {
        // custom styles
      },
    },
  };

可用类

• 纸牌
• 按钮主
• 按钮二级
• 输入文本
• 输入无效
• 输入选择
• 输入标签
• 输入标签无效
• 报价-集装箱
• 字段容器
• 视图容器

获取数据

您可以将任何CRM或分析平台连接到Buddy报价单元中 onUserEvent 钩.

onUserEvent(eventType: string, data: object) ⇒ void

这个 onUserEvent 钩子属性允许您在自定义函数中通过来嵌入您所选择的分析. 仅仅通过一个召回 onUseEvent 选项,并获得以下2个参数:

• 事件类型 : 字符串解析所发射事件的类型( 如 : “ 在ViewChange ” )
• 数据: 含有事件内部数据的对象。 所有数据对象包括时间戳属性.

快速实例

import React from 'react';
import BuddyOfferElement from '@buddy-technology/offer-component';

function App() {
  const handleUserEvent = (payload) => {
    // logs an object with eventType and data to the console
    console.log(payload)
  };

  return (
    <div id="app">
      <h1>My App</h1>
      <BuddyOfferElement
        ion="MY_ION"
        partnerID="my-partner-id"
        viewType="offer-only"
        onUserEvent={handleUserEvent}
        stage="PRODUCTION"
      />
    </div>
  );
}
export default App;

事件类型和数据已发射:

我们捕捉到几个用户驱动的事件,每个事件都有不同的可用的相关数据. 仔细查看下面的列表以确定您想要捕获哪些事件以及如何使用数据.

onOfferElementLoad

当要约元素挂起时触发

返回数据

onOfferElementUpdate

触发当 data 更新“提供元素”的道具

返回数据

onViewChange

用户在相加视图模式下点击新屏幕时触发 .

返回数据

onScrollToView

在单页视图模式下触发或滚动到一节.

返回数据

onQuote

当应用程序显示获取策略引用时触发

返回数据

onCheckout

检查时触发器

返回数据

onFocus

当输入被聚焦时触发

返回数据

onBlur

当输入模糊时触发

返回数据

onRadioSelection

选择无线电按钮时触发

返回数据

onSlide

修改滑动器输入时触发

返回数据

onCheckboxSelection

选中复选框时触发

返回数据

onBlur

当输入模糊时触发

返回数据

onValidationError

当一个输入被触发为无效时触发

返回数据

onExternalLink

当一个输入被触发为无效时触发

返回数据

onOptIn

当用户选择选择“ 只提供报价” 的保险报价时触发

返回数据

Google 分析实例

import React from 'react';
import BuddyOfferElement from '@buddy-technology/offer-component';

function App() {
  /* This is an example of how you could use these events
  your usage may vary depending on your analytics systems */

  const handleUserEvent = (e) => {
    // this block shows a condition looking for checkout and success, 
    // this is a completed purchase using the GA 'purchase' event for conversion
    if (e.eventType == "onCheckout" && e.data.checkoutStatus == "success") {
      gtag("event", "purchase", {
        transaction_id: e.data.orderID,
        value: e.data.premium,
        items: [{
          item_id: "SKU_12345",
          item_name: '${ion}',
          currency: "USD",
          price: e.data.premium,
        }]
      });
    }

    // This block tracks which views are displayed 
    // this is configured to use the built-in GA event 'screen_view'
    if (e.eventType == "onViewChange") {
      gtag('event', 'screen_view', {
        'app_name': 'in-offer-element',
        'screen_name': e.data.viewID
      });
    }
    // This block tracks when quotes are made
    // This is configured to use a custom event and captures a custom dimension
    if (e.eventType == "onQuote") {
      gtag('event', 'quote', {
        'app_name': 'in-offer-element',
        'price': e.data.pricing,
      });
    }
  }
  };

  return (
    <div id="app">
      <h1>My App</h1>
      <BuddyOfferElement
        ion="MY_ION"
        partnerID="my-partner-id"
        viewType="offer-only"
        onUserEvent={handleUserEvent}
        stage="PRODUCTION"
      />
    </div>
  );
}
export default App;