F1 Widgets

renderRacePage

Code voorbeeld
<div id="race-page"></div>
<link rel="stylesheet" href="https://f1.apidata.tech/f1-widgets.css">
<script src="https://f1.apidata.tech/f1-widgets.js"></script>
<script>
(async () => {
  await F1Widgets.init({ proxyUrl: 'https://f1.apidata.tech/api' });
  F1Widgets.renderRacePage('race-page', {
    raceLink: '/f1-circuits/{slug}',
    sessionLink: '/f1-sessies/{slug}'  // vrije-training-1-gp-australie-2026
  });
})();
</script>

renderCountdown

Code voorbeeld
<div id="countdown"></div>
<link rel="stylesheet" href="https://f1.apidata.tech/f1-widgets.css">
<script src="https://f1.apidata.tech/f1-widgets.js"></script>
<script>
(async () => {
  await F1Widgets.init({ proxyUrl: 'https://f1.apidata.tech/api' });
  F1Widgets.renderCountdown('countdown', {
    raceLink: '/f1-circuits/{slug}',
    sessionLink: '/f1-sessies/{slug}'  // kwalificatie-gp-australie-2026
  });
})();
</script>
Code voorbeeld
<div id="race-weekend"></div>
<link rel="stylesheet" href="https://f1.apidata.tech/f1-widgets.css">
<script src="https://f1.apidata.tech/f1-widgets.js"></script>
<script>
(async () => {
  await F1Widgets.init({ proxyUrl: 'https://f1.apidata.tech/api' });
  F1Widgets.renderRaceWeekend('race-weekend', {
    raceLink: '/f1-circuits/{slug}',
    sessionLink: '/f1-sessies/{slug}'  // race-gp-australie-2026
  });
})();
</script>
Code voorbeeld
<div id="standings"></div>
<link rel="stylesheet" href="https://f1.apidata.tech/f1-widgets.css">
<script src="https://f1.apidata.tech/f1-widgets.js"></script>
<script>
(async () => {
  await F1Widgets.init({ proxyUrl: 'https://f1.apidata.tech/api' });
  F1Widgets.renderStandings('standings', {
    driverLink: '/f1-coureurs/{slug}',
    teamLink: '/f1-teams/{slug}'
  });
})();
</script>
Code voorbeeld
<div id="standings-compact"></div>
<link rel="stylesheet" href="https://f1.apidata.tech/f1-widgets.css">
<script src="https://f1.apidata.tech/f1-widgets.js"></script>
<script>
(async () => {
  await F1Widgets.init({ proxyUrl: 'https://f1.apidata.tech/api' });
  F1Widgets.renderStandings('standings-compact', {
    compact: true,
    driverLink: '/f1-coureurs/{slug}',
    teamLink: '/f1-teams/{slug}',
    moreLink: '/f1-stand-2026'  // "Meer laden" wordt link ipv uitklappen
  });
})();
</script>
Code voorbeeld
<div id="driver-standings"></div>
<link rel="stylesheet" href="https://f1.apidata.tech/f1-widgets.css">
<script src="https://f1.apidata.tech/f1-widgets.js"></script>
<script>
(async () => {
  await F1Widgets.init({ proxyUrl: 'https://f1.apidata.tech/api' });
  F1Widgets.renderDriverStandings('driver-standings', {
    driverLink: '/f1-coureurs/{slug}'
  });
})();
</script>
Code voorbeeld
<div id="constructor-standings"></div>
<link rel="stylesheet" href="https://f1.apidata.tech/f1-widgets.css">
<script src="https://f1.apidata.tech/f1-widgets.js"></script>
<script>
(async () => {
  await F1Widgets.init({ proxyUrl: 'https://f1.apidata.tech/api' });
  F1Widgets.renderConstructorStandings('constructor-standings', {
    teamLink: '/f1-teams/{slug}'
  });
})();
</script>
Code voorbeeld
<div id="calendar-compact"></div>
<link rel="stylesheet" href="https://f1.apidata.tech/f1-widgets.css">
<script src="https://f1.apidata.tech/f1-widgets.js"></script>
<script>
(async () => {
  await F1Widgets.init({ proxyUrl: 'https://f1.apidata.tech/api' });
  F1Widgets.renderCalendar('calendar-compact', {
    compact: true,
    raceLink: '/f1-circuits/{slug}',
    moreLink: '/f1-kalender-2026'
  });
})();
</script>
Code voorbeeld (naam = link, chevron = top 3)
<div id="calendar"></div>
<link rel="stylesheet" href="https://f1.apidata.tech/f1-widgets.css">
<script src="https://f1.apidata.tech/f1-widgets.js"></script>
<script>
(async () => {
  await F1Widgets.init({ proxyUrl: 'https://f1.apidata.tech/api' });
  // Met raceLink: klik op naam = link, klik op chevron = top 3
  F1Widgets.renderCalendar('calendar', {
    seasonId: 26877,  // 2024 seizoen met voltooide races
    raceLink: '/f1-circuits/{slug}'
  });
})();
</script>
Code voorbeeld
<div id="results"></div>
<link rel="stylesheet" href="https://f1.apidata.tech/f1-widgets.css">
<script src="https://f1.apidata.tech/f1-widgets.js"></script>
<script>
(async () => {
  await F1Widgets.init({ proxyUrl: 'https://f1.apidata.tech/api' });
  F1Widgets.renderRaceResults('results', {
    driverLink: '/f1-coureurs/{slug}',
    stageId: 77479363,
    session: 'Race'
  });
})();
</script>
Code voorbeeld
<div id="circuit"></div>
<link rel="stylesheet" href="https://f1.apidata.tech/f1-widgets.css">
<script src="https://f1.apidata.tech/f1-widgets.js"></script>
<script>
(async () => {
  await F1Widgets.init({ proxyUrl: 'https://f1.apidata.tech/api' });
  F1Widgets.renderCircuit('circuit', {
    venueId: 343586  // Silverstone
  });
})();
</script>
Code voorbeeld
<div id="live-race"></div>
<link rel="stylesheet" href="https://f1.apidata.tech/f1-widgets.css">
<script src="https://f1.apidata.tech/f1-widgets.js"></script>
<script>
(async () => {
  await F1Widgets.init({ proxyUrl: 'https://f1.apidata.tech/api' });
  F1Widgets.renderLiveRace('live-race', {
    driverLink: '/f1-coureurs/{slug}'
  });
})();
</script>

