Customizable WIDGETS

We have widgets available for almost all our APIs, Football, Baseball, Basketball, Handball, Hockey, Rugby and Volleyball. Formula-1 will be available soon.

HOW IT WORKS


Our widgets are completely free and work with all our plans including the free plan.

To integrate the widgets to your site you just have to copy/paste the code provided and fill in the tags needed for the widget to work properly.
If you integrate several widgets on the same page a single theme will be applied for all widgets. Also you will only have to integrate the script tag once.

For all widgets the following tags are needed :
data-host : v3.football.api-sports.io or api-football-v1.p.rapidapi.com depending on whether you have subscribed with us or RapidApi.
data-key : Indicate your API-KEY obtained on our Dashboard or on RapidApi.
data-theme : If you leave the field empty, the default theme will be applied, otherwise the possible values are grey or dark. It is also possible to indicate false which will not display any theme and lets you customize the widget with your own css.
data-show-errors : By default false, used for debugging, with a value of true it allows to display the errors.

Widgets use the requests associated with your account and therefore they will stop working if your daily limit is reached. You can track all requests made directly in the dashboard.

Security :
When using these widgets it is important to be aware that your API-KEY will be visible to the users of your site, it is possible to protect yourself from this by allowing only the desired domains in our dashboard.
This way no one else can use your API-KEY for you. If you have already set up your widget and have not activated this option, you can reset your API-KEY and activate this option after.

Debugging :
If the widget does not display the requested information, it is possible to set the data-show-errors tag to true to display error messages directly in the widget and in the console. This can be due to several things like : (Non-exhaustive list)
- You have reached your daily number of requests
- Tags are incorrectly filled in
- Your API-KEY is incorrect

Tutorials :
- HOW CUSTOM API-FOOTBALL WIDGETS
- HOW TO CHANGE WIDGET ATTRIBUTES DYNAMICALLY
- HOW TO ADD TWO WIDGETS ON THE SAME PAGE

Changelog :
2.0.3 :
- Merge of Livescore and Fixtures widgets in Games widget
- Add a date selector in the Games widget
- Add a status selector in the Games widget
- Add a modal to display standings in games widget
- Add the possibility to display or not the logos or images
- Rename Fixture widget in Game widget
- Add widgets for other sports (Baseball, Basketball, Handball, Hockey, Rugby and Volleyball).
1.1.8 :
- Add the widget Fixture
- Add the possibility to load a modal containing the details of a fixture in the widgets Livescore and Fixtures
1.0.0
- Starting version with widgets Livescore Fixtures and Standings

Sources :
All the sources to make your own CSS can be downloaded here
- 2.0.3
- 1.1.8


GAMES


Display the list of matches grouped by competition according to the parameters used. The matches are automatically updated according to the selected frequency data-refresh.

Tags :
data-refresh : Number in seconds corresponding to the desired data update frequency. This number must be greater than or equal to at least 15. If you indicate 0 or leave this field empty the data will not be updated automatically
data-date : Fill in the desired date YYYY-MM-DD, If empty the current date is automatically applied
data-league : Fill in the desired league id
data-season : Fill in the desired season
data-show-toolbar : Displays the toolbar allowing to change the view between the current, finished or upcoming fixtures and to change the date
data-show-logos : If true display teams logos
data-modal-game : If true allows to load a modal containing all the details of the game
data-modal-standings : If true allows to load a modal containing the standings
data-modal-show-logos : If true display teams logos and players images in the modal



Theme : Default Grey Dark

<div id="wg-api-football-games"
     data-host="v3.football.api-sports.io"
     data-key=""
     data-date=""
     data-league=""
     data-season=""
     data-theme=""
     data-refresh="15"
     data-show-toolbar="true"
     data-show-errors="false"
     data-show-logos="true"
     data-modal-game="true"
     data-modal-standings="true"
     data-modal-show-logos="true">
</div>
<script
    type="module"
    src="https://widgets.api-sports.io/2.0.3/widgets.js">
</script>

Please refer to the documentation about this endpoint and the parameters. Documentation.

It is possible to find all the leagues and teams ids on our Dashboard.

