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:

• bg Bulgarian
• zh-CN Chinese (Simplified)
• zh Chinese (Traditional)
• en English
• fr French
• hi Hindi
• id Indonesian
• jp Japanese
• ko Korean
• pl Polish
• br Portuguese (Brazil)
• pt Portuguese (Portugal)
• es Spanish
• th Thai
• vi Vietnamese

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
}

pushNotifications (optional)

Setup push notifications. See Push notifications chapter for more details.

pushNotifications: {
    enabled: true,
}

guestMode (optional)

Whether guest mode should be enabled. Enabling this option will allow your users to play without logging in. Playing as guest doesn't save your results.

WARNING

Keep in mind that if user is not logged in you need to return notLoggedIn status from tokenCallback for user to be able to go through the view with option to play as guest.

guestMode: {
    enabled: true,
    anonymous: false,
}

With anonymous mode disabled user can still log in and every now and then we prompt him to do so. If you enable anonymous mode login will be completely disabled and rankings feature will be also disabled.

TIP

With anonymous mode you do not need to pass tokenCallback and loginCallback.

WARNING

Anonymous mode should not be mixed with default mode on one domain.

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

When view is narrow, you can also configure entryAnimationDuration and onQuestionAnimationDuration.

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';
    card: '#FCFCFD';
    primary: '#6200E5';
    primaryFont: '#FFFFFF';
    highlight: '#00FFA5';
    won: '#3CCF17';
    lost: '#FF3B3B';
}

Light scheme example:

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

fontFamily (optional)

Set the widget's font family. Provide a valid CSS font-family value. If the specified font is available on your site, the widget will use it; otherwise it falls back to our default font.

Notes:

• Ensure the font is loaded on your page (for example via a <link> to or an @font-face declaration).
• Ensure that the font is loaded with the exact weights 300, 400, 500, and 700 as used by the widget, to avoid faux bold or italic rendering.
• If the font renders correctly on your website, passing the same family name to fontFamily will make the widget render it as well.
• You can pass a full font stack to include fallbacks.
• If not provided or the font isn't available, the widget falls back to Space Grotesk → system-ui.

Examples:

// Single family
fontFamily: 'IBM Plex Sans'

// Family with fallback
fontFamily: "'Inter', Arial, sans-serif"

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
}

entryAnimationDuration (optional) (applies only when view is narrow)

Controls how long the narrow toggler stays fully expanded after the entry animation.

The value is the visibility hold time in seconds, not the duration of the expand or collapse animation. Expand and collapse use fixed timings; only the hold between them is configurable.

• Default: 2.8
• Must be >= 0
• Ignored when view is wide

entryAnimationDuration: 2.8,

onQuestionAnimationDuration (optional) (applies only when view is narrow)

Controls how long the notification box stays fully visible when a challenge starts or a new live question arrives.

This does not apply to the entry animation on widget load — that is controlled by entryAnimationDuration.

The value is the visibility hold time in seconds, not the duration of the slide-in or slide-out animation. Slide-in and slide-out use fixed timings; only the hold between them is configurable.

• Default: 4.2
• Must be >= 0
• Ignored when view is wide

onQuestionAnimationDuration: 4.2,

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)