Our award-winning UI is fully customisable for operators and gives end-users the ability to build accumulators made up of related selections within a single event.

Market Depth

Trillions of combinations are possible across thousands of selections within hundreds of different market types. BetBuilder is an established industry leader and has been used to create millions of bets, worldwide.

https://canonical-origin-betuilder-host-uat.sportcastlive.com/

This example site shows an end-to-end example of the Widget UI embedded in a bookmaker page. The blue section at the top represents the Bookmaker web site and bet slip. The white section is the Widget UI siting within its iFrame.

See the site.js file for an example of a listener that bubbles up the feedback message described in point 6) of the UI Workflow

const monthNames = ["jan", "feb", "mar", "apr", "may", "jun",
    "jul", "aug", "sep", "oct", "nov", "dec"
];
const childWindow = document.getElementById('widgethost').contentWindow;
window.addEventListener('message', message => {
    if (message.source === childWindow) {
        var msg = JSON.parse(message.data);
        console.log("===================");
        console.log("THE IFRAME SAYS:");
        console.log(msg);
        console.log("===================");
        console.log(slipEp);
        var fiveMintuesAgo = new Date(Date.now() - 5000 * 60);
        var month = monthNames[fiveMintuesAgo.getUTCMonth()];
        var day = fiveMintuesAgo.getUTCDate();
        var year = fiveMintuesAgo.getUTCFullYear();
        var hours = fiveMintuesAgo.getUTCHours();
        var minutes = fiveMintuesAgo.getUTCMinutes();
        var ampm = hours >= 12 ? "pm" : "am";
        var fromDate = '&fromDate=' + day.toString() + '-' + month + '-' + year.toString() + ' ' + hours + ':' + minutes + ampm;
        var take = '&take=1000';
        console.log(slipEp + fromDate + take);
        //get the data from the url
        var fullUrlForSlip = slipEp + fromDate + take;

        let xhr = new XMLHttpRequest();
        xhr.open('GET', fullUrlForSlip);

        xhr.send();

        xhr.onload = function () {
            if (xhr.status !== 200) {
                console.log(`Error ${xhr.status}: ${xhr.statusText}`); 
            } else { 
                console.log(`Done, got ${xhr.response.length} bytes`);
                
                var slips = JSON.parse(xhr.responseText);
                console.log(slips.PayLoad);
                var slip = slips.PayLoad.find(function (slp) {
                    return slp.betslipUid === message.betslipUid;
                });
                console.log(slip);
                document.getElementById("fixture").innerText = slip.Match;
                document.getElementById("legs").innerText = slip.Description;
                document.getElementById("legs").title = slip.Description;
                document.getElementById("odds").innerText = slip.Odds;
                document.getElementById("placebet").disabled = false;
            }
        };

        xhr.onprogress = function (event) {
            if (event.lengthComputable) {
                console.log(`Received ${event.loaded} of ${event.total} bytes`);
            } else {
                console.log(`Received ${event.loaded} bytes`); // no Content-Length
            }

        };

        xhr.onerror = function () {
            console.log("Request failed");
        };
        
        return; 
    }
});

function clearform() {
    document.getElementById('fixture').innerText = '';
    document.getElementById('legs').innerText = '';
    document.getElementById('odds').innerText = '';
    document.getElementById("placebet").disabled = true;
    document.getElementById('stake').value = null;
}

function placebet() {
    var fixture = document.getElementById('fixture').innerText;
    var legs = document.getElementById('legs').innerText;
    var odds = parseFloat(document.getElementById('odds').innerText);
    var stake = parseFloat(document.getElementById('stake').value);
    if (!stake) {
        alert("Please add your stake");
        return;
    }
    var betreturns = parseFloat(parseFloat(document.getElementById('stake').value) * parseFloat(odds)).toFixed(2);
    var messagebox = 'You placed the following bet. \n' +
        fixture + '\n' +
        legs + '\n' +
        'with odds of ' + odds + '\n' +
        'You stand to win $' + betreturns;
    alert(messagebox);
    clearform();
}java

This section describes the steps required and options for integration of the BetBuilder Widget UI.

Main Component of the Workflow

Bookmaker Web Page

Operator web site that hosts the BetBuilder Widget.

BetBuilder Widget

The BetBuilder Widget UI which is present via an iFrame and hosted on Sportcast servers.

Bookmaker BetSlip

Customer controlled BetSlip that will display the market/bet created by the BetBuilder Widget and allow the end user to set stake and place the bet.

BetBuilder Engine

BetBuilder Pricing Engine and API which is the main Sportcast hosted server-side component.

Bookmaker Back-end

This represents that bookmaker platform or back-end where markets are created, and bets are processed.

Messaging and Communication Between Components

