User-centric widgets

The user-centric widgets help end-users place predictions, participate in games, update interests, etc.
These are the widgets that go to your website for users to use.

Prediction widgets Overview

The prediction widgets are a subset of user-centric widgets that allow users to place predictions. They have limited
configuration ability and are intended to be used "as-is".

The widgets have common initialization, also referred to as a "widget loader".

Loading the widgets

The widgets are included in your project just as any other javascript library.

<script src="./assets/fans-widgets-v0.0.4.min.js"></script>

This script expose an object named fansUnitedWidgets that has 4 methods:

LoadFansWidget - This function initializes the functionality and UI for all widgets. Each DIV element in your DOM with an attribute data-widget-id will be treated as a widget.
subscribe - This function allows you to hook to the different actions in the widgets
reloadWidget - This function allows you to reload externally the widgets from a specific match ID
reloadWidgetById - This function allows you to reload externally the widget by using the widget custom ID

LoadFansWidget()

This is the widget loader. You can use it like this:

fansUnitedWidgets.LoadFansWidget({

    // Provide SDK configuration.
    sdkOptions: {
        apiKey: 'your-api-key',
        clientId: 'your-client-id',
        authProvider: {
            getIdToken: () => {
                return '';
            },
            logout: () => {},
        },
    },

    // You can manage different widget attributes globally from here.
    // These options override the defaults. On each individual widget you will be able to override these options.
    // The call-to-action attributes apply for all widgets. They display a button (configured here) on the results page for each widget.ß
    // These are all available options:
    widgetAttributes: {
        'data-language': 'en', // 'en', 'bg' and 'ro' already available. 'en' is default
        'data-theme': 'light', // 'light' and 'dark' available by default. Additional themes can be created. See below
        'data-call-to-action': (data) => /* Do something with data */,
        'data-call-to-action-url': 'https://url-for-the-button',
        'data-call-to-action-disclaimer': 'Bet 10$ win 17$',
        'data-call-to-action-brand-color': 'red',
        'data-call-to-action-text-color': '#fff',
        'data-call-to-action-html': 'some html here'
    },

    // You can override the default labels of the widget and thus translate it into any language.
    // These are all available options:
    labels: {
        'data-label-title-ft': 'Who will win?',
        'data-label-title-ht': 'Who will win at half-time?',
        'data-label-votes': '##VOTES_COUNT## votes so far',
        'data-label-draw': 'Draw'
    },

    // You can customize the appearance of your widgets by overriding individual theme aspects or create a new theme entirely.
    themes: {
        dark: {
            colors: {
                primary: '#FF901A',
                black: '#000000',
                bg: '#0E0E10',
                bg1: '#262626',
                bg2: '#4E4E4E',
                bg3: '#4E4E4E',
                bg4: '#0E0E10',
            },
            fontColors: {
                text1: '#FFFFFF',
                text2: '#FFFFFF',
                text3: '#ffffff',
            },
            fonts: {
                primaryFontFamily: 'Open Sans',
            },
            fontSizes: {
                normal: '11px',
            },
            fontWeights: {
                bold: '700',
                regular: '400',
            },
            spacing: {
                padding: '8px',
            },
        },
    },

    // Insert custom logic for handling actions that require authentication. For instance, show a popup, display a toast notification, etc.
    handleNeedsAuth: (data) => {
        console.log('handleNeedsAuth', data);
    },

    // Insert custom logic for handling the onLoaded event for the widgets.
    onLoaded: () => {
        console.log('loaded');
    },
});

subscribe()

This function allows you to hook to different events in the widgets. You can use it like this for subscribing to all events:

fansUnitedWidgets.subscribe('all', (data) => {
	 //do something with data
});

Subscribing to the "loaded" event:

fansUnitedWidgets.subscribe('loaded', (data) => {
	 //do something with data
});

Subscribing to the "vote" event:

fansUnitedWidgets.subscribe('vote', (data) => {
	 //do something with data
});