@authenticins/widget NPM

Authentic Widget

A plug and play embedded widget for Authentic's Insurance Portal.

Installation

Add the following script tag to the <head> of your index.html file.

<script type="module" src="https://www.unpkg.com/@authenticins/widget@latest/dist/authenticWidget.js"></script>

Usage

Once installed, the widget script will expose controls to the browser window. You can configure the widget's look and behavior on initialization (see the full WidgetConfig definition below).

<script>
  window.addEventListener("load", () => {
    window.authenticWidget.init({
      insurancePortal: { url: "https://example-tenant-name.prod.authenticinsurance.com" },
      prefillData: {
        lead: { email: "johndoe@email.com" }
      },
      themeOverrides: {
        primaryColor: "#000000",
        borderRadiusPx: 6,
        brand: {
          name: "Example Brand Name",
          logoUrls: {
            darkBg: "https://example-tenant-website.com/logo-white.png",
            lightBg: "https://example-tenant-website.com/logo-black.png"
          },
          faviconUrl: "https://example-tenant-website.com/favicon.ico"
        }
      }
    });
  });
</script>

Configuration

interface WidgetConfig {
  insurancePortal?: {
    url?: string;
    // The CSS selector for the target element you want the Insurance Portal injected into.
    // If no target selector is provided, the widget will inject its default persistent banner and modal.
    targetSelector?: string;
  };
  customerId?: string;
  prefillData?: {
    lead?: {
      email?: string;
      businessClassCode?: string;
      stateCodes?: string[];
      productIds?: string[];
    };
    responses?: {
      exposures?: Array<{
        exposureName: string;
        // Where each key is a field's name mapped to its value (e.g. ['BUSINESS_LEGAL_NAME']: 'Example Business Name');
        fieldValues: Record<string, string>;
      }>;
      // Same as format described above.
      questions?: Record<string, string>;
    };
  };
  themeOverrides?: {
    useDarkMode?: boolean;
    primaryColor?: string;
    secondaryColor?: string;
    borderRadiusPx?: number;
    brand?: {
      name?: string;
      logoUrls?: {
        darkBg?: string;
        lightBg?: string;
      };
      faviconUrl?: string;
    };
  };
}

@everything-registry/sub-chunk-97

7 months ago

12 months ago

6 months ago

6 months ago

12 months ago