Not registered? Register

Live Widget

Live list of your servers with description, online drivers, best laps and links to launch the game or watch live timing.


Live Example


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: 'https://liveracers.com',
        domains: ['domain'] //or multiple domains: ['domain1', 'domain2']
    };
    (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


Support for multiple Domains


Specify one or more domains in the 'domains' property of the 'window._lr'


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 widget background is transparent, so the widget will use the background color of your website


Width


By default a widget width is 200px. Minumum width of this widget is 160px. To customize the widget width, you can use the 'width' attribute


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

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>

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.