Skip to main content

Widgets

With just a few lines of code, you can embed live scores or game boxscores directly into your website. Add the CompetitionLiveScore widget to show all ongoing games of a competition, the Competition widget to show the season schedule and standings, 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://cdn.mismatch.gr/public/widgets/stats.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.

CompetitionLiveScore Widget​

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

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

<!-- Initialize the widget -->
<script>
  CompetitionLiveScore({
    targetElement: "#msm-competition-livescores-widget",
    orgId: "your-org-id",
    compId: "your-competition-id"
  });
</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+)")

compId
(Required)		The Mismatch competition id (direct value only). You can find it in the Competition Settings section.
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

Competition Widget​

Show the season schedule, standings and per-game details (summary and boxscore) for a competition.

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

<!-- Initialize the widget -->
<script>
  Competition({
    targetElement: "#msm-competition-widget",
    orgId: "your-org-id",
    compId: "your-competition-id",
    seasonId: "your-season-id"
  });
</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+)")

compId
(Required)		The Mismatch competition id (direct value only). You can find it in the Competition Settings section.
seasonId
(Required)		The Mismatch season id (direct value only).
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: "your-org-id",
    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​

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

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

// Dark theme
CompetitionLiveScore({
  targetElement: "#msm-competition-livescores-widget",
  orgId: "your-org-id",
  compId: "your-competition-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