Adding Reports to Your Web Site

Adding Reports to Your Own Web Site

Most Cricket Statz reports can be added to your own cricket club/association web site. You can add stats reports, match reports, player pages, player lists, etc. Report data is updated in real time so your users will always see the latest info automatically.

There are several ways to achieve this:

Directly link to cricketstatz.com reports in a new page,
Use iframes to render up the cricketstatz.com reports within your pages,
Embed report data into your existing club or league web site by including HTML/Script code in your web site page or
Use the json version of reports to render your own format.

Linking to the reports is the easiest but users will leave your site to view the reports. Iframes allow you to keep users on your site. Embedding code into your web page gives you the most control over the look and feel but requires some HTML coding. Using json is the most advanced option and requires coding. See below for details on each method.

Direct Links

The simplest and easiest method is to provide a link or button on your current web site and have it open up the respective Cricket Statz stats page in a new tab/window.

For example, let's say we wanted to direct users to a Top Run Scores report for your club. You could either link to the report that you would get from the admin panel/reports such as

https://www2.cricketstatz.com/ss/runreport2.aspx?mode=6&club=4530&limit=100

or link to your Cricket Statz public web site such as

https://www2.cricketstatz.com/ss/w.aspx?mode=6&club=4530.

It would look like this on your web site:

Top Run Scores

or via a button:

Top Run Scores

You could do that for each of the stats reports that you wish to have your visitors see.

Rather than put a button or link for each report, you can even provide a single link to the public web site stats page to let users find their own stats reports:

https://www2.cricketstatz.com/ss/w.aspx?mode=104&club=4530

If you wanted the stats list for one cricket season then you can add the &season=2022 (or &season=2022S for southern hemisphere) to the URL, such as

https://www2.cricketstatz.com/ss/w.aspx?mode=104&club=4530&season=2022

Iframes

Iframes allow you to embed the full report in your web site's pages. This will prevent users from leaving your site when they want to view the stats.

Most web site editors provide the ability to insert IFrames. Many call this "Embed" or "Insert external URL" or something similar. This site uses Wix.com and here is an example of Embedding a Web Page with the Top Run Scores report URL https://www2.cricketstatz.com/ss/runreport2.aspx?mode=6&club=4530&limit=7&newpage=1

Alternatively, if you want to do a little bit of HTML coding, you can manually add an Iframe with something like:

You can turn on links to open in a new page by adding a &newpage=1 switch to the URL. Alternatively, you can turn off links with the &nolink=1 switch.

Embedding Code

If you want control over the styling then Cricket Statz allows reports to be embedded in an existing web site by using <script> HTML tags. Script code for doing this is shown in the following example. The script will render a table on your page with specific CSS tags (ss_*) that you can override with your own specific styles.

Use the same parameters in the script's "linkreport" source URL as you would if you were running a standard report from the Cricket Statz admin panel to vary the report that is rendered.

Note that CSS coding experience is required.

An example page with embedded script:

<html>
<head>
<style type="text/css">
.ss_table {border-collapse:collapse;}
.ss_matchtable {border-collapse:collapse;width:500px;}
.ss_tablehead {font-family:Arial;font-size:8pt;color:#000000;font-weight: bold}
.ss_tablerow {font-family:Arial;font-size:8pt;color:#000000}
.ss_title {font-family:Arial;font-size:12pt;color:#ffffff;font-weight:bold; background-color:#cc4444;}
.ss_menu {font-family:Arial;font-size:12px;color: #222222}

.ss_howout {
font-family: Arial;

margin-right: 4px;
border-radius: 16px;
background-color: #999999;
color: #fff;
font-weight: 900;
text-align: center;
padding: 0px 8px;
white-space: nowrap;

}

.ss_notout {
position: relative;
right: -0.30rem;
}
</style>
</head>

<body>

</body>
</html>

Notes:

The CSS shows the various styles used in the reports. You can change the style settings to match fonts and colours to your own web site. You can also place this in its own file or incorporate these CSS tags in your web site's master CSS sheet.
The <script> section is the code that renders the relevant report. The linkreport.aspx page serves up HTML tables which get styled by the preceding CSS styling info.
You can include any reports that are generated from the ‘reports’ section of the Cricket Statz online admin panel by substituting the appropriate mode, club, grade, etc. parameters in the above script “src=” examples.
If you want to display a match (using &mode=100) but don't know the match ID then you can use the parameters &ground=[groundname]&datetime=[datetimeplayed] to fetch the match report instead
You can change the default number of entries on the report by changing the &limit= value (up to 999)
You can turn on player links to open in a new page by adding a &newpage=1 switch to the URL
A small number of reports require admin panel login and cannot be embedded due to their size and personal information

Using json (Advanced)

Developers can access a json version of report tables by calling https://www2.cricketstatz,com/ss/rrj.aspx and using the same GET parameters. Note that this approach requires custom endpoint javascript coding and is for advanced developers only.