Touch-Line Data Systems

Euro 2016 widgets

This document provides instructions on how to integrate Touch-Line's Euro 2016 widgets into your web pages.
The widgets have been developed to be as easy to implement as possible but should you have any questions after reading this documentation please feel free to contact us.

To use any of our Euro 2016 widgets you must include the javascript used to generate the widgets in your web page. Please place the following markup inside your page preferably in the html head tag :

<script type="text/javascript" src="http://euro2016.touch-line.com/js/widgets.js"></script>

This javascript file handles the generation of the widgets automatically so all you need to do is include the correct HTML markup for each widget in your content. Please note you only need to include the javascript file once.

The basic requirement to implement any of our widgets is that you must place a div on your page with the class relating to the type of widget required.

<div class="widget_class"></div>

We will also supply you with a client code for your site and this must be included as a data attribute in each div. You must also supply us with your domain name to enable the widgets to work on your site.

<div class="widget_class" data-site="####"></div>

The widgets are fully responsive by default and will fill the width of their parent container. Please note that this is all done with css so if you wish to apply your own stylesheet then you must handle the responsive design yourself. Alternatively you can build your own style on top of the default style we supply with the widgets.

Beyond these minimum requirements you can customise each widget using a series of additional attributes. Click on a widget from the list below to see full customisation details:

Group Table

This widget displays the Euro 2016 group tables which can be switched between using selector arrows. To generate a group table widget please set the div class to "tlds_euro_group_table".


The markup required to display the above widget is :

<div class="tlds_euro_group_table" data-site="####"></div>

If you wish to generate a single group table then add the the "data-group" attribute with the letter of the group you wish to display.

<div class="tlds_euro_group_table" data-site="####" data-group="C" ></div>

This produces the widget below :


The full list of attributes for this widget are:

