Skip to main content

Widget Setup Guide

Integrate Mismatch Stats widgets into your website to display live scores and game statistics. This guide will walk you through setting up both the Livescore Widget and Boxscore Widget.

Loading the Plugin​

First, you need to load the Mismatch Stats widget plugin on every page where you want to display stats. Inject the following script tag in the HTML <head> section or before the closing </body> tag:

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

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

Livescore Widget​

The Livescore widget displays real-time scores for live games. Perfect for your homepage or games listing page.

Step 1: Add the Container​

Place an empty <div> element where you want the widget to appear:

<div id="msm-livescores-widget"></div>

Step 2: Initialize the Widget​

Add the following script to initialize the Livescore widget:

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

Configuration Options​

ParameterRequiredDescription
targetElement✅CSS selector that matches the id of your container div (include the # symbol)
orgId✅Your Mismatch organization identifier. Find this in your organization settings
baseUrl❌API endpoint URL. Defaults to production environment. Only set for development/testing

Boxscore Widget​

The Boxscore widget displays detailed statistics for a specific game. Ideal for individual game pages.

Step 1: Add the Container​

Place an empty <div> element where you want the boxscore to appear:

<div id="msm-boxscore-widget"></div>

Step 2: Initialize the Widget​

Add the following script to initialize the Boxscore widget:

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

Configuration Options​

ParameterRequiredDescription
targetElement✅CSS selector that matches the id of your container div (include the # symbol)
orgId✅Your Mismatch organization identifier. Find this in your organization settings
gameIdQueryParam✅Name of the URL query parameter containing the game ID. When creating games in Mismatch, you can set an external game ID that matches your system
baseUrl❌API endpoint URL. Defaults to production environment. Only set for development/testing

How Game ID Works​

The gameIdQueryParam allows the widget to automatically fetch the correct game data:

  1. Set External Game ID: When creating a game event in Mismatch, set the external game ID to match your system's game identifier
  2. URL Structure: Your game pages should include the game ID as a query parameter (e.g., yoursite.com/game?gameId=12345)
  3. Automatic Fetching: The widget reads the query parameter and requests the corresponding game data from Mismatch

Complete Example​

Here's a complete example showing both widgets on a single page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mismatch Stats Example</title>
    
    <!-- Load the Mismatch Stats widget plugin -->
    <script src="https://d1l4pktkpgryx3.cloudfront.net/msm-stats-widgets.latest.min.js"></script>
</head>
<body>
    <header>
        <h1>My Sports Website</h1>
    </header>
    
    <main>
        <!-- Livescore Widget -->
        <section>
            <h2>Live Games</h2>
            <div id="msm-livescores-widget"></div>
        </section>
        
        <!-- Boxscore Widget -->
        <section>
            <h2>Game Statistics</h2>
            <div id="msm-boxscore-widget"></div>
        </section>
    </main>
    
    <!-- Initialize Widgets -->
    <script>
        // Initialize Livescore Widget
        LiveScores({
            targetElement: "#msm-livescores-widget",
            orgId: "your-org-id",
            baseUrl: ""
        });
        
        // Initialize Boxscore Widget
        BoxScore({
            targetElement: "#msm-boxscore-widget",
            orgId: "your-org-id",
            gameIdQueryParam: "gameId",
            baseUrl: ""
        });
    </script>
</body>
</html>

Environment Configuration​

Development Environment​

  • Use baseUrl: "https://api-dev.mismatch.gr/api" for testing with development data
  • Perfect for development and staging environments

Production Environment​

  • Omit the baseUrl parameter or set it to the production endpoint
  • The widget will automatically use the production Mismatch API

Troubleshooting​

Getting Your Organization ID​

  1. Log into your Mismatch webapp
  2. Navigate to Organization Settings
  3. Your organization ID will be displayed in the settings panel

Next Steps​

Once your widgets are set up, you can: