Embedded Insurance® Embedded Component

A specialized React-based component for seamlessly integrating personalized insurance offerings into your own customer flows. The component dynamically renders content provided by your backend API (which should fetch dynamic data from Embedded Insurance® APIs) to present user and status-specific content and actions to your customer.

Installation

npm install @ei-tech/embedded-component

or

yarn add @ei-tech/embedded-component

Usage

Intended Flow

1. Component is rendered first time into the render tree with getContent and getUrl functions provided
2. Component executes getContent, which calls a corresponding backend API route of yours, which in turn fetches from the Embedded Insurance API at /auto/v1/leads/${leadId}/embedded-content. Your backend API simply passes that result through and it may sometimes include an instruction to continuePolling: true
3. Component renders the content instructions (which may be layout: 'none' to render nothing). Some of the layouts include a Call To Action (cta) button.
4. If the component is told to continuePolling by the latest content fetch and has not exceeded its limits, it schedules another getContent after pollingInterval ms.
5. When the customer clicks a Call To Action button, the Component executes getUrl, which calls another of your backend API routes, which in turn fetches a one-time login link URL from /auto/v1/leads/${leadId}/get-link.
6. The component opens a new tab with that URL
7. The customer can now see and interact with their insurance quote in the newly-opened tab

Basic Example

Here's an example demonstrating the use of the EmbeddedInsurance component:

import { EmbeddedInsurance, Content } from '@ei-tech/embedded-component'

const getUrl = async (leadId: string): Promise<string> => {
  const res = await fetch(`/api/get-auto-microsite-link/${leadId}`)
  if (!res.ok) throw new Error('Failed to get auto microsite link')
  return res.json()
}

const getContent = async (leadId: string): Promise<Content> => {
  const res = await fetch(`/api/get-embedded-content/${leadId}`)
  if (!res.ok) throw new Error('Failed to get content')
  return res.json()
}

export default function MyComponent({ leadId }: { leadId: string }) {
  return (
    <EmbeddedInsurance
      leadId={leadId}
      getUrl={getUrl}
      getContent={getContent}
      theme="dark"
    />
  )
}

API Reference

EmbeddedInsurance Props

| Prop | Type | Description | | -------------------- | -------------------------------------- | -------------------------------------------------------------------------------------------------- | | leadId | string | Unique identifier for the user's session or transaction. | | theme | 'dark' \| 'light' | Visual theme of the component. Defaults to 'dark'. | | getUrl | (leadId: string) => Promise<string> | Async function to fetch the URL for CTA buttons. | | getContent | (leadId: string) => Promise<Content> | Async function fetching content/layout instructions from your backend CMS. | | pollingInterval | number | Interval (ms) for polling backend content updates. Defaults to 5000. | | maxPollingAttempts | number | Maximum times getContent will be called when continuePolling is set to true. Defaults to 50. |

Content Type Definitions

The Content type returned from your backend API determines the displayed layout and content. These match exactly what is supplied by the Embedded Insurance /auto/v1/leads/${leadId}/embedded-content API so they can be passed through from the backend servicing your web page. Here are detailed definitions:

• content: A basic textual display.

  • Fields: mainHeading, subHeading, footerText, continuePolling

• content-cta: Text with a call-to-action button.

  • Fields: mainHeading, subHeading, footerText, buttonText, ctaHeadline (optional), buttonAriaLabel (optional), buttonDisabled (optional), buttonLoading (optional), continuePolling

• image-content: Text content paired with an image.

  • Fields: mainHeading, subHeading, footerText, imageUrl, imageAlt, continuePolling

• image-content-cta: Image, text, and a call-to-action button.

  • Fields: Combines all fields from image-content and content-cta

• none: Component displays nothing.

  • Fields: continuePolling (optional)

Example API Response

{
  "layout": "image-content-cta",
  "mainHeading": "Your Quote is Ready!",
  "subHeading": "Click to view your personalized insurance details.",
  "buttonText": "View Now",
  "imageUrl": "https://example.com/insurance-quote.svg",
  "imageAlt": "Insurance Quote",
  "footerText": "Insurance by Embedded Insurance Agency, LLC.",
  "continuePolling": false
}

Polling Behavior

The component automatically polls the backend at intervals (pollingInterval) while continuePolling is true. Polling stops once continuePolling becomes false or is omitted from the response, or maxPollingAttempts is reached.

Customization

Adjust the visual theme (dark or light) directly via the theme prop. Further styling can be customized via CSS by targeting provided component classes.

Error Handling

The component will wrap calls to getContent and getUrl with a try/catch. In the event of an error, it will display standard error content. The component will try again (up to maxPollingAttempts) 2.5 minutes after an error is caught.

License

MIT License © Embedded Insurance®