<div id="wg-api-baseball-games"
     data-host="v1.baseball.api-sports.io"
     data-key=""
     data-date=""
     data-league=""
     data-season=""
     data-theme=""
     data-refresh="15"
     data-show-toolbar="true"
     data-show-errors="false"
     data-show-logos="false"
     data-modal-game="true"
     data-modal-standings="true"
     data-modal-show-logos="true">
</div>
<script
    type="module"
    src="https://widgets.api-sports.io/2.0.3/widgets.js">
</script>

Please refer to the documentation about this endpoint and the parameters. Documentation.

It is possible to find all the leagues and teams ids on our Dashboard.

<div id="wg-api-basketball-games"
     data-host="v1.basketball.api-sports.io"
     data-key=""
     data-date=""
     data-league=""
     data-season=""
     data-theme=""
     data-refresh="15"
     data-show-toolbar="true"
     data-show-errors="false"
     data-show-logos="false"
     data-modal-game="true"
     data-modal-standings="true"
     data-modal-show-logos="true">
</div>
<script
    type="module"
    src="https://widgets.api-sports.io/2.0.3/widgets.js">
</script>

Please refer to the documentation about this endpoint and the parameters. Documentation.

It is possible to find all the leagues and teams ids on our Dashboard.

<div id="wg-api-handball-games"
     data-host="v1.handball.api-sports.io"
     data-key=""
     data-date=""
     data-league=""
     data-season=""
     data-theme=""
     data-refresh="15"
     data-show-toolbar="true"
     data-show-errors="false"
     data-show-logos="false"
     data-modal-game="true"
     data-modal-standings="true"
     data-modal-show-logos="true">
</div>
<script
    type="module"
    src="https://widgets.api-sports.io/2.0.3/widgets.js">
</script>

Please refer to the documentation about this endpoint and the parameters. Documentation.

It is possible to find all the leagues and teams ids on our Dashboard.

<div id="wg-api-hockey-games"
     data-host="v1.hockey.api-sports.io"
     data-key=""
     data-date=""
     data-league=""
     data-season=""
     data-theme=""
     data-refresh="15"
     data-show-toolbar="true"
     data-show-errors="false"
     data-show-logos="false"
     data-modal-game="true"
     data-modal-standings="true"
     data-modal-show-logos="true">
</div>
<script
    type="module"
    src="https://widgets.api-sports.io/2.0.3/widgets.js">
</script>

Please refer to the documentation about this endpoint and the parameters. Documentation.

It is possible to find all the leagues and teams ids on our Dashboard.

<div id="wg-api-rugby-games"
     data-host="v1.rugby.api-sports.io"
     data-key=""
     data-date=""
     data-league=""
     data-season=""
     data-theme=""
     data-refresh="15"
     data-show-toolbar="true"
     data-show-errors="false"
     data-show-logos="false"
     data-modal-game="true"
     data-modal-standings="true"
     data-modal-show-logos="true">
</div>
<script
    type="module"
    src="https://widgets.api-sports.io/2.0.3/widgets.js">
</script>

Please refer to the documentation about this endpoint and the parameters. Documentation.

It is possible to find all the leagues and teams ids on our Dashboard.

<div id="wg-api-volleyball-games"
     data-host="v1.volleyball.api-sports.io"
     data-key=""
     data-date=""
     data-league=""
     data-season=""
     data-theme=""
     data-refresh="15"
     data-show-toolbar="true"
     data-show-errors="false"
     data-show-logos="false"
     data-modal-game="true"
     data-modal-standings="true"
     data-modal-show-logos="true">
</div>
<script
    type="module"
    src="https://widgets.api-sports.io/2.0.3/widgets.js">
</script>

Please refer to the documentation about this endpoint and the parameters. Documentation.

It is possible to find all the leagues and teams ids on our Dashboard.

GAME


Display a specific fixture as well as events, statistics, lineups and players statistics if they are available. The fixture is automatically updated according to the selected frequency data-refresh.

Tags :
data-refresh : Number in seconds corresponding to the desired data update frequency. This number must be greater than or equal to at least 15. If you indicate 0 or leave this field empty the data will not be updated automatically
data-id : Fill in the desired fixture id
data-show-logos : If true display teams logos and players images


