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 code.
How to Embed Scores, Schedule, Standings, and Stats
- Copy the iFrame 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
Standard iFrame
<iframe src="https://gamesheetstats.com/seasons/317/scores" frameborder="0" style="width:100%; height: 1000px;"></iframe>
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 , 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://gamesheetstats.com/seasons/317/scores?configuration[primary-colour]=00205B&configuration[secondary-colour]=00843d" frameborder="0" style="width:100%; height:1000px;"></iframe>
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. The default width and height are 100% and 1000px respectively.
iFrame
<iframe src="https://gamesheetstats.com/seasons/317/scores" frameborder="0" style="width:800px; height:600px;"></iframe>
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.
iFrame
<iframe src="https://gamesheetstats.com/seasons/317/scores?configuration[logo]=false" frameborder="0" style="width:100%; height:1000px;"></iframe>
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.
iFrame
<iframe src="https://gamesheetstats.com/seasons/317/scores?configuration[navigation]=false" frameborder="0" style="width:100%; height:1000px;"></iframe>
Hide the Filter Controls
To hide the filter and search controls, add configuration[filters]=false to the src URL of the iFrame.
iFrame
<iframe src="https://gamesheetstats.com/seasons/317/scores?configuration[filters]=false" frameborder="0" style="width:100%; height:1000px;"></iframe>
Disable All Links
To disable all links on the stats widget, add configuration[links]=false to the src URL of the iFrame. By default links are clickable.
This configuration will not hide filters. There is a separate configuration to remove filters if desired.
iFrame
<iframe src="https://gamesheetstats.com/seasons/317/scores?configuration[links]=false" frameborder="0" style="width:100%; height:1000px;"></iframe>
Customize Columns
To customize which columns are displayed on the stats widget, addconfiguration[players-cols]= , configuration[goalies-cols]= or configuration[standings-cols]= to the src URL of the iFrame.
Columns will be identified using the abbreviations displayed in the Stats Widget. E.g. For Standings: rk, logo, team, gp, w, l, t, pts, otw, otl, ppct, gf, ga, diff, ppg, shg, shga, pim.
To remove a column(s) from the stats widget, use the same configuration with a “-” in front a column to remove it.
Example iFrame with player name, number, goals and assists only
<iframe src="https://gamesheetstats.com/seasons/318/players?configuration[players-cols]=player,num,g,a" frameborder="0" style="width:100%; height:1000px;"></iframe>
Set Sort Order
To customize the order in which columns are displayed on the stats widget, add the following configuration: configuration[players-sort]= or configuration[goalies-sort]= to the src URL of the iFrame. Columns will be identified using the abbreviations displayed in the Stats Widget. E.g. For Standings: gp, w, l, t, pts, otw, otl, gf, ga, diff, ppg, shg, shga, pim.
Example iFrame sorted by goals in descending order
<iframe src="https://gamesheetstats.com/seasons/318/players?configuration[players-sort]=-g" frameborder="0" style="width:100%; height:1000px;"></iframe>
Limit Results
To limit how many players or goalies are displayed on the stats widget, add configuration[players-limit]= or configuration[goalies-limit]= to the src URL of the iFrame
This can be used in combination with custom sorting to create leaderboards such as “Top 5 Scorers”
Example iFrame with top 5 players
<iframe src="https://gamesheetstats.com/seasons/318/players?configuration[players-limit]=5" frameborder="0" style="width:100%; height:1000px;"></iframe>
Disable Standings
To disable the standings, add configuration[standings]=false to the src URL of the iFrame. By default standings are displayed.
This configuration will also hide the standings and division rank on individual team pages. Team records will still be displayed without a visible rank.
iFrame
<iframe src="https://gamesheetstats.com/seasons/317/scores?configuration[standings]=false" frameborder="0" style="width:100%; height:1000px;"></iframe>
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. To disable the infinite scroll, add [infinite-scroll]=false parameter may be set to false to switch to using a "Load More" button to trigger fetching additional scores.
iFrame
<iframe src="https://gamesheetstats.com/seasons/317/scores?configuration[infinite-scroll]=false" frameborder="0" style="width:100%; height:1000px;"></iframe>
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.
Filter by Division
To filter by a single division, add filter[division]=2290 to the src URL, 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://gamesheetstats.com/seasons/317/standings?filter[division]=2290" frameborder="0" style="width:100%; height:1000px;"></iframe>
Filter by Team
To filter by a single team, add filter[team]=14410 to the src URL, 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://gamesheetstats.com/seasons/317/scores?filter[team]=14410" frameborder="0" style="width:100%; height:1000px;"></iframe>
Filter by Query
To filter by location, team name, and/or game #, add filter[query]=Toronto to the src URL, where "Toronto" is the query string you want to filter by.
iFrame
<iframe src="https://gamesheetstats.com/seasons/317/scores?filter[query]=Toronto" frameborder="0" style="width:100%; height:1000px;"></iframe>
Filter by Game Type
To filter by game type, add filter[type]=playoff to the src URL, 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://gamesheetstats.com/seasons/317/scores?filter[type]=playoff" frameborder="0" style="width:100%; height:1000px;"></iframe>
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://gamesheetstats.com/seasons/317/standings?filter[type]=playoff&filter[division]=2290&configuration[logo]=false&configuration[filters]=false&configuration[navigation]=false" frameborder="0" style="width:100%; height:1000px;"></iframe>
Tournament iFrames - Standings, Results and Playoffs
This is a set of 3 iFrames combined for a typical Pool + type event. With Round Robin and then Playoff / Elimination Games.
iFrame
<h2>Tournament Standings</h2> <iframe src="https://gamesheetstats.com/seasons/317/standings?configuration[primary-colour]=F9C308&configuration[secondary-colour]=36383D&configuration[navigation]=false" frameborder="0" style="width:100%; height:800px;"></iframe> <hr/> <h2>Round Robin</h2> <iframe src="https://gamesheetstats.com/seasons/317/schedule?configuration[primary-colour]=F9C308&configuration[secondary-colour]=36383D&configuration[standings]=false&filter[type]=tournament" frameborder="0" style="width:100%; height:1000px;"></iframe> <hr/> <h2>Playoffs</h2> <iframe src="https://gamesheetstats.com/seasons/317/schedule?filter[type]=playoff&configuration[primary-colour]=F9C308&configuration[secondary-colour]=36383D&configuration[standings]=false" frameborder="0" style="width:100%; height:1000px;"></iframe>