Lead Management Widget

Welcome to Fans United Lead Management Widget. The widget allows staff members with sufficient permissions to fetch statistics and export leads. You can use this widget as it is and embed it in your platform, or you can use the Management Panel to create games. Leads is a collection of user data provided from users when engaging with Fans United entities. With successful installation, you can see statistics and export leads data to a csv file.

Installation and usage

The easiest way to use fansunited-widget-lead is to install it from npm as follows:

npm  install  fansunited-widget-lead

or:

yarn  add  fansunited-widget-lead

Here is an example how you can integrate Fans United Top X Management Widget:

import { LeadManager } from  'fansunited-widget-lead';

const  App = () => {
return (
<LeadManager
	fansUnitedApiKey={'your-api-key'}
	fansUnitedClientId={'your-client-id'} />
);
}

Notes

• The widget is bundled as a React component and its usage is as simple as the above example

• Don't worry about your project's CSS. The widget's styling is done with Joy UI which is based on headless unstyle react components. This means that the widget's CSS will NOT affect yours.

• Easy translation in every language. For more information check our Translation heading.

Props

type  LeadManagerProps = {
	fansUnitedApiKey: string;
	fansUnitedClientId: string;
	fansUnitedLanguage?: string;
	fansUnitedEnvironment?: string;
	labels?: LabelsModel;
	hideSignOutButton?: boolean;
};

Fans United Lead Management Widget depends on Fans United JS SDK and Fans United Profile API. Thats why fansUnitedApiKey and fansUnitedClientId are required. They will be provided to you from Fans United team. For other optional props here is some information:

• fansUnitedLanguage - for our sports APIs FansUnited platform supports different languages. For now they are Bulgarian (bg), English (en), Romanian (ro), Greek (el), Slovak (sk), Serbian (sr) and Hungarian (hu). If no value given it will be set to English (en).

• fansUnitedEnvironment - You can run the widget in the following environments: staging, prod, watg and yolo. If no value given it will be set to production (prod).

• labels - you can easily translate all labels, UI messages, descriptions, placeholders and etc. with this prop. By default, Fans United Match Quiz Management Widget is available in English so if no value is given, the widget will be translated in English.

• hideSignOutButton - The prop is used to hide the sign out button which is positioned on the top right corner on the main screen of the widget.

Translation

You can easily translate Fans United Top X Management Widget in your language! You just need to pass an object to labels prop with concrete keys and values and that's it! Here's an example how you can do it:

import { LeadManager } from  'fansunited-widget-lead';

const labels = {
    userNotFound: 'User not found. Please try again.',
    signOut: 'Sign out',
    contentId: 'Content ID',
    contentType: 'Content Type',
    campaignId: 'Campaign ID',
    fromDate: 'From Date',
    toDate: 'To Date',
    filter: 'Filter',
    filters: 'Filters',
    applied: 'Applied',
    noLeadsAvailable: 'No leads available',
    leadAvailable: 'Lead available',
    leadsAvailable: 'Leads available',
    from: 'From',
    to: 'To',
    exportLeads: 'Export Leads',
    exportLeadsDescription: 'All leads for provided filters will be download as CSV file',
    applyFilters: 'Apply Filters',
    leadsCountErrorMessage: 'There was a problem with fetching leads count. Please try again',
    exportLeadsErrorMessage: 'There was a problem with exporting leads. Please try again',
};

const  App = () => {
return (
<LeadManager
	fansUnitedApiKey={'your-api-key'}
	fansUnitedClientId={'your-client-id'}
	labels={labels}/>
);
}

Here is all information about LabelsModel:

| Key | Description | Default Value | | :-------------: |:-------------:| :-----:| | userNotFound | On login screen when client gives invalid information about email or password. | User not found. Please try again. | | signOut | Used as label on sign out button. | Sign out | | contentId | Label for content ID filter input. | Content ID | | contentType | Label for content type filter input. | Content Type | | campaignId | Label for campaign ID filter input. | Campaign ID | | fromDate | Label for from date filter input. | From Date | | toDate | Label for to date filter input. | To Date | | filter | Label for chip when only 1 filter is applied (singular). | Filter | | filters | Label for chip when more than 1 filter is applied (plural). | Filters | | applied | Label for chip filters applied. | Applied | | noLeadsAvailable | Label when no leads are available | No leads available | | leadAvailable | Label when only 1 lead is available (singular). | Lead available | | leadsAvailable | Label when only 1 lead is available (plural). | Leads available | | from | Label for chip provided filter range. | From | | to | Label for chip provided filter range. | To | | exportLeads | Label for export leads button. | Export Leads | | exportLeadsDescription | Label for export leads description. | All leads for provided filters will be download as CSV file | | applyFilters | Label for apply filters button. | Apply Filters | | leadsCountErrorMessage | Toast error message when fetching leads count fails. | There was a problem with fetching leads count. Please try again | | exportLeadsErrorMessage | Toast error message when exporting leads fails. | There was a problem with exporting leads. Please try again |