renderDriversOverview

Code voorbeeld
<div id="drivers-overview"></div>
<link rel="stylesheet" href="https://f1.apidata.tech/f1-widgets.css">
<script src="https://f1.apidata.tech/f1-widgets.js"></script>
<script>
(async () => {
  await F1Widgets.init({ proxyUrl: 'https://f1.apidata.tech/api' });
  F1Widgets.renderDriversOverview('drivers-overview', {
    driverLink: '/f1-coureurs/{slug}'
  });
})();
</script>

renderTeamsOverview

Code voorbeeld
<div id="teams-overview"></div>
<link rel="stylesheet" href="https://f1.apidata.tech/f1-widgets.css">
<script src="https://f1.apidata.tech/f1-widgets.js"></script>
<script>
(async () => {
  await F1Widgets.init({ proxyUrl: 'https://f1.apidata.tech/api' });
  F1Widgets.renderTeamsOverview('teams-overview', {
    teamLink: '/f1-teams/{slug}'
  });
})();
</script>

renderDriverCards

Code voorbeeld
<div id="driver-cards"></div>
<link rel="stylesheet" href="https://f1.apidata.tech/f1-widgets.css">
<script src="https://f1.apidata.tech/f1-widgets.js"></script>
<script>
(async () => {
  await F1Widgets.init({ proxyUrl: 'https://f1.apidata.tech/api' });

  // Coureur overschrijvingen (optioneel)
  const driverOverrides = {
    "37920800": {
      birthplace: "Hasselt, België",
      nationality: "Nederlands",
      debut: "2015, Toro Rosso",  // Formule 1-carrière
      titles: 4,                   // Wereldtitels
      wins: 63,                    // Overwinningen
      poles: 40                    // Polepositions
    }
    // ... meer coureurs
  };

  // Alle coureurs tonen:
  F1Widgets.renderDriverCards('driver-cards', {
    driverLink: '/f1-coureurs/{slug}',
    driverOverrides
  });

  // Of specifieke coureur(s) - volle breedte bij 1 coureur:
  F1Widgets.renderDriverCards('driver-cards', {
    driverId: 171429,  // Max Verstappen
    driverLink: '/f1-coureurs/{slug}',
    driverOverrides
  });
})();
</script>

