Supported callback functions and their expected parameters

📘

The following examples are provided using the football widget library, but these callbacks are supported by all sports in the widget library. All widgets callback will be accessible via window object in the browser and its related sport (football example: window.smpFootballWidgets)

When you see WIDGETS_CONFIGURATION → it means the configuration of your widgets (sdkOptions, widgetAttributes, themes and so on)

Finding all HTML appended widgets and rendering/re-rendering them (LoadSmpWidget)

Use case: When loading all widgets initially (first time in any page)
How to use it:

window.smpFootballWidgets.LoadSmpWidget(WIDGETS_CONFIGURATION)

Dynamic import of specific widget (AddSmpWidget)

Use case: When adding widget dynamically (after we have preloaded widgets)
How to use it:

window.smpFootballWidgets.AddSmpWidget(WIDGETS_CONFIGURATION, WIDGET_HTML_ELEMENT)

Additional info: WIDGET_HTML_ELEMENT → should be already created and appended to the DOM as HTML element.


Dynamically changing attribute of specific widget (RefreshWidget)

Use case: When updating widget attribute dynamically (after it is already created in the DOM)
How to use it:

window.smpFootballWidgets.RefreshWidget(ELEMENT_DATA_ID)

Additional info: ELEMENT_DATA_ID → each widget has data-id attribute in itself which is automatically generated by us. This is NOT the data-widget-id attribute. You can access it via .getAttribute('data-id') method in the specific widget.


Dynamically refreshing widgets (RefreshAllWidgets)

Use case: When updating widget attribute dynamically (after it is already created in the DOM). Good example is adding ODDS to all widgets in the screen or changing their theme dynamically.
How to use it:

window.smpFootballWidgets.RefreshAllWidgets()

Extracting odds count from widgets (ExtractOddsCount)

Use case: When want to extract odds count for widgets (after they are already rendered in the user screen)
How to use it:

If you want to access the odds count (by sport) in the current moment on a specific page, you can execute:

window.smpFootballWidgets.ExtractOddsCount()

// you can try with different sports
window.smpBasketballWidgets.ExtractOddsCount()

If you want to access the odds count in all rendered widgets in the current moment, you can access the global object:

window.smpWidgetsOdds

Widgets nested callbacks

competition

Subscribe to the 'competition' event to get data when a user clicks on a competition.

smpFootballWidgets.subscribe('competition', (data) => console.log('Click competition:', data));

Parameters:

data (Object): An object containing information about the clicked competition.


team

Subscribe to the 'team' event to get data when a user clicks on a team.

smpFootballWidgets.subscribe('team', (data) => console.log('Click team:', data));

Parameters:

data (Object): An object containing information about the clicked team.


bettingMarketValue

Subscribe to the 'bettingMarketValue' event to get data when a user clicks on an odd market value.

smpFootballWidgets.subscribe('bettingMarketValue', (data) => console.log('Click odd market value:', data));

Parameters:

data (Object): An object containing information about the clicked odd market value


matchScore

Subscribe to the 'matchScore' event to get data when a user clicks on a match score.

smpFootballWidgets.subscribe('matchScore', (data) => console.log('Click match score:', data));

Parameters:

data (Object): An object containing information about the clicked match score.


bettingLogo

Subscribe to the 'bettingLogo' event to get data when a user clicks on an odd logo.

smpFootballWidgets.subscribe('bettingLogo', (data) => console.log('Click odd market value:', data));

Parameters:

data (Object): An object containing information about the clicked odd logo

onUserInteraction

Subscribe to the 'onUserInteraction' event to get data when a user interact with dropdown/tab/'show more' button.

smpFootballWidgets.subscribe('onUserInteraction', (data) => console.log('User interaction data:', data));

Parameters:

data (Object): An object containing information about the user interaction

This object will be in format (the object values are just example):

{  
  "dataWidgetId": "tennis-tournament-programme",  
  "dataWidgetSport": "tennis",  
  "clickType": "onUserInteraction",  
  "info": {  
    "name": "user_interaction",  
    "entity_type": "tabSelection"  -> this value can be 'tabSelection', 'dropdownSelection', 'showMore'
  }  
}

Useful cases for our clients:

Counting displayed odds on any page is important for our clients​, so here we will give example how to extract odds count on each page load and after user interaction with our widgets v2.

First, let create odds counting after widgets are loaded on the page (without user interaction). For this purpose we will use onLoaded subscription before initializing the widgets with LoadSmpWidget

const footballWidgetData= {
  sdkOptions: {...},
  widgetAttributes: {...},
  onLoaded: (data) => {
  	// get all footballWidgetsIds
  	const widgetIds = data.map((widget) => widget.id);
    // check are widgets rendered on the user screen
    const areWidgetsRenderedInterval = setInterval(() => {
    	if(smpFootballWidgets.AreWidgetsRendered(widgetIds)) {
        // widgets are rendered on the screen and we log the extracted odds in the console
      	console.log('[FOOTBALL] Extracted odds: ', smpFootballWidgets.ExtractOddsCount())
        // clearing the check for are widgets rendered on the user screen
        clearInterval(areWidgetsRenderedInterval);
      }
    }, 1000);
  },            
}

smpFootballWidgets.LoadSmpWidget(footballWidgetData);

After loading the whole page we can subscribe to onUserInteraction for all available sports. This way we will have information when user interact with dropdown/tab/show more field in our widgets.

smpFootballWidgets.subscribe('onUserInteraction', (data) => console.log('[FOOTBALL] Extracted odds: ', smpFootballWidgets.ExtractOddsCount()));

Of course our clients should handle their own logic in the subscriptions rather than logging the odds count in the console.