@authenticins/widget

Authentic Widget

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

Installation

npm install @authenticins/widget

Or

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

Usage

authenticWidget.init();

Configuration

When calling the init() method, you can optionally pass a configuration object to customize the look and behavior of the widget. You can also application pre-fill data on behalf of your end user (see the full WidgetConfig interface definition below).

authenticWidget.init({
  insurancePortal: {
    url: 'https://tenant-name.prod.authenticinsurance.com',
    targetSelector: '#authentic-insurance-portal'
  },
  prefillData: {
    meta: {
      email: '[e-mail]',
      stateCodes: ['OH']
    }
  },
  themeOverrides: {
    primaryColor: '#000000',
    borderRadius: 6,
    brand: {
      name: 'Example Tenant Name',
      logoUrls: {
        light: 'https://example-tenant-website.com/logo-white.png',
        dark: 'https://example-tenant-website.com/logo.png',
      },
      faviconUrl: 'https://example-tenant-website.com/favicon.ico'
    }
  }
});

interface WidgetConfig {
  insurancePortal?: {
    url?: string;
    // The CSS selector for the element you want the Insurance Portal injected into.
    targetSelector?: string;
    funnelFlow?: 'lead-form' | 'welcome';
  }
  prefillData?: {
    meta?: {
      email?: string;
      businessClassCode?: string;
      stateCodes?: string[];
      productIds?: string[];
    }
    answers?: {
      // Where each key is a field's name, mapped to its value (e.g. { 'BUSINESS_LEGAL_NAME': 'Example Business' });
      questions?: Record<string, string>;
      exposures?: Array<{
        id: string;
        exposureName: string;
        // Same format as described above.
        fieldValues: Record<string, string>;
      }>;
    }
  }
  themeOverrides?: {
    useDarkMode?: boolean,
    primaryColor?: string;
    borderRadius?: number;
    brand?: {
      name?: string;
      logoUrls?: {
        light?: string;
        dark?: string;
      }
      faviconUrl?: string;
    }
    layout?: {
      hideNavbar?: boolean;
      hideFooter?: boolean;
    };
  }
}

Reactive usage

If using a framework such as React, utilize the init and destroy methods between renders.

function App({ prefillData }) {
  useEffect(() => {
    authenticWidget.init({ prefillData });
    return () => { authenticWidget.destroy(); }
  }, [prefillData]);
}