Embedding options

container (option is used only in static widget)

HTMLElement that widget gets attached to

clientId

Your identifier which is assigned by STATSCORE. If you don't know what value you should pass ask us and we will provide you with one.

lang

Language of the widget. Currently supported languages:

• en
• pl

tokenCallback

Callback which should query your api for JWT token and return promise with appriopriate status. You can find details on how to generate the token in Users authentication page.

async function tokenCallback() {
    // Response from your api. In real scenario you would fetch result from your API
    const response = { status: 'error' };

    if (response.status === 'eligible') {
        // Your backend responded with JWT token, user 
        // is eligible to play
        return { status: 'eligible', token: response.token };
    } else if (response.status === 'notEligible') {
        // Your backend decided that currently logged 
        // in user is not eligible to play. We will display
        // message that is configurable by you in the backoffice
        return { status: 'notEligible' };
    } else if (response.status === 'notLoggedIn') {
        // User is not logged in on your website. We will
        // display appriopriate message with login button.
        // Clicking this button triggers loginCallback 
        // function that is one of the options passed by you.
        return { status: 'notLoggedIn' };
    } else {
        // In case of error we will display appriopriate message
        // on the widget.
        return { status: 'error' };
    }
}

loginCallback

Callback that gets triggered when user is not logged in on your page and clicks on login button in PointsInPlay widget. To handle this scenario you can for example open popup with login form on your website or redirect user to your login page.

function loginCallback() {
    // Open login popup or redirect to login page
}

plugins (optional)

Array of plugins. If given functionality requires attaching plugin it will be mentioned and explained how to attach it in its documentation.

view (optional)

Set if widget toggler should be wide or narrow.

Possible values:

• wide
• narrow

colors (optional)

Set widget colors so they match your page.

Each color in the object is optional and if given color is not provided our default value will be used instead.

Brightness mode

Brightness of background color determines if widget should compute colors using dark or light mode algorithm. This algorithm determines how colors are shaded - final color schema will be different for each algorithm.

Dark color scheme example (default):

colors: {
    background: '#0D0D0D';
    backgroundFont: '#FCFCFD';
    primary: '#6200E5';
    primaryFont: '#FFFFFF';
    highlight: '#00FFA5';
    won: '#3CCF17';
    lost: '#FF3B3B';
}

Light scheme example:

colors: {
    background: '#FFFFFF';
    backgroundFont: '#640DA3';
    primary: '#6200E5';
    primaryFont: '#FFFFFF';
    highlight: '#AD2690';
    won: '#5C7D10';
    lost: '#C91C1C';
}

contentPositioning (optional) (available only for static widget)

Set positioning of widget content. Can be either static or absolute.

Possible options:

• static
• absolute

padding (optional) (available only for floating widget)

Sets given x and y px padding for floating widget

padding: {
    x: 20,
    y: 20
}

zIndex (optional)

Sets given zIndex for widget

side (optional)

For static widget

• Decides from which side of the toggler content originates from
  • for bottomLeft content originates from top left side of the toggler
  • for bottomRight content originates from top right side of the toggler
  • for topLeft content originates from bottom left side of the toggler
  • for topRight content originates from bottom right side of the toggler

For floating widget

• Sets on which side of the screen toggler is placed
• Decides from which side of the toggler content originates from
  • for bottomLeft content originates from top left side of the toggler
  • for bottomRight content originates from top right side of the toggler
  • for topLeft content originates from bottom left side of the toggler
  • for topRight content originates from bottom right side of the toggler
• Padding is calculated from given side (you can set padding via paddingX and paddingY options or by setPadding method)