Opta Widgets — Help Page

Widget configuration

In order for the widgets to be properly configured, two scripts need to be included in the HTML document head of each embedding page:

1. The generic widgets scripts, contained in opta.global.php, need to be inserted into the HTML head before any JavaScript libraries (such as jQuery, Mootools, etc.) are included.

   	<script type="text/javascript" src="http://widgets.cloud.opta.net/js/opta.global.php"></script>

2. Immediately following opta.global.php at the top of the HTML head, a short customer-specific initialisation script must be included. This script has 1 required variable, _optaParams, and 1 optional variable, _optaCallbackParams.

   1. _optaParams (required): _optaparams takes 1 required parameter and up to 4 optional parameters. These parameters are:

      • custID (required): custID is a unique alphanumeric value which is used for authentication to ensure you have the necessary permissions to run the widgets.
      • anim (optional): anim determines how the widgets load on the page and takes one of two possible values: 'opta' (which loads the widgets with a fade-in animation) and 'none' (the deafult value, which simply loads the widgets without animation).
      • language (optional): language tells the widgets which language to use. The default is 'en' (English). Other possible values at this time are 'de' (German), 'es' (Spanish), 'fr' (French), 'it' (Italian), and 'pt' (Portuguese).
      • timezone (optional): timezone takes a numeric offset from GMT to determine the widgets' timezone. The default value is '0', which equates to BST. '1' is one hour ahead of GMT; '-6' is six hours behind GMT.
      • callbacks (optional): callbacks is an array of function names for the widgets to call after they have loaded on the page. These can be client-defined functions. For example, if a client desires a specific functionality that doesn't exist in the standard widgets installation, the client can develop a JavaScript function to implement that functionality, link to the JavaScript file with the function, and list the name of the function in callbacks. There are some standard callback functions included in the standard widgets installation, which can be accessed by defining $jqOpta.callbackLib as part of callbacks. Any other functions will require additional JavaScript, either developed by the client, Opta, or a third party.

   2. _optaCallbackParams (optional): _optaCallbackParams is used to access the standard callbacks library to create links within the widgets. It can take up to three parameters, depending on whether the client wants to create a link on a player name, a team, or a match:

      • linkPlayer (optional)
      • linkTeam (optional)
      • linkMatch (optional)

      These three parameters each take two parameters:

      • linkTarget (required): linkTarget takes the path to the page the widget is linking to. It can either be a link to an id within the page (e.g., '#id'), an absolute link to a different website (e.g., 'http://www.optasports.com/'), or a relative link to a page within the same website (e.g., 'playerinfo/index.php').
      • widgets (required): widgets takes a list, in array format, of all the widgets these links will be applied to. For example, "widgets: ['fixtures', 'standings']" will apply links to the fixtures and standings widgets only.

3. Here is an example of the bare minimum code to initialise the widgets:

	<script type="text/javascript">
		// <![CDATA[
		var _optaParams = {
			custID:		'your unique customer id here',
		};
		// ]]>
	</script>
		

That code will run the widgets with the client's unique customer id and the default values for anim ('none'), language ('en'), timezone ('0'), and callbacks (none).

And here is an example of code to initialise the widgets with several parameters defined:

	<script type="text/javascript">
		// <![CDATA[
		var _optaParams = {
			custID:		'your unique customer id here',
			anim:		'opta',
			language:	'en',
			callbacks:	[$jqOpta.extractLineups,$jqOpta.callbackLib]
		},
		_optaCallbackParams = {
			linkPlayer:	{
				linkTarget:	'#',
				widgets:	['fixtures']
			}
		};
		// ]]>
	</script>