Integrating one of our widgets to your page starts with adding this js snippet to your page.

(function (w, d, s) {
  if (w.SDW) console.error('SDW widget already included');
  w.SDW = {}, w.SDW._r = s; methods = ['mount', 'unmount', 'addWidget', 'updateWidget', 'removeWidget', 'initStyles'];
  w.SDW._q = []; methods.forEach(method => w.SDW[method] = function () { w.SDW._q.push([method, arguments]) });
  var script = d.createElement('script'); script.async = 1; script.src = s;
  var before = d.getElementsByTagName('script')[0]; before.parentNode.insertBefore(script, before);
})(window, document, "https://widgets.shadow.gg/realtime2/scriptLoader.js");

After the widget framework code got integrated to your page, you can start interacting with our widget framework. We are providing an easy to use and understand interface for you convenience.

Visual Requirements for your page

All shadow widgets need at least 420 pixels width to have a consistant look and feel. Everything below that is not guaranteed to work and look as intended. All widgets are fully responsive. You can adapt the style of our widgets to fit the rest of your page by applying your own theme.

Authenticated Users

If your contract allows you to show betting quality (less delayed) data to your logged in users you will have received two different clientId versions.

You will have to initialize the widget with the default media quality clientId for all your users and only provide the betting quality data to those that are logged in.

Mounting

First thing you need to do is mounting the widgets base structure. Be aware that you need to obtain a CLIENT_ID from our support team to be able to mount. Basic mounting will look like as follows…

SDW.mount({ clientId: "YOUR_CLIENT_ID", theme: { ...yourTheme }, locale: 'de' });

During mounting you can define the widgets basic settings.

clientId: string -> required

You can obtain your client id from our support team.

theme: object -> optional

By default, we are delivering widgets to your page with our default theme. If you need to make widgets fit your pages theme, you can tweak colors. The following options are available and all of them are optional, meaning that you can only tweak the primary color for example. Please use our Demo page to test out your theme. All provided colors need to use hex values.

Example theme settings…

theme: {
    'primary': '#19B387',
    'secondary': '#E03030',
    'background-dark': '#14181F',
    'background-lighter': '#394560',
    'background-light': '#242C3D',
    'background-content': '#1E232E',
    'text-dark': '#99A5C2',
    'text': '#FFFFFF',
    'red': '#E03030',
    'blue': '#1580B6',
    'ct': '#5788A8',
    't': '#C19511',
    'dire': '#E03030',
    'radiant': '#82FF36',
}

locale: object -> optional

All shadow widgets are fully localizeable. The default language of all widgets is English. We also provide German locallization out of the box. For more languagues, please get in touch with our support.

After mounting the widget framework you can actually start adding widgets to your page.

Adding and updating a widget

At first, we need to define the set of widget types available. Basically, there are 4 types of widgets available right now.

type: string constant -> required

• calendar: A single widget that show a calendar containing a list of matches.
• match: A single widget covering one esport fixture.
• topbar: A calendar like topbar that can render a match widget on click.
• split-match: Have elements of the match widget rendered in multiple widget containers.

Please see our demo page to see the different widget types in action. Depending on the nature of the widget, there are settings on a widget type basis available.

containerId: string -> required

Please note that you always need to define the container id of where you want to render to widget to. If the provided element cannot be found in the DOM the widget will not be visible. Please check your browsers console if you do not see what you expect for possible integration issues.

groupId: string -> required for split-match widgets only

Split-match-widgets are able to consume one data source for improved performances. Therefore, you can render multiple split-match elements in various containers without worrying about performance. All split-match widgets that have the same groupId, will consume the same data source. It is recommended to use one groupId per fixutre.

settings: object -> optional

Let’s take a look at a widgets possible settings.

Property	Widget types	Default Value	Description
matchId	m, sm	undefined (required)	Match id to display a match.
groupCalendarByLive	c, t	false	Groups matches in your calendar depending on if they are live.
tournamentFilter	c, t	undefined	Filter you matches by tournament. Use ‘lec’ for example to only view LEC games.
titleFilter	c, t	[‘all’, ‘lol’, ‘dota’, ‘csgo’]	Filter your matches by game title.
matchWidgetId	t, c	undefined (required)	Container Id where the match widget should be attached to.
disableAutoSelectMatch	t	false	If enabled the first live match in the list is auto selected on load for calendar.
bayesTvEnabled	m, c, t	false	Enabled BayesTV. ONLY AVAILABLE FOR BETTING CUSTOMERS!
elements	m, c, sm	*see list below	Match elements to be seen in your widget.
dynamicHeight	m, c, sm	false	Widget iframes do resize their height automatically and always show full size.
leftTeam	m, c, sm	undefined	Manually define the team that is shown on the left side of UI. Fuzzy string match.
keepTeamSides	m, c, sm	false	Make teams stick to home and away side even if they switch sides during a game.

WidgetType	Abbreviation
match	m
calendar	c
topbar	t
split-match	sm

*elements default list [“RealtimeMap”,”MapName”,”TeamStats”,”PlayerStats”,”RoundScore”,”Bans”]

*elements for split-match-widgets in game elements: [“MapName”,”TeamStats”,”PlayerStats”,”RoundScore”,”Bans”,”MiniMap”,”HorizontalTimeline”,”Timeline”,”GameClock”] pre match stat elements: [“PrematchStreaks”,”PrematchMapVotes”,”PrematchPastMatches”,”PrematchRoster”,”PrematchPlayerPerformance”,”PrematchTeamPerformance”,”PrematchMapWinPercentage”] result stats elements: [“ResultsPastMatches”,”ResultsPlayerPerformance”,”ResultsTeamPerformance”]

onTrack: function -> optional

If you want to react programatically to the match widgets state you can supply a callback function to the onTrack parameter.

It will be called with two parameters.

Name	Type	Description
event	string	config-error, license-error, fixture-load-error, fixture-selected,fixture-status-change
trackingData	object	{ fixtureId: string, status?: *status } for fixture-status-change

*valid status are ‘live’ | ‘break’ | ‘scheduled’ | ‘ended’ for a fixutre. If you see another status like deleted, or no-live-data, consider this match not to be covered with live data by bayes and the widget will not show live data for it.

When selecting a fixture, onTrack will callback with the id of the selected fixture for analytics reasons or so you can use the id to display a fixture with a match widget somewhere else on your page. Be sure to use the sdwFixtureId parameter for that when using calendar-only widget type.

Adding a basic widget could look as follows…

SDW.addWidget({ containerId: "YOUR_CONTAINER_ID", type: "calendar" });

…and updating the configuration of the widget could look as follows…

SDW.updateWidget({
  containerId: "YOUR_CONTAINER_ID",
  type: "calendar",
  locale: "en",
  settings: { "elements": ["RealtimeMap","MapName","TeamStats","PlayerStats","RoundScore","Bans"] },
  onTrack: (event, data) => {
    console.log(event);
    console.log(data);
  },
});

addWidget and updateWidget have the same paramtere interface.</string>

Removing a widget

By using removeWidget function, you can remove widgets from you page. Use the container Id the widget was rendered in as function parameter.

SDW.removeWidget("YOUR_WIDGET_CONTAINER_ID");

Styling

You can update the theme of the widget integration by using initStyles function. Use your updates theme object as a parameter.

SDW.initStyles({ ...YOUR_THEME_OBJECT });

Unmounting

If you want to stop the Shadow widget integration from operating on your page, you can unmount the widget at any time.

SDW.unmount();