Platform integration

You can show regatta results, an entry list or a ranking leaderboard directly on your own website – e.g. the website of a club, an organizer or a class association. All it takes is pasting a short JavaScript snippet generated in the Upwind24 panel into your page. The embedded table fetches the latest data on its own, so new results and entries appear on your website without any extra work.

Before you start

• You need an Upwind24 account – any account type will do. The integration settings are in the panel menu: Profile → Platform integration.
• You can embed tables of any regatta or ranking published in Upwind24, not only your own. The feature does not depend on the regatta plan.
• You need to be able to edit the HTML of the page where the table should appear (e.g. a Custom HTML block in your CMS).

How does it work?

The Platform integration page consists of three cards:

• Access token – a unique key of your account, which the embedded code attaches to every data request.
• Authorized domains – the list of domains on which the embedded tables may be displayed.
• Table embedding – a generator of ready-to-paste code.

A table is displayed only when the code contains a valid token and the page you paste it into belongs to one of the authorized domains. This way nobody can use your code on another website.

Step 1: Check your access token

The token is created automatically the first time you open the Platform integration page. You don’t need to copy it by hand – the code generator inserts it into the code for you.

If you need the token elsewhere, click the copy icon in the Access token field – you will see the message Access token copied to clipboard.

Regenerating the token

The Regenerate button creates a new token and immediately invalidates the current one. All tables embedded with the old token stop displaying until you replace the code on your pages. Regenerate the token only when you have a reason to – e.g. to cut off a website you don’t control.

Step 2: Add authorized domains

1. On the Authorized domains card, click Edit.

2. In the Domains field, enter the domains of the websites where you will embed the tables – one per line.

3. Click Save changes. You will see the message Authorized domains updated.

How to enter domains:

• example.com – only the example.com domain itself.
• *.example.com – all subdomains, e.g. www.example.com or results.example.com, but not example.com itself. If your website works at both addresses, add both lines, as in the screenshot above.
• You can also paste a full page address – the protocol, port and path are ignored, e.g. https://www.example.com/results means the www.example.com domain.
• A domain covers both http:// and https:// addresses, with any port.

Tip

Want to try the table on your computer first? Add a localhost line to the list – the table will then also be displayed on a page running locally, e.g. at http://localhost:3000. You can remove the line once your website is live.

Step 3: Generate the embed code

1. On the Table embedding card, choose the Table type:

   • Regatta results – the leaderboards of all regatta divisions,
   • Entry list – the regatta entries split into divisions,
   • Ranking leaderboard – the leaderboards of the selected ranking.

2. In the Regatta field (or Ranking – for a ranking leaderboard), start typing the name and pick an item from the list.

3. Choose the Table language: Polski or English. Column headers, the search field and table messages are displayed in this language.

4. If your website has a dark background, select Dark table theme.

5. Click Generate embed code. The code appears below the form – copy it with the copy icon in its top right corner.

If the list of authorized domains is empty, you will see a warning above the form – you can generate the code, but the table won’t be displayed on any website until you add a domain.

Step 4: Paste the code into your website

Paste the copied code into the HTML of your page, where the table should appear. The generated code looks like this:

<div id="upwind24-table"></div>

<script src="https://api.upwind24.com/embed/script.js?key=YOUR_TOKEN&callback=initUpwind24Table&lang=en" async defer></script>
<script>
    function initUpwind24Table() {
        new Upwind24.Results(document.getElementById('upwind24-table'), 'REGATTA_ID', {
            onLoad: function () {
                // Callback after the table is loaded
            }
        });
    }
</script>

The code consists of three parts:

• <div id="upwind24-table"> – the container the table is displayed in. The table adapts to its width.
• <script src="…/embed/script.js?…"> – the Upwind24 script with your token (key), the name of the start function (callback), the table language (lang) and optionally the dark theme (dark=1).
• the initUpwind24Table() function – the script calls it once loaded, and it creates the table for the selected regatta or ranking.

Once you save the page, the table shows up-to-date data right away:

What do your visitors see?

• Classification choice – the Classification drop-down (in results and rankings) or Division (in the entry list) switches the table between divisions and fleets.
• Search – the Search field filters the table, e.g. by name, club or sail number.
• Sorting – clicking a column header sorts the table by that column.
• Fitting the width – columns that don’t fit on the screen (e.g. the results of individual races on a phone) are hidden. The arrow at the start of a row expands it and shows the hidden data.

The table columns are the same as on the regatta page in Upwind24: the results table shows the columns selected in the regatta results settings, and the entry list shows the columns from the entry list settings. The results table shows only published results.

Tip

Choose the Table language that matches the language of the page you embed the table on. If your website has English and Polish versions, generate two snippets – one per language – and paste them into the matching versions of the page.

Advanced: several tables on one page

The generated code creates one table. To show several tables on one page – e.g. results and the entry list – load the script once, add a separate container with a different id for each table and create all tables in one start function:

<div id="upwind24-results"></div>
<div id="upwind24-entries"></div>

<script src="https://api.upwind24.com/embed/script.js?key=YOUR_TOKEN&callback=initUpwind24Tables&lang=en" async defer></script>
<script>
    function initUpwind24Tables() {
        new Upwind24.Results(document.getElementById('upwind24-results'), 'REGATTA_ID');
        new Upwind24.Entries(document.getElementById('upwind24-entries'), 'REGATTA_ID', { dark: true });
    }
</script>

Available table types:

Regatta results

new Upwind24.Results(element, 'REGATTA_ID_OR_SLUG', options);

Entry list

new Upwind24.Entries(element, 'REGATTA_ID_OR_SLUG', options);

Ranking leaderboard

new Upwind24.Ranking(element, 'RANKING_ID_OR_SLUG', options);

Instead of the identifier from the generated code, you can use the slug of the regatta or ranking – the last part of its Upwind24 address (e.g. regaty-o-puchar-zatoki-2026).

Script URL parameters:

Parameter	Description
key	Your access token. Required.
callback	The name of a global function called once the script is loaded – this is where you create the tables.
lang	The table language: pl or en. Without it, the script uses the page language (the lang attribute of the <html> tag), falling back to English.
dark	1 enables the dark theme for all tables on the page.

Table options (the third, optional argument):

Option	Description
onLoad	A function called once the table is displayed on the page.
dark	true or false – the theme of this one table, regardless of the script’s dark parameter.

Questions and answers

Instead of the table, I see “Could not connect to the Upwind24 server.” What’s wrong?

Most often the page with the code doesn’t belong to any of the authorized domains – the browser then blocks the data requests. Check that the list contains exactly the domain you see in the address bar (with or without www) and that the token in the code hasn’t been regenerated – if it has, generate the code again and replace it on your page.

The table says “There are no results published yet.” Why?

The organizer hasn’t published the results of any division yet. The table shows them automatically once they are published – you don’t need to change the code. The entry list equivalent is There are no entries received yet.

Do I need to update the code after every race?

No. The code points to a regatta or a ranking, not to specific data – the table fetches the latest results and entries every time the page is displayed. You only replace the code after regenerating the token or to show a different regatta.

What’s next?

Regatta settingsChoose the columns of the results table and the entry list.

Results and scoringEnter and publish the results shown in the embedded table.