renderDriverCards (single)

Code voorbeeld
<div id="driver-card-single"></div>
<script>
(async () => {
  await F1Widgets.init({ proxyUrl: 'https://f1.apidata.tech/api' });

  // Specifieke coureur - volle breedte (voor coureur pagina):
  F1Widgets.renderDriverCards('driver-card-single', {
    driverId: 171429  // Max Verstappen
  });
})();
</script>

renderTeamCards

Code voorbeeld
<div id="team-cards"></div>
<link rel="stylesheet" href="https://f1.apidata.tech/f1-widgets.css">
<script src="https://f1.apidata.tech/f1-widgets.js"></script>
<script>
(async () => {
  await F1Widgets.init({ proxyUrl: 'https://f1.apidata.tech/api' });

  // Alle teams tonen:
  F1Widgets.renderTeamCards('team-cards', {
    teamLink: '/f1-teams/{slug}',
    driverLink: '/f1-coureurs/{slug}'
  });
})();
</script>

renderTeamCards (single)

Code voorbeeld
<div id="team-card-single"></div>
<script>
(async () => {
  await F1Widgets.init({ proxyUrl: 'https://f1.apidata.tech/api' });

  // Specifiek team - volle breedte (voor team pagina):
  F1Widgets.renderTeamCards('team-card-single', {
    teamId: 214851,  // Red Bull Racing
    driverLink: '/f1-coureurs/{slug}'
  });
})();
</script>

renderRacesOverview

Code voorbeeld
<div id="races-overview"></div>
<link rel="stylesheet" href="https://f1.apidata.tech/f1-widgets.css">
<script src="https://f1.apidata.tech/f1-widgets.js"></script>
<script>
(async () => {
  await F1Widgets.init({ proxyUrl: 'https://f1.apidata.tech/api' });

  F1Widgets.renderRacesOverview('races-overview', {
    raceLink: '/f1-races/{slug}'
  });
})();
</script>

How to Use

1. Start the Proxy Server

# Set your API token
export F1_API_TOKEN="your_api_key_here"

# Start the server
node server.js

2. Add Widget to Your Page

<!-- Add container -->
<div id="f1-standings"></div>

<!-- Include the widget CSS and script -->
<link rel="stylesheet" href="https://f1.apidata.tech/f1-widgets.css">
<script src="https://f1.apidata.tech/f1-widgets.js"></script>

<!-- Initialize and render -->
<script>
(async () => {
  await F1Widgets.init({ proxyUrl: 'https://f1.apidata.tech/api' });
  F1Widgets.renderCalendar('f1-standings');
})();
</script>

Lazy Loading

Alle widgets ondersteunen lazy loading. Hiermee laadt de widget pas als deze bijna in beeld komt (300px van tevoren). Dit bespaart API calls voor bezoekers die niet scrollen.

// Lazy loading inschakelen:
F1Widgets.renderStandings('sidebar-standings', { lazy: true });
F1Widgets.renderCalendar('sidebar-calendar', { lazy: true });

// Combineer met andere opties:
F1Widgets.renderDriverStandings('container-id', {
  lazy: true,
  driverLink: '/f1-coureurs/{slug}'
});

Available Widgets

renderDriverStandings

Driver championship standings with photos, flags, and points.

F1Widgets.renderDriverStandings('container-id');
F1Widgets.renderDriverStandings('container-id', { limit: 10 });
F1Widgets.renderDriverStandings('container-id', { seasonId: 26877 }); // 2024 season

// Met klikbare links naar coureur pagina's:
F1Widgets.renderDriverStandings('container-id', {
  driverLink: '/f1-coureurs/{slug}' // {slug} = max-verstappen, charles-leclerc, etc.
});

renderConstructorStandings

Constructor championship standings with team logos and colors.

