Adding Scores, Schedule, Standings, and Stats to Your Website

Scores, Schedule, Standings, and Stats from GameSheet can be embedded into any website by adding a small snippet of HTML or JavaScript code.

How to Embed Scores, Schedule, Standings, and Stats

  1. Copy the iFrame or JavaScript code snippet that best matches your desired implementation (see options below).
  2. Open your websites administrative area to the page where you'd like to embed the stats, and switch to edit mode.
  3. Add a HTML Block (referred to as a "code element" in some systems) to the area on the page where you want the stats to be displayed.
  4. Paste in the code snippet you copied in step 1.
  5. IMPORTANT! Replace the season ID (317 in the examples) with your season's ID.
  6. Save, preview, and once you're satisfied publish.

Pro Tip

Your season's ID is shown in the address bar of your browser when working on any page within your season, e.g. the Completed Games page: 

If your website does not have an administrative area or you are uncomfortable editing your websites HTML code, please contact us for assistance and we will work with you, and/or your webmaster to get everything setup just the way you want it.

Implementation Options

Option 1: Using an iFrame

<iframe src="https://gamesheet.app/seasons/317/stats/scores" frameborder="0" style="width:100%; height: 1000px;"></iframe>

Replace the Season ID (317 in this example) with your season's ID.

Option 2: Using JavaScript

<a class="gamesheet-stats" href="https://gamesheet.app/seasons/317/stats/scores">
GameSheet Stats Widget</a>
<script async src="https://platform.gamesheet.app/widgets.js"></script>

Replace the Season ID (317 in this example) with your season's ID.

Customization Options

Use the examples below to customize the standard display to suit your implementation requirements.

Custom Colours

By default, GameSheet uses yellow and matte black as primary and secondary colours. To change these colours to match the style of your website, add configuration[primary-colour]=00205B and configuration[secondary-colour]=00843d (iFrame) or data-primary-colour="00205B" and data-secondary-colour="00843d" (JavaScript), where 00205B and 00843d are the hex colour codes of your primary and secondary colours (blue and green in this example).

iFrame
 <iframe src="https://gamesheet.app/seasons/317/stats/scores?configuration[primary-colour]=00205B&configuration[secondary-colour]=00843d" frameborder="0" style="width:100%; height:1000px;"></iframe>
Javascript
<a class="gamesheet-stats" href="https://gamesheet.app/seasons/317/stats/scores" 
data-primary-colour="00205B" 
data-secondary-colour="00843d" 
>GameSheet Stats Widget</a> <script async src="https://platform.gamesheet.app/widgets.js"></script>

Test the end result to make sure there is sufficient contrast; certain colour combinations compromise readability.

Pro Tip

If you're not sure how to find the hex colour code for your organization, read this.

Width & Height

Adjust the frame to fit your website layout by updating the width & height attributes (iFrame) or data-width & data-height (JavaScript). The default width and height are 100% and 1000px respectively. 

iFrame
<iframe src="https://gamesheet.app/seasons/317/stats/scores" frameborder="0" style="width:800px; height:600px;"></iframe>
JavaScript
<a class="gamesheet-stats" href="https://gamesheet.app/seasons/317/stats/scores"
data-width="800px"
data-height="600px"
>GameSheet Stats Widget</a>
<script async src="https://platform.gamesheet.app/widgets.js"></script>

Hide the GameSheet logo

The GameSheet logo is shown by default. To hide the logo, add configuration[logo]=false to the src URL of the iFrame or data-logo="false" to the JavaScript.

iFrame
<iframe src="https://gamesheet.app/seasons/317/stats/scores?configuration[logo]=false" frameborder="0" style="width:100%; height:1000px;"></iframe>
JavaScript
<a class="gamesheet-stats" href="https://gamesheet.app/seasons/317/stats/scores"
data-logo="false"
>GameSheet Stats Widget</a>
<script async src="https://platform.gamesheet.app/widgets.js"></script>

Hide the Navigation

Navigation links are shown by default. To hide the navigation links, add configuration[navigation]=false" to the src URL of the iFrame or data-navigation="false" to the JavaScript.

iFrame
<iframe src="https://gamesheet.app/seasons/317/stats/scores?configuration[navigation]=false" frameborder="0" style="width:100%; height:1000px;"></iframe>
JavaScript
<a class="gamesheet-stats" href="https://gamesheet.app/seasons/317/stats/scores"
data-navigation="false"
>GameSheet Stats Widget</a>

Hide the Filter Controls

To hide the filter and search controls, add configuration[filters]=false to the src URL of the iFrame or data-filters="false" to the JavaScript.

iFrame
<iframe src="https://gamesheet.app/seasons/317/stats/scores?configuration[filters]=false" frameborder="0" style="width:100%; height:1000px;"></iframe>
JavaScript
<a class="gamesheet-stats" href="https://gamesheet.app/seasons/317/stats/scores"
data-filters="false"
>GameSheet Stats Widget</a>
<script async src="https://platform.gamesheet.app/widgets.js"></script>

Infinite Scroll

Game scores are loaded using infinite scroll by default. This means that when the user scrolls to a certain point the system automatically fetches additional scores. Using the JavaScript snippet, the data-infinite-scroll parameter may be set to false to switch to using a "Load More" button to trigger fetching additional scores.

<a class="gamesheet-stats" href="https://gamesheet.app/seasons/317/stats/scores"
data-infinite-scroll="false"
>GameSheet Stats Widget</a>
<script async src="https://platform.gamesheet.app/widgets.js"></script>

Filtering Options

Pro Tip

You can configure your widget in the browser. To see how this works, navigate to your season's stats pages (links are on the Season page) and use the menus on the page to apply the desired filters and search criteria. Once the page is filtered how you want it, copy the URL from your browsers address bar and replace the src URL in the iFrame or the href URL in JavaScript.

Filter by Division

To filter by a single division, add filter[division]=2290 (iFrame) or data-divisions="2290" (JavaScript), where "2290" is the ID of the division you want to filter by. To filter by multiple divisions, separate each ID with a comma.

iFrame
<iframe src="https://gamesheet.app/seasons/317/stats/standings?filter[division]=2290" frameborder="0" style="width:100%; height:1000px;"></iframe>
JavaScript
<a class="gamesheet-stats" href="https://gamesheet.app/seasons/317/stats/standings"
data-divisions="2290"
>GameSheet Stats Widget</a>
<script async src="https://platform.gamesheet.app/widgets.js"></script>

Filter by Team

To filter by a single team, add filter[team]=14410 (iFrame) or data-team="14410" (JavaScript), where "14410" is the ID of the team you want to filter by. To filter by multiple teams, separate each ID with a comma.

iFrame
<iframe src="https://gamesheet.app/seasons/317/stats/scores?filter[team]=14410" frameborder="0" style="width:100%; height:1000px;"></iframe>
JavaScript
<a class="gamesheet-stats" href="https://gamesheet.app/seasons/317/stats/scores"
data-team="14410"
>GameSheet Stats Widget</a>
<script async src="https://platform.gamesheet.app/widgets.js"></script>

Filter by Query

To filter by location, team name, and/or game #, add filter[query]=Toronto (iFrame) or data-query="Toronto" (JavaScript), where "Toronto" is the query string you want to filter by. 

iFrame
<iframe src="https://gamesheet.app/seasons/317/stats/scores?filter[query]=Toronto" frameborder="0" style="width:100%; height:1000px;"></iframe>
JavaScript
<a class="gamesheet-stats" href="https://gamesheet.app/seasons/317/stats/scores"
data-query="Toronto"
>GameSheet Stats Widget</a>
<script async src="https://platform.gamesheet.app/widgets.js"></script>

Filter by Game Type

To filter by game type, add filter[type]=playoff (iFrame) or data-game-type="playoff" (JavaScript), where "playoff" is the type of game you want shown. Optoins for game type are: exhibition, regular_season, playoff, and tournament.

iFrame
<iframe src="https://gamesheet.app/seasons/317/stats/scores?filter[type]=playoff" frameborder="0" style="width:100%; height:1000px;"></iframe>
JavaScript
<a class="gamesheet-stats" href="https://gamesheet.app/seasons/317/stats/scores"
data-game-type="playoff"
>GameSheet Stats Widget</a>
<script async src="https://platform.gamesheet.app/widgets.js"></script>

Combine Configuration & Filter Options

Configuration and filter options can be combined to suit your specific needs. Here is an example showing the Standings page, filtered to show only playoff games for a single division while hiding the logo, filters, and navigation.

iFrame
<iframe src="https://gamesheet.app/seasons/317/stats/standings?filter[type]=playoff&filter[division]=2290&configuration[logo]=false&configuration[filters]=false&configuration[navigation]=false" frameborder="0" style="width:100%; height:1000px;"></iframe>
JavaScript
<a class="gamesheet-stats" href="https://gamesheet.app/seasons/317/stats/scores"
data-game-type="playoff"
data-divisions="2290"
data-logo="false"
data-navigation="false"
data-filters="false"
>GameSheet Stats Widget</a>
<script async src="https://platform.gamesheet.app/widgets.js"></script>
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Related Articles