SteamWidgets NPM package

(C) 2022 - 2024 by Daniel Brendel

Released under the MIT license

https://www.steamwidgets.net

About

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

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

• Steam App Widget
• Steam Server Widget
• Steam User Widget
• Steam Workshop Widget
• Steam Group Widget

Installation

npm i steamwidgets.js

import 'steamwidgets.js'; //Import all available widgets

import 'steamwidgets.js/steam_app'; //Import Steam App Widget
import 'steamwidgets.js/steam_server'; //Import Steam Server Widget
import 'steamwidgets.js/steam_user'; //Import Steam User Widget
import 'steamwidgets.js/steam_workshop'; //Import Steam Workshop Widget
import 'steamwidgets.js/steam_group'; //Import Steam Group Widget

Steam App

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

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

This renders the following widget:

You can define these options:

You can also dynamically create Steam Widgets via JavaScript:

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

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

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

The following events are available for a Steam App object:

Steam Server

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

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

This renders the following widget:

You can define these options:

You can also dynamically create Steam Server widgets via JavaScript:

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

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

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

The following events are available for a Steam Server object:

Steam User

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

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

This renders the following widget:

You can define these options:

You can also dynamically create Steam User widgets via JavaScript:

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

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

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

The following events are available for a Steam User object:

Steam Workshop

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

<steam-workshop itemid="id"></steam-workshop>

This renders the following widget:

You can define these options:

You can also dynamically create Steam Workshop widgets via JavaScript:

<div id="workshop-widget"></div>

<script>
	document.addEventListener('DOMContentLoaded', function() {
        let widget = new SteamWorkshop('#workshop-widget', {
            itemid: 'id',
            //You can specify the same attributes as shown in the table above as well as events (see below)
        });
    });
</script>

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

The following events are available for a Steam Workshop object:

Steam Group

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

<steam-group group="id"></steam-group>

This renders the following widget:

You can define these options:

You can also dynamically create Steam Group widgets via JavaScript:

<div id="group-widget"></div>

<script>
	document.addEventListener('DOMContentLoaded', function() {
        let widget = new SteamGroup('#group-widget', {
            group: 'id or url',
            //You can specify the same attributes as shown in the table above as well as events (see below)
        });
    });
</script>

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

The following events are available for a Steam Group object: