Add and Update

Add and update interface let you add and update widgets to your page. Add and update methods share the same API.

SDW.addWidget(widget: Widget);
SDW.updateWidget(update: widget);

interface Widget {
    containerId: string;
    type: WidgetType;
    locale?: string;
    settings: WidgetSettings;
    groupId?: string;              // This is important for split widgets. A widget group shares a data source.
    onTrack?: (event: TrackingEvent) => void;
}

enum WidgetType {
    Calendar = 'calendar',
    Topbar = 'topbar',
    Match = 'match',
    SplitMatch = 'split-match',
}

interface WidgetSettings {
    // calendar settings
    ignoreMapItemCategories?: MapCategory[];
    ignoreTimelineItemCategories?: TimelineCategory[];
    titleFilter?: GameTitle[];
    tournamentFilter?: string;
    groupCalendarByLive?: boolean;

    // topbar only settings
    disableAutoSelectMatch?: boolean;

    // topbar and calendar relevant settings
    matchWidgetId?: string; // If set, detail opens in external match widget.
    tickerOnly?: boolean; // If set, matches ain't selectable.

    // match settings
    matchId?: string;

    // split match settings
    dynamicHeight?: boolean;
    leftTeam?: string;
    rightTeam?: string;
    keepTeamSides?: boolean;
    elements?: WidgetElement[];
    playerStatsDataPoints?: DataPoint[];
}

type GameTitle = 'dota' | 'cs'
type TimelineCategory = 'player' | 'grenade' | 'bomb' | 'round' | 'team' | 'damage' | 'game_state' | 'stream_issue' | 'score' | 'map_state' | 'draft_event' | 'building' | 'roshan' | 'tormentor' | 'ward' | 'item' | 'game_state' | 'multi_kill' | 'timer' | 'stream_issue' | 'score';
type MapCategory = 'bomb' | 'player' | 'grenade' | 'ancient' | 'building', 'ward' | 'roshan';

interface DataPoint {
    name: string; // Name of the data point
    essential?: boolean; // If true, the data point is always shown unless not enough space.
}

Widget Properties explained

type: string constant -> required

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 the widget to. If the provided element cannot be found in the DOM the widget will not be visible. Please check your browser's 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 performance. 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 fixture.

settings: object -> optional

Let's take a look at a widget's possible settings.

Property	Widget types	Default Value	Description
matchId	m, sm	undefined (required)	Match id to display a single match.
groupCalendarByLive	c, t	false	Groups matches in your calendar depending on if they are live.
tournamentFilter	c, t	undefined	Filter your matches by tournament. Use 'lec' for example to only view LEC games.
titleFilter	c, t	['all', '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.
rightTeam	m, c, sm	undefined	Manually define the team that is shown on the right 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.
ignoreMapItemCategories	m, c, sm	undefined	List of map item categories not to be shown on the map.
ignoreTimelineCategories	m, c, sm	undefined	List of timeline item categories not to be shown in the timeline element.

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

Widget elements

Widget elements define the visual features of your widget. The following table breaks these down. Elements can either be prematch (data you can see before a match starts), live (data you see while a match is ongoing) or postmatch (results composed from a complete match). The following table visualizes your options.

Constant	Title	Widget types	Widget type	Description
'PrematchStreaks'	CS2, DOTA	m, c, sm, t	prematch	Latest win/loss streaks.
'PrematchMapVotes'	CS2	m, c, sm, t	prematch	CS map votes before a match starts.
'PrematchPastMatches'	CS2, DOTA	m, c, sm, t	prematch	Past head-to-heads of the competing teams.
'PrematchRoster'	CS2, DOTA	m, c, sm, t	prematch	Current known team roster.
'PrematchPlayerPerformance'	CS2, DOTA	m, c, sm, t	prematch	Historical player stats averages from recently recorded matches.
'PrematchTeamPerformance'	CS2, DOTA	m, c, sm, t	prematch	Historical team stats averages from recently recorded matches.
'PrematchMapWinPercentage'	CS2	m, c, sm, t	prematch	Map win percentage calculated from the last 6 months.
'RoundScore'	CS2	m, c, sm, t	live	In-game round score.
'HorizontalTimeline'	CS2, DOTA	m, c, sm, t	live	Horizontal timeline view of important in-game events.
'Timeline'	CS2, DOTA	sm	live	Vertical timeline of in-game events.
'RealtimeMap'	CS2, DOTA	m, c, t	live	In-game map and timeline in a tabbed view.
'RealtimeMapAndVideo'	CS2, DOTA	m, c, t	live	In-game map, live stream and timeline in a tabbed view. (betting clients only)
'PlayerStats'	CS2, DOTA	m, c, sm, t	live	In-game player stats.
'PlayerStatsTable'*	CS2, DOTA	m, c, sm, t	live	Player stats as a table view.
'TeamStats'	CS2, DOTA	m, c, sm, t	live	In-game team stats.
'Bans'	DOTA	m, c, sm, t	live	Banned heroes from draft phase.
'MapName'	CS2	m, c, sm, t	live	CS map name and current map score.
'Map'	CS2, DOTA	sm	live	In-game map view.
'MiniMap'	CS2, DOTA	sm	live	Enhanced map view with additional data.
'GameClock'	CS2, DOTA	sm	live	In-game clock.
'Video'	CS2, DOTA	sm	live	Live stream (betting clients only).
'ResultsPastMatches'	CS2, DOTA	m, c, sm, t	postmatch	Map results.
'ResultsPlayerPerformance'	CS2, DOTA	m, c, sm, t	postmatch	Average player performances from current match.
'ResultsTeamPerformance'	CS2, DOTA	m, c, sm, t	postmatch	Average team performances from current match.
'FixtureInfo'	CS2, DOTA	sm	all	Basic info about the fixture. Available for all match stages.

Player stats table special case

PlayerStatsTable element has composable stats. That means you can define and prioritize certain data points you want to see in your player stats table. There is a defined set of stats you can choose from. Essential player info is always part of the dataset though. From screen size of more than 420px you can select up to 8 data points. 4 below that. Data points marked as essential will always be visible (up to 4).

Data point	title	default	Description
main_weapon	CS2	included	Showing the current main weapon of a player. If player does not have a main weapon, secondary weapon is displayed instead.
health_percentage	CS2, DOTA	included	Current health of the player
armor	CS2	included	Has armor or not.
current_money	CS2	included	Showing the current money.
equipment_value	CS2	no	CS current equipment value of a player.
kills	CS2, DOTA	essential	Kills of a player.
assists	CS2, DOTA	essential	Assists of a player.
deaths	CS2, DOTA	essential	Deaths of a player.
adr	CS2	essential	Average damage per round.
headshots	CS2	no	Headshots.
level	DOTA	essential	Dota hero level.
minion_kills	DOTA	included	Creep score.
total_gold	DOTA	included	Total gold of a player.
xp	DOTA	no	Experience.
denies	DOTA	no	Denies of a player.