Theme : Default Grey Dark

<div id="wg-api-football-game"
    data-host="v3.football.api-sports.io"
    data-key=""
    data-id="718243"
    data-theme=""
    data-refresh="15"
    data-show-errors="false"
    data-show-logos="true">
</div>
<script
    type="module"
    src="https://widgets.api-sports.io/2.0.3/widgets.js">
</script>

STANDINGS


Display the ranking of a competition or a team according to the parameters used.

Tags :
data-league : Fill in the desired league id
data-season : Fill in the desired season
data-team : Fill in the desired team (Only for Football Widget)
data-show-logos : If true display teams logos



Theme : Default Grey Dark

<div id="wg-api-football-standings"
    data-host="v3.football.api-sports.io"
    data-key=""
    data-league="39"
    data-team=""
    data-season="2021"
    data-theme=""
    data-show-errors="false"
    data-show-logos="true"
    class="wg_loader">
</div>
<script
    type="module"
    src="https://widgets.api-sports.io/2.0.3/widgets.js">
</script>

Please refer to the documentation about this endpoint and the parameters. Documentation.

It is possible to find all the leagues and teams ids on our Dashboard.

<div id="wg-api-baseball-standings"
    data-host="v1.baseball.api-sports.io"
    data-key=""
    data-league="1"
    data-season="2021"
    data-theme=""
    data-show-errors="false"
    data-show-logos="true"
    class="wg_loader">
</div>
<script
    type="module"
    src="https://widgets.api-sports.io/2.0.3/widgets.js">
</script>

Please refer to the documentation about this endpoint and the parameters. Documentation.

It is possible to find all the leagues and teams ids on our Dashboard.

<div id="wg-api-basketball-standings"
    data-host="v1.basketball.api-sports.io"
    data-key=""
    data-league="12"
    data-season="2021-2022"
    data-theme=""
    data-show-errors="false"
    data-show-logos="true"
    class="wg_loader">
</div>
<script
    type="module"
    src="https://widgets.api-sports.io/2.0.3/widgets.js">
</script>

Please refer to the documentation about this endpoint and the parameters. Documentation.

It is possible to find all the leagues and teams ids on our Dashboard.

<div id="wg-api-handball-standings"
    data-host="v1.handball.api-sports.io"
    data-key=""
    data-league="24"
    data-season="2020"
    data-theme=""
    data-show-errors="false"
    data-show-logos="true"
    class="wg_loader">
</div>
<script
    type="module"
    src="https://widgets.api-sports.io/2.0.3/widgets.js">
</script>

Please refer to the documentation about this endpoint and the parameters. Documentation.

It is possible to find all the leagues and teams ids on our Dashboard.

<div id="wg-api-hockey-standings"
    data-host="v1.hockey.api-sports.io"
    data-key=""
    data-league="3"
    data-season="2021"
    data-theme=""
    data-show-errors="false"
    data-show-logos="true"
    class="wg_loader">
</div>
<script
    type="module"
    src="https://widgets.api-sports.io/2.0.3/widgets.js">
</script>

Please refer to the documentation about this endpoint and the parameters. Documentation.

It is possible to find all the leagues and teams ids on our Dashboard.

<div id="wg-api-rugby-standings"
    data-host="v1.rugby.api-sports.io"
    data-key=""
    data-league="1"
    data-season="2021"
    data-theme=""
    data-show-errors="false"
    data-show-logos="true"
    class="wg_loader">
</div>
<script
    type="module"
    src="https://widgets.api-sports.io/2.0.3/widgets.js">
</script>

Please refer to the documentation about this endpoint and the parameters. Documentation.

It is possible to find all the leagues and teams ids on our Dashboard.

<div id="wg-api-volleyball-standings"
    data-host="v1.volleyball.api-sports.io"
    data-key=""
    data-league="13"
    data-season="2021"
    data-theme=""
    data-show-errors="false"
    data-show-logos="true"
    class="wg_loader">
</div>
<script
    type="module"
    src="https://widgets.api-sports.io/2.0.3/widgets.js">
</script>

Please refer to the documentation about this endpoint and the parameters. Documentation.

It is possible to find all the leagues and teams ids on our Dashboard.