@authenticins/widget v3.0.7
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: 'user@email.com',
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]);
}
24 days ago
26 days ago
25 days ago
26 days ago
2 months ago
2 months ago
2 months ago
2 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago