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
- Copy the iFrame or JavaScript code snippet that best matches your desired implementation (see options below).
- Open your websites administrative area to the page where you'd like to embed the stats, and switch to edit mode.
- 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.
- Paste in the code snippet you copied in step 1.
- IMPORTANT! Replace the season ID (317 in the examples) with your season's ID.
- 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>