1. Widget load and initialization

BetBuilder Widget initialization and load is controlled via URL parameters:

· Key: Operator access key.

· FixtureId or ConsumerFixtureId: If the FixtureId property is specified then the Sportcast fixtureId is used to load that appropriate fixture. Alternatively, an operator can map their own fixtureId, called the ConsumerFixtureId.

· Culture: Controls the language translation that is applied. Example “es-ES” for Spanish.

· Brand: An operator can have different style sheets which are loaded based on the Brand parameter.

· Region: An operator can specify different regions which allows BetBuilder to display different market sets.

Example: https://betbuildergbgen2-uat.sportcastlive.com/?key=xxx&fixtureid=107675&brand=xxx&region=xxx

2. BetSlip saved

Once a user has built a bet using the BetBuilder Widget and confirmed it by pressing the “Add to BetSlip” button, a message containing the slip details is sent to the BetBuilder Engine. This step requires no operator configuration.

3. Bet Response message: Bet details passed to bookmaker back-end

Typically, the customer provides a secured HTTPS end point where the BetBuilder Engine pushes a response to the bet placement. Example JSON:

The properties of this message are:

· BetSlipUid: Unique identifier of the BetSlip send in the Bet Response message.

· MarketId: Bookmaker platform Id of the market created. (Optional)

· HttpCode: Code of any error to occur. (Optional)

· ErrorMessage: Description of any error. (Optional)

· Identifier: The unique identifier hash string of the BetSlip from the Bet Response message.

· ConsumerFIxtureId: The fixtureId of the BetSlip.

· TimeStamp: DateTime the message was sent.

· BetBuilderData: Details of the bet selections made and price values that are returned.

End Point: https://clusteruat.sportcastlive.com/public/betfeedback

4A. Bookmaker BetSlip population (Optional)

The bookmaker platform/back-end will typically persist the market and bet that is received in point 3. At this time, one possible workflow is for the bookmaker platform to pass this information onto the bookmaker BetSlip. (This task can also be performed using client-side messaging).

4B. Bet Feedback message: Bookmaker passes bet receipt back to BetBuilder

The bookmaker platform must inform the BetBuilder Engine that the Bet Response message has been received and processed. Without this step, the bettor will receive an error message saying their betslip could not be saved. The fields that are passed back here can be customised to meet bookmaker requirements. Example JSON:

4C. Bet Confirmation message: Bookmaker passes bet placement details back to BetBuilder

After a customer places a bet in the bookmaker system, the bookmaker platform can send details of this confirmed bet back to the BetBuilder Engine. This can help the Sportcast trading team assist with risk management. Example JSON:

Endpoint: https://clusteruat.sportcastlive.com/public/betconfirmation

5. BetBuilder Engine passes the BetBuilder Widget the Bet Feedback message received in point 4B

This allows the BetBuilder Widget to react to a bet successfully progressing to the bookmaker BetSlip. The information in the Bet Feedback message can be bubbled up to the bookmaker website.

6. BetBuilder Widget bubbles up message to host website (Optional)

The BetBuilder widget bubbles up a message through the bookmakers hosting iFrame after having received the Bet Feedback confirmation relayed via the BetBuilder Engine. Typically, this message presents the same fields that are returned from the bookmaker platform in 4B. This option presents a client-side mechanism for updating the bookmaker BetSlip. Example JSON:

A pre-built user interface that is embedded on the client site via an iFrame.

The advantage of this approach is that the operator is not required to conduct any UI development, as the widget delivers a fully functional and responsive interface ‘out of the box’. The Sportcast widget supports mobile, desktop, tablet, and terminal interfaces.

The interface can be customised to include operator branding, colours, fonts, spacing and graphic icons. Market placement/grouping/availability can also be customised further.

Sportcast allows operators to deep-link directly to the widget to load a specific fixture from the operator’s fixture page.

Through accessing elements of our API framework, operators are provided the flexibility to generate flags within their existing interface beside BetBuilder-enabled fixtures, or to create their own BetBuilder fixture menu.

Widget Integration Workflow

A widget integration facilitates bet creation within the operator’s sportsbook, such that BetBuilder bets can be handled in keeping with other sportsbook bets by the end user.

After a punter creates a BetBuilder bet through the UI and selects ‘Add to BetSlip’, the bet details are passed through to the operator back-end system. Where the bet is a new selection/combination, this market is created within the system (either as a market or a selection depending on the system in question). From here, the operator’s systems will return a message to the BetBuilder widget with the identifier of the newly created selection. This message is subsequently passed on from the widget to the operator’s BetSlip for the stake to be entered and the bet to be placed.

All markets are settled via the back end, and settlement messaging can be provided at a per-leg level for display purposes on the customer account/bet screens.