Bets integration

To boost user engagement and convert it to real money you can integrate bets into PointsInPlay. This integration covers both presenting bets and user interaction with them (for example you can add it to bet slip after user selects given bet).

Bet suggestions are displayed for given question in challenge and each question have assigned market that makes sense to it.

Before you start

Before you start we recommend adding our types to your project. You can also use them as reference when in doubt.

Adding the plugin

To be able to pass your bets into PointsInPlay matches you need to use BetsPlugin and pass it when embedding the widget:

PointsInPlay.onceLoad(({ embedder, createBetsPlugin }) => { 
    const betsPlugin = createBetsPlugin(); 
    const widget = embedder.createStaticWidget({ 
        container: document.querySelector('#points-in-play-widget'),
        clientId: 1,
        locale: 'en',
        tokenCallback() {
            // ...
        },
        loginCallback() {
            // ...
        },
        plugins: [betsPlugin], 
    }); 
});

Matches list

Before you attach any bets, the first thing you need to have is a list of current PointsInPlay matches.

TIP

List of matches gets initialized and updated after user authenticates on the widget (user needs to toggle the widget and successfully authenticate).

Being informed about match being added

To know when match is added to the list you can attach listener to onMatchesAttached event:

betsPlugin.onMatchesAttached(({ matches }) => {
    for (const match of matches) {
        // Here you can attach bets for given match
    }
});

Array of matches contains only matches that were added at given moment.

To detach given listener use offMatchesAttached method:

betsPlugin.offMatchesAttached(listener);

Being informed about match being removed

To know when match is removed from the list you can attach listener to onMatchesDetached event:

betsPlugin.onMatchesDetached(({ matches }) => {
    for (const match of matches) {
        // Here you clean up after match gets removed (or widget gets destroyed) to avoid any memory leaks
    }
});

Array of matches contains only matches that were removed at given moment.

To detach given listener use offMatchesDetached method:

betsPlugin.offMatchesDetached(listener);

Iterating through list of currently attached matches

To iterate through list of current matches you can use forEachAttachedMatch method:

betsPlugin.forEachAttachedMatch((match) => {
    // Here you can update markets/bets/odds for given match
});

Checking statscore identifier of match

To check statscore identifier of given match use getStatscoreEventId method:

const eventId = match.getStatscoreEventId();

Checking your identifier of match

If you use match mapping (pairing) you can get your match identifiers by using getClientEventMappings method:

const eventsMappings = match.getClientEventMappings();

This method returns array of objects which contain match identifiers of each mapping provider you use.

TIP

In scenario where mappings for match are added or changed during its lifetime, given match will be detached and attached again (with updated mappings).

Adding markets and bets to match

To add/update markets and bets for given match use setMarkets method:

match.setMarkets([
    {
        id: "12786",
        type: "live",
        code: "1x2",
        name: "Match winner",
        view: "tiles",
        bets: [
            {
                id: "54236",
                name: "1", 
                odds: "1.89",
                isActive: false
            },
            {
                id: "2342",
                name: "X",
                odds: "2.3",
                isActive: true
            },
            {
                id: "6592",
                name: "2",
                odds: "2.75",
                isActive: false
            }
        ]
    }
]);

Market

id Your identifier of market

type "live" or "prematch"

code Our market code - list of supported market codes is available on bottom of this section. Each question that we ask has its own market assigned so that suggested bet makes sense for given question.

WARNING

For given match, code must be unique per market type (prematch/live).

name Name of market that is displayed above bets in widget. You can pass whatever name that suits your needs.

view "tiles" or "list". We suggest using "list" if your market has more than 3 bets.

Bet

id Your unique identifier of bet.

Ensure that

id of bet is unique between all matches and markets so both we and you can differentiate them from one another.

name Display name of given bet. You can pass whatever name that suits your needs.

odds Odds of given bet. Must have either of formats: "1.23", "7/2", "-300", "+540".

isActive Whether given bet is active. Active bets are highlighted - you can set them as active when for example someone has them added in your betslip.

Clearing markets

To remove markets you can either use clearMarkets method or pass [] to setMarkets method:

match.clearMarkets();

or

match.setMarkets([]);

Handling user bet clicks

You can listen to bet clicks by attaching listener to onBetClick event:

betsPlugin.onBetClick(({ bet, market, match }) => {
    // Handle bet click
    // You can for example add given bet to bet slip
});

To detach given listener use offBetClick method:

betsPlugin.offBetClick(listener);

Market codes

Prematch

1x2

1x2Halftime

DoubleChance

UnderOverGoals

UnderOverCorners

UnderOverCards

FirstTeamToScore

PlayerToScore

BothTeamsToScore

HomeUnderOverGoals

AwayUnderOverGoals

Live

1x2

DoubleChance

UnderOverGoals

UnderOverCorners

UnderOverCards

UnderOverOffsides

FirstTeamToScore

PlayerToScore

BothTeamsToScore

NextGoal