F1Widgets.renderConstructorStandings('container-id');
F1Widgets.renderConstructorStandings('container-id', { seasonId: 26877 });

// Met klikbare links naar team pagina's:
F1Widgets.renderConstructorStandings('container-id', {
  teamLink: '/f1-teams/{slug}' // {slug} = red-bull-racing, ferrari, etc.
});

renderCalendar

Race kalender met Nederlandse namen, klikbare links en uitklapbare top 3.

F1Widgets.renderCalendar('container-id');
F1Widgets.renderCalendar('container-id', { seasonId: 26877 });
F1Widgets.renderCalendar('container-id', { compact: true }); // 3 races: vorige, volgende, +1

// Met klikbare links naar race pagina's:
F1Widgets.renderCalendar('container-id', {
  raceLink: '/f1-circuits/{slug}' // {slug} = gp-australie, gp-monaco, etc.
});

// Engelse namen (ipv Nederlandse):
F1Widgets.renderCalendar('container-id', { dutch: false });

renderCountdown

Live countdown to the next race with session schedule. Toont Nederlandse GP namen.

F1Widgets.renderCountdown('container-id');
F1Widgets.renderCountdown('container-id', { seasonId: 26877 });

// Met klikbare links naar race en sessie pagina's (template):
F1Widgets.renderCountdown('container-id', {
  raceLink: '/f1-circuits/{slug}',
  sessionLink: '/f1-sessies/{slug}' // kwalificatie-gp-australie-2026
});

// Of met custom links per sessie (object):
F1Widgets.renderCountdown('container-id', {
  raceLink: '/f1-circuits/{slug}',
  sessionLinks: {
    'Race': '/f1-races/race-gp-australie-2026',
    'Kwalificatie': '/f1-kwalificatie/kwalificatie-gp-australie-2026',
    'VT1': '/f1-trainingen/vt1-gp-australie-2026'
  }
});

renderRaceWeekend

Race weekend schedule with session times. Toont Nederlandse GP namen.

F1Widgets.renderRaceWeekend('container-id'); // Volgende race
F1Widgets.renderRaceWeekend('container-id', { stageId: 77480033 }); // Specifieke GP

// Met klikbare links naar race en sessie pagina's (template):
F1Widgets.renderRaceWeekend('container-id', {
  raceLink: '/f1-circuits/{slug}',
  sessionLink: '/f1-sessies/{slug}' // vrije-training-1-gp-monaco-2026
});

// Of met custom links per sessie (object):
F1Widgets.renderRaceWeekend('container-id', {
  raceLink: '/f1-circuits/{slug}',
  sessionLinks: { 'Race': '/custom-url', 'Kwalificatie': '/andere-url' }
});

renderRacePage

Uitgebreide race pagina met circuit info, schema en stats. Toont Nederlandse GP namen.

F1Widgets.renderRacePage('container-id'); // Volgende race
F1Widgets.renderRacePage('container-id', { stageId: 77480033 }); // Specifieke GP

// Met klikbare links naar race en sessie pagina's (template):
F1Widgets.renderRacePage('container-id', {
  raceLink: '/f1-circuits/{slug}',
  sessionLink: '/f1-sessies/{slug}' // race-gp-spa-2026
});

// Of met custom links per sessie (object):
F1Widgets.renderRacePage('container-id', {
  raceLink: '/f1-circuits/{slug}',
  sessionLinks: { 'Race': '/custom-url', 'Kwalificatie': '/andere-url' }
});

renderRaceResults

Sessie resultaten met tabs voor VT1-3, Kwalificatie, Sprint en Race.

F1Widgets.renderRaceResults('container-id');
F1Widgets.renderRaceResults('container-id', { seasonId: 26877 });
F1Widgets.renderRaceResults('container-id', { stageId: 77480033 }); // Specifieke GP
F1Widgets.renderRaceResults('container-id', { session: 'Qualification' }); // Specifieke sessie

Beschikbare sessienamen voor session:

Practice 1 Practice 2 Practice 3 Sprint Qualification Sprint Race Qualification Race

renderStandings

Compact klassement met Coureurs/Teams tabs. Toont altijd het huidige seizoen.

