You can embed the pages from my.raceresult.com on your own site using some simple Javascript. To find the source code for this you open any of your event files and navigate to my.raceresult.com > Website integration section.

You can use either the HTML code which uses javascript, or the Wordpress plugin, although this is much more limited.

Dynamic Lists

Since each embedded page uses two key variables (Event ID and page), it is possible to create a single page to handle multiple events or event different pages. You can do this by passing a variable through the web page URL into the embedded Javascript.

Here you can see the eventid variable is passed from the URL into the function to load the event id specified in the URL.

<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"), eventid, "results");
        rrp.ShowTimerLogo=true;
        rrp.ShowInfoText=false;
        -->
    </script>
    <style>
        /* Add custom CSS here or elsewhere to change the design */
    </style>

Embedding Different Languages

By default the embed code includes the language parameter for the current working language, it is possible to change the language for lists and registration according to your needs.

Default Browser Language

Removing the lang parameter from the URL will allow the script to then query the language of the browser and will automatically use this language, this is the same behaviour as used on my.raceresult.com

Fixed Language

You can build out a web page for each language. Here you can see the language is defined as English by setting the lang variable to en.

<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>

Alternatively this parameter could be passed dynamically from a query parameter, however this would require additional work to implement correctly.

For more information on how multiple languages work within RACE RESULT 12 and a list of all supported language codes, you can check out Multi-Lingual Online-Registration.

Embed Multiple Lists on the Same Page

When embedding multiple lists on a single page you need to define unique div ids for each. By default, the source code for embedding participants, results, and live pages uses the same div id.

This portion of the code shows the div that will contain the loaded page. The id divRRPublish will be the same for all three lists.

<div id="divRRPublish" class="RRPublish"></div>

With the HTML language ids have to be unique. If you want to embed multiple lists on a single page this id needs to be changed. For example, you could add an extension to the name like this

<div id="divRRPublish_results" 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_results"), 123456, "results");
	rrp.ShowTimerLogo=true;
	rrp.ShowInfoText=false;
-->
</script>
<style>
  /* Add custom CSS here or elsewhere to change the design */
</style>

In this example, divRRPublish is changed to divRRPublish_results. This creates a unique id that the other lists do not use. Note the variable is changed in two places as shown in bold in the example.

Embed a list of events

If you want to embed a list of all of the events in your RACE RESULT account you can do so by embedding the List of Events source code on your site.

<link rel="stylesheet" type="text/css" href="https://my.raceresult.com/RREvents/style.css">
<div class="EventTable" id="tEventTable">
<div><div>&nbsp;</div><div>&nbsp;</div><div>City</div><div>Event</div><div>Date</div></div>
</div>
<script type="text/javascript" src="https://my.raceresult.com/RREvents/RREvents.js"></script>
<script type="text/javascript">
<!--
	var options= { dateFormat : 'mm/dd/yyyy' };
	var rre=new RREvents(document.getElementById("tEventTable"), null, 'en', options);
	rre.server="https://my.raceresult.com";
	rre.user=11111;
	//rre.year=2017;
	//rre.group=1234;
	//rre.eventlink="http://your.webseite.com/events/show?eventid=[eventid]";
	//rre.openInNewWindow=false;
	rre.loadEvents(function(resultSize) { return true; });
-->
</script>

This source code has several variables that allow you to customize what events are shown.

rre.user - This defines the RACE RESULT user account to pull events from
rre.year - This will filter events so that only events from the specified year will show
rre.group - This will filter the list to only show events in the specified group
rre.eventlink - If you have results embedded on your own site you can use this variable to link directly to that page. Note the eventid URL parameter at the end of the URL. You can use this with a dynamic results page list to lookup results from any event id.
rre.openInNewWindow - If set to true, when an event is selected it will open in a new window.

Any variables that have the // before them are commented out. This means they will not be loaded.

Customize with CSS

You can customize your embedded results using CSS. This allows you to change anything from font size to button colors. There are a lot of options here. This section will give an example of a basic change and explain the process of locating an element to make a small change. Keep in mind that any CSS code that is added in the Online Registration > Basic Settings section will also be applied here.

Basic CSS Editing

A basic example of changing CSS could be to change the font color of the entire page. We can do this by adding a style to the <html> tag.

<div id="divRRPublish_results2" 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_results2"), 123456, "results");
    rrp.ShowTimerLogo=true;
    rrp.ShowInfoText=false;
    -->
</script>
<style>
    html {
        color: red;
    }
</style>

Here we use the CSS field color to assign a color of red. This will change the color of all text on the page to red, However, if there is text on the page that has its own style then that text will not be overwritten. You will see this with the text link to show all participants.