AuthenticContact

Embed our widget

How to embed the plug and play embedded widget for Authentic Insurance partners.

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>

To view the source code go here: https://www.npmjs.com/package/@authenticins/widget?activeTab=readme

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 Tenant 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<{
        id: number;
        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;
    };
  };
};
PreviousAdd Insurance to Your PlatformNextDifferent endpoints & functionality within our widget

Last updated