# Live Example

<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.

![](https://2837866369-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDF4oq4sQ5SYrGHkgCxd9%2Fuploads%2Fgit-blob-123836a9e5e910974321b4f990be56fc9de1cbdb%2Fimage%20\(28\).png?alt=media)

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

```javascript
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
```