F1Widgets.renderStandings('container-id');
F1Widgets.renderStandings('container-id', { limit: 5 }); // Top 5
F1Widgets.renderStandings('container-id', { limit: 10 }); // Top 10
F1Widgets.renderStandings('container-id', { compact: true, moreLink: '/f1-stand' }); // Meer = link

renderDriverCards

Individual driver cards with stats.

F1Widgets.renderDriverCards('container-id');
F1Widgets.renderDriverCards('container-id', { limit: 6 });
F1Widgets.renderDriverCards('container-id', { seasonId: 26877 });

// Specifieke coureur(s) tonen (volle breedte bij 1 coureur):
F1Widgets.renderDriverCards('container-id', { driverId: 171429 }); // Max Verstappen
F1Widgets.renderDriverCards('container-id', { driverIds: [171429, 171424] }); // Meerdere coureurs

// Met klikbare links naar coureur pagina's:
F1Widgets.renderDriverCards('container-id', {
  driverId: 171429,
  driverLink: '/f1-coureurs/{slug}'
});

renderTeamCards

Team cards with logos and standings.

F1Widgets.renderTeamCards('container-id');
F1Widgets.renderTeamCards('container-id', { seasonId: 26877 });

// Specifiek team tonen (volle breedte bij 1 team):
F1Widgets.renderTeamCards('container-id', { teamId: 214851 }); // Red Bull Racing
F1Widgets.renderTeamCards('container-id', { teamIds: [214851, 214850] }); // Meerdere teams

// Met klikbare links naar team pagina's:
F1Widgets.renderTeamCards('container-id', {
  teamId: 214851,
  teamLink: '/f1-teams/{slug}'
});

renderDriversOverview

Clickable grid of all drivers grouped by team (constructor standings order).

F1Widgets.renderDriversOverview('container-id');
F1Widgets.renderDriversOverview('container-id', { seasonId: 26877 });

// Met klikbare links naar coureur pagina's:
F1Widgets.renderDriversOverview('container-id', {
  driverLink: '/f1-coureurs/{slug}'
});

renderTeamsOverview

Clickable grid of all teams with positions, points and drivers. Max 2 per rij, witte achtergrond.

F1Widgets.renderTeamsOverview('container-id');
F1Widgets.renderTeamsOverview('container-id', { seasonId: 26877 });

// Met klikbare links naar team pagina's:
F1Widgets.renderTeamsOverview('container-id', {
  teamLink: '/f1-teams/{slug}'
});

renderRacesOverview

Grid met alle races, circuit afbeeldingen en datums.

F1Widgets.renderRacesOverview('container-id');
F1Widgets.renderRacesOverview('container-id', { seasonId: 26877 });
F1Widgets.renderRacesOverview('container-id', { limit: 8 }); // Eerste 8 races

// Specifieke race tonen (volle breedte):
F1Widgets.renderRacesOverview('container-id', { raceId: 77480033 }); // Enkele race
F1Widgets.renderRacesOverview('container-id', { raceIds: [77480033, 77480034] }); // Meerdere

// Met klikbare links naar race pagina's:
F1Widgets.renderRacesOverview('container-id', {
  raceLink: '/f1-races/{slug}'
});

renderCircuit

Circuit information with stats. Requires venueId.

F1Widgets.renderCircuit('container-id', { venueId: 343586 }); // Silverstone
F1Widgets.renderCircuit('container-id', { venueId: 343587 }); // Monaco

renderLiveRace

Live race posities tijdens een race. Ververst automatisch. Toont banden, pitstops en gaps.

F1Widgets.renderLiveRace('container-id');
F1Widgets.renderLiveRace('container-id', { refreshInterval: 5000 }); // Refresh elke 5 sec
F1Widgets.renderLiveRace('container-id', { demo: true }); // Demo mode

ID Lookup

Zoek hier de IDs op die je nodig hebt voor de widgets.

Season IDs

2026 (huidig) 26733
2025 25273
2024 26877
2023 26876
2022 26875
2021 26874

Stage IDs (voor renderRaceWeekend)

Venue IDs (voor renderCircuit)

Driver IDs (voor renderDriverCards)

Team IDs (voor renderTeamCards)