SteamCards

Integrate Steam Cards / Widgets of your game/app into your website. Fully customizable and adjustable with localization and responsiveness. You can also control it programmatically.

About

SteamCards is a clientside web component that offers an easy way to integrate Steam Cards of various Steam entities into your website. Therefore you only need very few code in order to render Steam Cards into your document.

SteamCards is used via JavaScript. Since JavaScript is supported by all major browser per default it is platform independent and compatible.

The following Widgets are currently available:

You can use SteamCards by referencing the neccessary JavaScript files from the official SteamCards server as follows:

                
<script src="https://www.steamcards.net/api/resource/query?type=js&module=STEAM_CARDS_MODULE&version=v1"></script>
                
            

You can also use NPM to install the package. Please visit the NPM page of the package in order to get instruction details:

https://www.npmjs.com/package/steamcards.js

Steam App

When referenced the required Steam App module, the minimum code to render a card is as follows:

                
<steam-app appid="620"></steam-app>
                
            

You can define these options:

You can also dynamically create Steam App cards via JavaScript:

                
<div id="app-card"></div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        let card = new SteamApp('#app-card', {
            appid: '620',
            //You can specify the same attributes as shown in the table above
        });
    });
</script>
                
            

The following methods are available for a Steam App element / object:

Steam Server

When referenced the required Steam Server module, the minimum code to render a card is as follows:

                
<steam-server addr="ip:port"></steam-server>
                
            

You can define these options:

You can also dynamically create Steam Server cards via JavaScript:

                
<div id="server-card"></div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        let card = new SteamServer('#server-card', {
            addr: 'ip:port',
            //You can specify the same attributes as shown in the table above
        });
    });
</script>
                
            

The following methods are available for a Steam Server element / object:

Steam User

When referenced the required Steam User module, the minimum code to render a card is as follows:

                
<steam-user steamid="id"></steam-user>
                
            

You can define these options:

You can also dynamically create Steam User cards via JavaScript:

                
<div id="user-card"></div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        let card = new SteamUser('#user-card', {
            steamid: 'id',
            //You can specify the same attributes as shown in the table above
        });
    });
</script>
                
            

The following methods are available for a Steam User element / object: