Widgets Tech Docs
How to run a widget?
Broadage widget needs a initializer and a widget body and a Html DOM element to work.
To use React wrapper please refer to this link 
Html DOM element what it is?
In the HTML DOM, the Element object represents an HTML element, like P, DIV, A, TABLE, SECTION or any other HTML element. see for details
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
(function(b, s, p, o, r, t) {
b['broadage'] = b['broadage'] || [];
if (!b['broadage'].length) {
r = document.createElement(s);
t = document.getElementsByTagName(s)[0];
r.async = true;
r.src = p;
t.parentNode.insertBefore(r, t);
}
b['broadage'].push({ 'bundleId': o.bundleId, 'widgets': o.widgets, 'accountId': o.accountId });
})(window, 'script', '//cdn-saas.broadage.com/widgets/loader/loader.js', {
'bundleId': ['soccer-fx'], // Soccer Fixture bundle id
'accountId': '0000-0000-0000-0000',
'widgets': {
'soccerFixture': [{ // Widget Type = Soccer Fixture
'element': 'SOCCER-FIXTURE', // DOM ELEMENT ID
'tournamentId': 1,
'options': {
'lang': window.navigator.language // Set to browser language (Default: "en-US")
}
}]
}
});
</script>
<div id="SOCCER-FIXTURE"><!-- Soccer Fixture to be binding here --></div>
</body>
</html>
Widget Initializer
The component that downloads the assets required for the operation of the widget.
<script>
(function(b, s, p, o, r, t) {
b['broadage'] = b['broadage'] || [];
if (!b['broadage'].length) {
r = document.createElement(s);
t = document.getElementsByTagName(s)[0];
r.async = true;
r.src = p;
t.parentNode.insertBefore(r, t);
}
b['broadage'].push({ 'bundleId': o.bundleId, 'widgets': o.widgets, 'accountId': o.accountId });
})(window, 'script', '//cdn-saas.broadage.com/widgets/loader/loader.js', { /* WIDGET BODY */ });
</script>
Widget Body
In the widget body we define which widgets will work. Widget body consists of three basic required fields.
1) bundleId: Defines which widget packages can be downloaded from the CDN. Data Type:String Array
2) accountId: Is the ID number assigned to you by Broadage. Data Type:String
3) widgets: Main container of widgets. Data Type:Object
<script>
var WIDGET_BODY = {
'bundleId': ['soccer-fx'], // Widget Bundle ID
'accountId': '0000-0000-0000-0000', // Your Account ID
'widgets': { // Widgets Container
'soccerFixture': [ // Widget Type
{ 'element': 'DOM_element_id', 'tournamentId': 1 } // Widget Instance
]
}
};
/* Widget Initializer */
(function(b, s, p, o, r, t) {
b['broadage'] = b['broadage'] || [];
if (!b['broadage'].length) {
r = document.createElement(s);
t = document.getElementsByTagName(s)[0];
r.async = true;
r.src = p;
t.parentNode.insertBefore(r, t);
}
b['broadage'].push({ 'bundleId': o.bundleId, 'widgets': o.widgets, 'accountId': o.accountId });
})(window, 'script', '//cdn-saas.broadage.com/widgets/loader/loader.js', WIDGET_BODY);
</script>
Action Callback (optional)
This callback function is triggered by user changed filters, score change etc. Only works on certain widgets.
<script>
/* Widget Body */
var WIDGET_BODY = {
bundleId: ['all-ls'],
accountId: '0000-0000-0000-0000',
widgets: {
liveScore: [
{
element: 'DOM_element_id',
coverageId: '0000-0000-0000',
onActionCallback: function(widgetType, actionType, actionPayload) { // Action Callback
// widgetType = triggering widget name
// actionType = type of event (filter change, score change, etc.)
// actionPayload = filter value or score change object etc.
/* ----- Example ----- */
//Row click on liveScore widget
console.log(widgetType); // ==> "liveScore"
console.log(actionType); // ==> "match-row-click"
console.log(actionPayload); // ==> {sportId: 1, matchId: 1411559}
//Tournament filter changes on liveScore widget
console.log(widgetType); // ==> "liveScore"
console.log(actionType); // ==> "tournament-filter"
console.log(actionPayload); // ==> {sportId: 1, tournamentId: 41}
//Sport filter changes on liveScore widget
console.log(widgetType); // ==> "liveScore"
console.log(actionType); // ==> "sport-filter"
console.log(actionPayload); // ==> 1
//Soccer score changes in liveScore widget
console.log(widgetType); // ==> "liveScore"
console.log(actionType); // ==> "soccer-score-change"
console.log(actionPayload); /* ==> {
homeTeam: 'Real Madrid',
homeTeamId: 508,
homeScore: 3,
awayTeam: 'Liverpool',
awayTeamId: 508,
awayScore: 1,
scoreTime: 83,
status: '2H'
}
*/
//Other score changes actionType
console.log(actionType); /* ==>
"soccer-score-change",
"basketball-score-change",
"volleyball-score-change",
"handball-score-change",
"football-score-change",
"iceHockey-score-change",
"baseball-score-change"
*/
}
}
]
}
};
/* Widget Initializer */
(function(b, s, p, o, r, t) {
b['broadage'] = b['broadage'] || [];
if (!b['broadage'].length) {
r = document.createElement(s);
t = document.getElementsByTagName(s)[0];
r.async = true;
r.src = p;
t.parentNode.insertBefore(r, t);
}
b['broadage'].push({ 'bundleId': o.bundleId, 'widgets': o.widgets, 'accountId': o.accountId });
})(window, 'script', '//cdn-saas.broadage.com/widgets/loader/loader.js', WIDGET_BODY);
</script>
How to send parameters with action callback function?
You can use the "onActionCallback" method to send parameters from a hybrid app or mobile WebView or iframe etc.
<!-- ***** iframe Example ***** -->
<!-- MAIN PAGE: parent.html -->
<!DOCTYPE html>
<html>
<head>
<title>MAIN PAGE</title>
</head>
<body>
<iframe src="widget.html" height="100%" width="100%"></iframe>
<script>
// Listen to message from iframe (WIDGET PAGE)
window.addEventListener('message', function(event) {
// event.data: { sportId: 1, matchId: 1304955 }
console.log('Receive Message:', event.data);
}, false);
</script>
</body>
</html>
<!-- WIDGET PAGE: widget.html -->
<!DOCTYPE html>
<html>
<head>
<title>WIDGET PAGE</title>
</head>
<body>
<div id="livescore-view"></div>
<script>
/* Widget Body */
var WIDGET_BODY = {
bundleId: ['all-ls'],
accountId: '0000-0000-0000-0000',
widgets: {
liveScore: [
{
element: 'livescore-view',
coverageId: '0000-0000-0000',
onActionCallback: function(widgetType, actionType, actionPayload) { // Action Callback
if (actionType === 'match-row-click') {
// actionPayload: { sportId: 1, matchId: 1304955 }
// Send a message to the parent (MAIN PAGE)
window.parent.postMessage(actionPayload, '*');
}
}
}
]
}
};
/* Widget Initializer */
(function(b, s, p, o, r, t) {
b['broadage'] = b['broadage'] || [];
if (!b['broadage'].length) {
r = document.createElement(s);
t = document.getElementsByTagName(s)[0];
r.async = true;
r.src = p;
t.parentNode.insertBefore(r, t);
}
b['broadage'].push({ 'bundleId': o.bundleId, 'widgets': o.widgets, 'accountId': o.accountId });
})(window, 'script', '//cdn-saas.broadage.com/widgets/loader/loader.js', WIDGET_BODY);
</script>
</body>
</html>
Query String Parse (optional)
Match the URL query string and widget fields to each other. With queryStringParse feature, the values of the required fields can be read in the URL.
Warning: Optional fields are not supported.
<script>
/**
* queryStringParse
*
* @type: Object
* @key: [widget field]
* @value: [query string field]
* */
</script>
<script>
/* Widget Body */
var WIDGET_BODY = {
'bundleId': ['soccer-hst'],
'accountId': '0000-0000-0000-0000',
'widgets': {
'soccerH2hStandings': [
{ // Widget Instance
'element': 'DOM_element_id',
'tournamentId': 1, // mandatory field for H2H Standings
'teamId': 1, // mandatory field for H2H Standings
'teamId2': 2, // mandatory field for H2H Standings
/* http://your-domain/?tournament=2&homeTeam=200&awayTeam=157 */
queryStringParse: {
tournamentId: 'tournament',
teamId: 'homeTeam',
teamId2: 'awayTeam'
}
}
]
}
};
/* Widget Initializer */
(function(b, s, p, o, r, t) {
b['broadage'] = b['broadage'] || [];
if (!b['broadage'].length) {
r = document.createElement(s);
t = document.getElementsByTagName(s)[0];
r.async = true;
r.src = p;
t.parentNode.insertBefore(r, t);
}
b['broadage'].push({ 'bundleId': o.bundleId, 'widgets': o.widgets, 'accountId': o.accountId });
})(window, 'script', '//cdn-saas.broadage.com/widgets/loader/loader.js', WIDGET_BODY);
</script>
Multiple Widget Instance With Widget Initializer
Multiple different widgets can be run at the same time as a single initializer.
Different languages, different themes, etc. can be assigned to each widget instance.
<script>
var WIDGET_BODY = {
'bundleId': ['soccer-fx', 'soccer-st'], // Soccer Fixture and Standings bundle id
'accountId': '0000-0000-0000-0000',
'widgets': {
'soccerFixture': [ // Widget Type = Soccer Fixture
{ 'element': 'widget_1', 'tournamentId': 5, 'options': { 'lang': 'tr-TR', 'theme': 'white' } }, // Fixture Instance 1
{ 'element': 'widget_2', 'tournamentId': 8, 'options': { 'lang': 'en-US', 'theme': 'darkBlue' } }, // Fixture Instance 2
{ 'element': 'widget_3', 'tournamentId': 9, 'options': { 'lang': 'fr-FR', 'theme': 'darkGreen' } } // Fixture Instance 3
],
'soccerStandings': [ // Widget Type = Soccer Standings
{ 'element': 'widget_4', 'tournamentId': 5, 'options': { 'lang': 'tr-TR', 'theme': 'darknessBlue' } }, // Standings Instance 1
{ 'element': 'widget_5', 'tournamentId': 8, 'options': { 'lang': 'en-US', 'theme': 'petrolBlue' } }, // Standings Instance 2
]
}
};
/* Widget Initializer */
(function(b, s, p, o, r, t) {
b['broadage'] = b['broadage'] || [];
if (!b['broadage'].length) {
r = document.createElement(s);
t = document.getElementsByTagName(s)[0];
r.async = true;
r.src = p;
t.parentNode.insertBefore(r, t);
}
b['broadage'].push({ 'bundleId': o.bundleId, 'widgets': o.widgets, 'accountId': o.accountId });
})(window, 'script', '//cdn-saas.broadage.com/widgets/loader/loader.js', WIDGET_BODY);
</script>
<div id="widget_1"><!-- Fixture instance 1 to be binding here --></div>
<div id="widget_2"><!-- Fixture instance 2 to be binding here --></div>
<div id="widget_3"><!-- Fixture instance 3 to be binding here --></div>
<div id="widget_4"><!-- Standings instance 1 to be binding here --></div>
<div id="widget_5"><!-- Standings instance 2 to be binding here --></div>
Multiple Widget Instance With Multiple Widget Initializer
Multiple different widgets can be run at the same time as multiple initializer.
<script>
/* Widget Initializer 1 */
(function(b, s, p, o, r, t) {
b['broadage'] = b['broadage'] || [];
if (!b['broadage'].length) {
r = document.createElement(s);
t = document.getElementsByTagName(s)[0];
r.async = true;
r.src = p;
t.parentNode.insertBefore(r, t);
}
b['broadage'].push({ 'bundleId': o.bundleId, 'widgets': o.widgets, 'accountId': o.accountId });
})(window, 'script', '//cdn-saas.broadage.com/widgets/loader/loader.js', { // Widget Body
'bundleId': ['soccer-fx'], // Soccer Fixture bundle id
'accountId': '0000-0000-0000-0000',
'widgets': {
'soccerFixture': [ // Widget Type = Soccer Fixture
{ 'element': 'widget_1', 'tournamentId': 5, 'options': { 'lang': 'tr-TR' } }, // Fixture Instance 1
{ 'element': 'widget_2', 'tournamentId': 8, 'options': { 'lang': 'en-US' } }, // Fixture Instance 2
{ 'element': 'widget_3', 'tournamentId': 9, 'options': { 'lang': 'fr-FR' } } // Fixture Instance 3
]
}
});
</script>
<script>
/* Widget Initializer 2 */
(function(b, s, p, o, r, t) {
b['broadage'] = b['broadage'] || [];
if (!b['broadage'].length) {
r = document.createElement(s);
t = document.getElementsByTagName(s)[0];
r.async = true;
r.src = p;
t.parentNode.insertBefore(r, t);
}
b['broadage'].push({ 'bundleId': o.bundleId, 'widgets': o.widgets, 'accountId': o.accountId });
})(window, 'script', '//cdn-saas.broadage.com/widgets/loader/loader.js', { // Widget Body
'bundleId': ['soccer-st'], // Soccer Standings bundle id
'accountId': '0000-0000-0000-0000',
'widgets': {
'soccerStandings': [ // Widget Type = Soccer Standings
{ 'element': 'widget_4', 'tournamentId': 5, 'options': { 'lang': 'tr-TR' } }, // Standings Instance 1
{ 'element': 'widget_5', 'tournamentId': 8, 'options': { 'lang': 'en-US' } }, // Standings Instance 2
]
}
});
</script>
<div id="widget_1"><!-- Fixture instance 1 to be binding here --></div>
<div id="widget_2"><!-- Fixture instance 2 to be binding here --></div>
<div id="widget_3"><!-- Fixture instance 3 to be binding here --></div>
<div id="widget_4"><!-- Standings instance 1 to be binding here --></div>
<div id="widget_5"><!-- Standings instance 2 to be binding here --></div>
Widget API
Can change the properties of widget instance at runtime with Widget API.
Warning: Each widget's properties may vary. For the right properties: Make sure that the corresponding property closes the widget.
<script>
/**
* broadageWidget
*
* @params:
* [element]: String
* [callback]: Function(instance)
* [instance]: Object
*
* @return: void
* */
window.broadageWidget([element], [callback]);
</script>
How to Use Widget API
Warning: Changing the html DOM element id of the widget instance will cause an errors.
<script>
/* Change to Tournament Id */
window.broadageWidget('DOM_element_id', function(instance) {
instance.tournamentId = 2;
});
/* Change to Language and Time Zone */
window.broadageWidget('DOM_element_id', function(instance) {
instance.options.lang = 'fr-FR';
instance.options.timeZone = 2;
});
/* Change to Theme */
window.broadageWidget('DOM_element_id', function(instance) {
instance.options.theme = 'darkBlue';
});
/* Set to Custom Theme and Pre Loader (Lazy) */
window.broadageWidget('DOM_element_id', function(instance) {
instance.options.theme = 'http://your_domain/your-custom-theme.css';
instance.options.customPreLoader = 'http://your_domain/your-custom-pre-loader.gif';
});
</script>
<!-- *** FULL EXAMPLE *** -->
<script>
/* Widget Initializer */
(function(b, s, p, o, r, t) {
b['broadage'] = b['broadage'] || [];
if (!b['broadage'].length) {
r = document.createElement(s);
t = document.getElementsByTagName(s)[0];
r.async = true;
r.src = p;
t.parentNode.insertBefore(r, t);
}
b['broadage'].push({ 'bundleId': o.bundleId, 'widgets': o.widgets, 'accountId': o.accountId });
})(window, 'script', '//cdn-saas.broadage.com/widgets/loader/loader.js', { // Widget Body
'bundleId': ['soccer-st'],
'accountId': '0000-0000-0000-0000',
'widgets': {
'soccerStandings': [
{ 'element': 'DOM_element_id', 'tournamentId': 5, 'options': { 'theme': 'white' } }
]
}
});
/* Change theme after 5 seconds from page loading */
window.setTimeout(function() {
/* Change to Theme */
window.broadageWidget('DOM_element_id', function(instance) {
instance.options.theme = 'darkBlue';
});
}, 5000);
</script>
Widget Insert
With the insert method, you can load a new widget that was not previously defined with the widget initializer or a new instance of a previously loaded widget can be created.
<script>
/**
* broadageWidget.insert
*
* @params:
* [widgetBody]: Object
*
* @return: void
* */
window.broadageWidget.insert([widgetBody]);
</script>
<!-- *** EXAMPLE *** -->
<script>
/* Empty Widget Initializer */
(function(b, s, p, o, r, t) {
b['broadage'] = b['broadage'] || [];
if (!b['broadage'].length) {
r = document.createElement(s);
t = document.getElementsByTagName(s)[0];
r.async = true;
r.src = p;
t.parentNode.insertBefore(r, t);
}
b['broadage'].push({ 'bundleId': o.bundleId, 'widgets': o.widgets, 'accountId': o.accountId });
})(window, 'script', '//cdn-saas.broadage.com/widgets/loader/loader.js', {});
</script>
<script>
/* Insert widget after 5 seconds from page loading */
window.setTimeout(function() {
var WIDGET_BODY = {
bundleId: ['soccer-fx'],
accountId: '0000-0000-0000-0000',
widgets: {
soccerFixture: [
{ element: 'widget_1', tournamentId: 2 }
]
}
};
/* Insert widget (Lazy) */
window.broadageWidget.insert(WIDGET_BODY);
}, 5000);
</script>
Remove Widget
Removes loaded widget(s).
Warning: Widgets removed with this method are permanently removed. The insert method should be used when it is desired to re insertion.
<script>
/**
* broadageWidget.remove
*
* @params:
* [element or WidgetType]: String
*
* @return: void
* */
window.broadageWidget.remove([element or widgetType]);
</script>
<script>
/* Remove Widget with Dom Element ID */
window.broadageWidget.remove('DOM_element_id');
/* Remove All Soccer Fixture Widgets*/
window.broadageWidget.remove('soccerFixture');
/* Remove All Soccer Standings Widgets*/
window.broadageWidget.remove('soccerStandings');
</script>
Check if Widget is Insert
Check whether the corresponding widget instance has been loaded before.
<script>
/**
* broadageWidget.has
*
* @params:
* [element]: String
*
* @return: Boolean
* */
window.broadageWidget.has([element]);
</script>
<script>
/* Check if widget is insert */
window.broadageWidget.has('DOM_element_id');
</script>
Widget Version
Show the version of widget components in the browser console.
<script>
/**
* broadageWidget.version
*
* @return void
*/
window.broadageWidget.version();
</script>