Website Integration

RACE RESULT offers numerous options to embed online registration and results seamlessly in your event website.

This is done through small Javascript snippets that load the results directly into your website (no iframes). All CSS styles from your website will be applied to the online registration and results as well. Where needed, you can add CSS to fine-tune the appearance.

The Javascript code that needs to be copied and pasted to your website can be found in Basic Settings->Website Integration.

The below articles explain the different types of embed code in more detail.

For the results this may look like this:

<div id="divRRPublish" class="RRPublish"></div> 
<script type="text/javascript" src="//my.raceresult.com/RRPublish/load.js.php?lang=en"></script> 
<script type="text/javascript"> 
<!--
   var rrp=new RRPublish(document.getElementById("divRRPublish"), 58385, "results"); 
--> 
</script> 
<style>
   /* Add custom CSS here or elsewhere to change the design */ 
</style>

 

In the screenshot above, some of the colors of the results frame have been modified, this is done using custom CSS in the style tags. 

Embed Participants, Results, and Live Lists

In order to embed the Participants, Results, or Live lists you need to copy the corresponding source code. You might notice that all three of these are very similar. There are a few key things to note that make them different and some features that allow you to customize these lists.

Here is the source code for reference.

<div id="divRRPublish" class="RRPublish"></div>
<script type="text/javascript" src="https://my.raceresult.com/RRPublish/load.js.php?lang=en"></script>
<script type="text/javascript">
<!--
    var rrp=new RRPublish(document.getElementById("divRRPublish"), 123456, "results");
    rrp.ShowTimerLogo=true;
    rrp.ShowInfoText=false;
-->
</script>
<style>
  /* Add custom CSS here or elsewhere to change the design */
</style>

This source code loads data based on the Event ID specified and the page specified. All of the sections in red are variables you can change to customize the embedded code. The above example will load the Results list for event 123456. If you want to load the Participants or Live lists you will need to change "results" in red to either "participants" or "live".

There are also two boolean options to turn on and off features.

  • rrp.ShowTimerLogo - when set to true will show the timers logo at the bottom of the results.
  • rrp.ShowInfoText - when set to true will show the info text defined for the specified page.

Embed Registration and Online Self-Service

The online registration source code allows you to embed the registration portal directly on your site. This also allows you to link the [ChangeLink] for Online Self Service directly to your site when using the ChangeLink() function.

To start you will need to embed the online registration source code on your site, the same code will enable both standard registration and online self service.

<div id="divRRRegStart" class="RRRegStart"></div>
<script type="text/javascript" src="https://my.raceresult.com/RRRegStart/load.js.php?lang=en"></script>
<script type="text/javascript">
<!--
  var rrp=new RRRegStart(document.getElementById("divRRRegStart"), 230672);
  rrp.ShowInfoText=false;
-->
</script>
<style>
  /* Add custom CSS here or elsewhere to change the design */
</style>

There are 2 variables here as highlighted in red. 

  • EventID - the ID of the event to be embedded.
  • rrp.ShowInfoText - Either true or false to define whether the info text of the registration page should also be included.