Attribute Description Values
data-style Determines whether default style is loaded. If you set this to "no" you must handle responsive design with your own style sheet. yes (default)
no
data-group Specifies a single group table to be displayed. A-F
data-default Specifies which group should be displayed as default with group selector. A-F
data-games Specifies whether to include the results grid at larger widths. yes (default)
no
data-flag-path Allows you to use your own flag images by specifying an absolute or relative path.
(e.g. http://www.mysite.com/images/flags/)
Your flag files should be named using the three letter FIFA code for each country.
URL
data-flag-ext Used in conjuntion with the data-flag-path attribute to specify the file extension of your flag images. png (default)
svg
jpg
gif

Group Games

This widget displays the games for each group which can be switched between using selector arrows. To generate a group games widget please set the div class to "tlds_euro_group_games".


The markup required to display the above widget is :

<div class="tlds_euro_group_games" data-site="####"></div>

If you wish to generate a single group widget then add the the "data-group" attribute with the letter of the group you wish to display.

<div class="tlds_euro_group_games" data-site="####" data-group="C" ></div>

This produces the widget below :


The full list of attributes for this widget are:

Attribute Description Values
data-style Determines whether default style is loaded. If you set this to "no" you must handle responsive design with your own style sheet. yes (default)
no
data-group Specifies a single group to be displayed. A-F
data-default Specifies which group should be displayed as default with group selector. A-F
data-utc-offset Specifies the number of hours between UTC and the clients local time (ignoring daylight saving time). -12 to 12
data-flag-path Allows you to use your own flag images by specifying an absolute or relative path.
(e.g. http://www.mysite.com/images/flags/)
Your flag files should be named using the three letter FIFA code for each country.
URL
data-flag-ext Used in conjuntion with the data-flag-path attribute to specify the file extension of your flag images. png (default)
svg
jpg
gif

All Games

This widget displays all games for the competition or the games for a specific team or stadium . To generate a games widget please set the div class to "tlds_euro_games".


The markup required to display the above widget is :

<div class="tlds_euro_games" data-site="####"></div>

If you wish to generate a widget showing only games for a particular team then add the the "data-team" attribute with the three letter FIFA code of the team you wish to display games for.

<div class="tlds_euro_games" data-site="####" data-team="GER" ></div>

This produces the widget below :


The full list of attributes for this widget are:

Attribute Description Values
data-style Determines whether default style is loaded. If you set this to "no" you must handle responsive design with your own style sheet. yes (default)
no
data-team Specifies a team to show games for by using the three letter FIFA code for the team. FIFA code
data-stadium Specifies a stadium to show games for by using a stadium id. 85 (Parc des Princes)
84 (Parc Olympique Lyonnais)
86 (Stade Bollaert-Delelis)
76 (Stade de Bordeaux)
208 (Stade de France)
510 (Stade de Nice)
488 (Stade Geoffroy-Guichard)
502 (Stade Municipal)
81 (Stade Pierre-Mauroy)
83 (Stade Vélodrome)
data-type Used to show the next fixture(s) or the latest result(s) in the competition or for a specific team. next
latest
data-utc-offset Specifies the number of hours between UTC and the clients local time (ignoring daylight saving time). -12 to 12
data-flag-path Allows you to use your own flag images by specifying an absolute or relative path.
(e.g. http://www.mysite.com/images/flags/)
Your flag files should be named using the three letter FIFA code for each country.
URL
data-flag-ext Used in conjuntion with the data-flag-path attribute to specify the file extension of your flag images. png (default)
svg
jpg
gif

Top Scorers

This widget displays the top goal scorers in terms of both players and teams. To generate a top scorers widget please set the div class to "tlds_euro_top_scorers".


The markup required to display the above widget is :

<div class="tlds_euro_top_scorers" data-site="####"></div>

You can change the maximum number of records shown by using the "data-numb" attribute.

<div class="tlds_euro_top_scorers" data-site="####" data-numb="3" ></div>

This produces the widget below :


The full list of attributes for this widget are:

Attribute Description Values
data-style Determines whether default style is loaded. If you set this to "no" you must handle responsive design with your own style sheet. yes (default)
no
data-type Determines whether both player and team lists should be returned or just one or the other. both (default)
players
teams
data-numb Determines how many records to return for each list. 5 (default)
data-place-holders Determines whether to display empty placeholders when the number of data records available is less than the number requested. yes (default)
no
data-flag-path Allows you to use your own flag images by specifying an absolute or relative path.
(e.g. http://www.mysite.com/images/flags/)
Your flag files should be named using the three letter FIFA code for each country.
URL
data-flag-ext Used in conjuntion with the data-flag-path attribute to specify the file extension of your flag images. png (default)
svg
jpg
gif

Squad Stats

This widget displays the squad statistics for a team. To generate a squad statistics widget please set the div class to "tlds_euro_squad_stats". You will also need to supply a FIFA country code for the squad you wish to display using the "data-team" attribute. The example below uses the FIFA code "GER" to display Germany's squad.


The markup required to display the above widget is :

<div class="tlds_euro_squad_stats" data-team="GER" data-site="####"></div>

The full list of attributes for this widget are:

Attribute Description Values
data-style Determines whether default style is loaded. If you set this to "no" you must handle responsive design with your own style sheet. yes (default)
no
data-team Specifies a team to show squad stats for by using the three letter FIFA code for the team. FIFA code
data-type Determines whether both qualifier and finals statistics should be returned or just one or the other. both (default)
qualifiers
finals

Scoreboard

This widget displays live scores and the latest result(s), or the next fixture(s) and latest result(s) if no match is currently live. To generate a scoreboard widget please set the div class to "tlds_euro_scoreboard". The scoreboard will update every 30 seconds.


The markup required to display the above widget is :

<div class="tlds_euro_scoreboard" data-site="####"></div>

When a match in the scoreboard is running live the time of the match becomes a status, along with a match minute, and is displayed in red with the default style as shown below :


If you wish to apply your own styles that change depending on whether a match is live or not then the outer div element for each match will have either a class of "fixture", "live" or "result" to represent the three main states. When a match becomes a result the status will change to reflect this as shown below :


When a match goes to a penalty shootout the match status will be replaced by the penalty score, which in the default style is highlighted red whilst still live and then changes back to black when the match is over. An example of a live penalty shootout is shown below :


The full list of attributes for this widget are:

Attribute Description Values
data-style Determines whether default style is loaded. If you set this to "no" you must handle responsive design with your own style sheet. yes (default)
no
data-utc-offset Specifies the number of hours between UTC and the clients local time (ignoring daylight saving time). -12 to 12
data-flag-path Allows you to use your own flag images by specifying an absolute or relative path.
(e.g. http://www.mysite.com/images/flags/)
Your flag files should be named using the three letter FIFA code for each country.
URL
data-flag-ext Used in conjuntion with the data-flag-path attribute to specify the file extension of your flag images. png (default)
svg
jpg
gif

Match Statistics

This widget displays post-match statistics for a given match. To generate a match statistics widget please set the div class to "tlds_euro_match_stats". You will also need to supply a match number for the specific match you wish to display using the "data-match-no" attribute. The example below shows statistics for the second match in the tournament.


The markup required to display the above widget is :

<div class="tlds_euro_match_stats" data-site="#### data-match=no="2"></div>

The full list of attributes for this widget are:

Attribute Description Values
data-style Determines whether default style is loaded. If you set this to "no" you must handle responsive design with your own style sheet. yes (default)
no
data-match-no The number of the match in the tournament to show statistics for. This attribute is required 1-51
data-match-header Determines whether to show the match header with the statistics. yes (default)
no
data-home-color Allows the statistics bar background color of the home team to be changed. Value can either be in either hex or rgb format. e.g. #FF0000
or
rgb(255,0,0)
data-away-color Allows the statistics bar background color of the away team to be changed. Value can either be in either hex or rgb format. e.g. #FF0000
or
rgb(255,0,0)
data-flag-path Allows you to use your own flag images by specifying an absolute or relative path.
(e.g. http://www.mysite.com/images/flags/)
Your flag files should be named using the three letter FIFA code for each country.
URL
data-flag-ext Used in conjuntion with the data-flag-path attribute to specify the file extension of your flag images. png (default)
svg
jpg
gif