Not registered? Register

Live Widget

Displays list your live running servers with online drivers, best laps and links to join the game or navigate to live timing page. The list automatically refreshes always displaying the actual situation.


Before You Begin

Before you setup the widget, you need to have access to the source code for your website.


The following instructions describe how to add the widget snippet your site. They assume

  • You have added your league on LiveRacers

  1. Copy and paste following snippet into your web page <head>...</head> section. Ensure the snippet is only present once on your website at all times. In case you don't have access to the <head> section, paste the snippet anywhere into the <body> section, but make sure it's only ever present once on the website.


    <script type="text/javascript">	     
    	window._lr = {			
    		url: 'http://[domain].liveracers.info' // where [domain].liveracers.info is the address of the domain you want to monitor
    	};
    	(function () {
    		var lr = document.createElement('script'); lr.type = 'text/javascript'; lr.async = true;
    		lr.src = window._lr.url + '/Scripts/api.js';
    		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(lr, s);
    	})();	
    </script>
  2. Position the following element that will contain the list of live servers on your page (inside <body>...</body>).


    <div id="lr-servers"></div>
  3. Deploy your website and refresh the page. The container with lr-servers element should now contain a widget with live servers, looking similarly to these (depending on selected theme):


Optional Settings


Themes


It is possible to customize the way Widgets look and feel. You can choose from the following themes

  • light (default)

  • dark

To apply a theme to a widget, set the widget's element attribute 'theme' to desired value. Example


<div id="lr-servers" theme="dark"></div>

Note that dark theme background is transparent, so you can (and have to) choose the background color.


Orientation


It is also possible to customize the orientation of the widgets, stretching it horizontally or vertically

  • vertical (default)

  • horizontal

To apply orientation to a widget, set the widget's element attribute 'orientation' to desired value:


<div id="lr-servers" orientation="horizontal"></div>

Width


By default a widget is 200px wide. To customize the widget width, you can use the 'width' attribute


<div id="lr-servers" width="160px"></div>

Join Link


Some applications allow joining your servers via web link. This is enabled by default. If you wish to hide this link, you can set this setting to false

  • true (default)

  • false

<div id="lr-servers" canjoin="true"></div>

Filter


If you want to hide some of the active servers, you can define a filter function. E.g. you might only want to show servers that start with "Public". To do this, you need to define a javascript function in "window" and annotate the lr-servers element with the name of your function. On every widget refresh, this function will be called for each server, passing you server description as javascript object containing properties like "GameName" or "TrackName". See the servers refresh service call Json for full list of properties


<script type="text/javascript">
	window.filterLrServers = function (server) {
		return server.GameName.indexOf('Public') === 0; // example filtering logic evaluated for every server object only showing servers that start with 'Public'. Return 'true' to show server.
	}
</script>

<div id="lr-servers" filter="filterLrServers"></div>


Widget Plugins

Selection of official and community plugins for easy integration of LiveRacers widgets into popular web tools. Any contributions are more than welcome!

  • WordPress

    Community (unofficial) plugin provided by Phil Lewis


If you have any questions or problems, contact support@liveracers.com.