Skip to main content

Widget Setup

With just a few lines of code, you can embed live scores or game boxscores directly into your website. Add the Livescore widget to show all ongoing games, or the Boxscore widget to display detailed stats for a specific game.

Loading the Plugin​

Inject the following HTML code in the <head> section or before the closing </body> tag of every page you want to display stats in:

<script src="https://d30aes996crnzh.cloudfront.net/msm-stats-widgets.latest.min.js"</script>

Some frameworks support HTML template inheritance or composition, which can be a more efficient way to include this code across multiple pages.

Livescore Widget​

Show live scores all your organization's games for the current day with real-time score updates.

<!-- Add a container where the widget will appear -->
<div id="msm-livescores-widget"></div>

<!-- Initialize the widget -->
<script>
  LiveScores({
    targetElement: "#msm-livescores-widget",
    orgId: "test"
  });
</script>

Configuration​

ParameterDescription
targetElement
(Required)		CSS selector that matches the id of your container div (include the # symbol)

One of:
• orgId
• orgIdQueryParam
• orgIdUrlRegex
(Required)		You can find the org id in the Organization Settings section.

• orgId: Direct value
• orgIdQueryParam: From query param (e.g., "org" reads ?org=123)
• orgIdUrlRegex: From URL path (e.g., "/orgs/(\\d+)")

theme
(Optional)		Theme style: "light" (default) or "dark"
primaryColor
(Optional)		Custom accent color (e.g., "#ff6b6b") - overrides theme accent colors
backgroundColor
(Optional)		Custom background color (e.g., "#2d2d44") - overrides theme background

Boxscore Widget​

Display detailed statistics for a specific game with real-time data for live games or historical data for past games.

<!-- Add a container where the widget will appear -->
<div id="msm-boxscore-widget"></div>

<!-- Initialize the widget -->
<script>
  BoxScore({
    targetElement: "#msm-boxscore-widget",
    orgId: "test",
    gameIdQueryParam: "gameId"
  });
</script>

Configuration​

ParameterDescription
targetElement
(Required)		CSS selector that matches the id of your container div (include the # symbol)

One of:
• orgId
• orgIdQueryParam
• orgIdUrlRegex
(Required)		You can find the org id in the Organization Settings section.

• orgId: Direct value
• orgIdQueryParam: From query param (e.g., "org" reads ?org=123)
• orgIdUrlRegex: From URL path (e.g., "/orgs/(\\d+)")

One of:
• gameId
• gameIdQueryParam
• gameIdUrlRegex
(Required)		• gameId: Direct value
• gameIdQueryParam: From query param (e.g., "gameId" reads ?gameId=456)
• gameIdUrlRegex: From URL path (e.g., "/games/(\\d+)")
theme
(Optional)		Theme style: "light" (default) or "dark"
primaryColor
(Optional)		Custom accent color (e.g., "#ff6b6b") - overrides theme accent colors
backgroundColor
(Optional)		Custom background color (e.g., "#2d2d44") - overrides theme background

Theme Customization​

Both widgets support light and dark themes. The default is light theme.

// Light theme (default)
LiveScores({
  targetElement: "#msm-livescores-widget",
  orgId: "your-org-id"
});

// Dark theme
LiveScores({
  targetElement: "#msm-livescores-widget",
  orgId: "your-org-id",
  theme: "dark"
});

Custom Colors​

You can override the default theme colors with your own brand colors. The widget will automatically derive all secondary colors (hover states, borders, backgrounds) from your primary choices:

BoxScore({
  targetElement: "#msm-boxscore-widget",
  orgId: "your-org-id",
  gameId: "your-game-id",
  theme: "dark",
  primaryColor: "#ff6b6b",      // Custom header/accent color
  backgroundColor: "#2d2d44"     // Custom background color
});

How it works:

  • primaryColor: Sets the header background, active elements, and accent colors
  • backgroundColor: Sets the main background color
  • Secondary colors are automatically calculated:
    • Row backgrounds (slightly darker/lighter)
    • Hover states (more pronounced shade)
    • Border colors (high contrast for visibility)
  • Text colors remain from the theme for optimal readability