{"id":42267676,"url":"https://github.com/danielbrendel/steamwidgets-js","last_synced_at":"2026-01-27T06:51:00.555Z","repository":{"id":53515457,"uuid":"521443762","full_name":"danielbrendel/steamwidgets-js","owner":"danielbrendel","description":"Integrate Steam widgets into your website","archived":false,"fork":false,"pushed_at":"2025-01-15T13:35:35.000Z","size":114,"stargazers_count":13,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-19T12:22:01.517Z","etag":null,"topics":["steam","steam-api","steam-app","steam-game","steam-group","steam-player","steam-server","steam-widgets","steam-workshop","widgets"],"latest_commit_sha":null,"homepage":"https://www.steamwidgets.net","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danielbrendel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-04T23:30:02.000Z","updated_at":"2025-01-15T13:35:37.000Z","dependencies_parsed_at":"2024-04-03T14:48:16.673Z","dependency_job_id":"ed5c2439-0d4c-4e51-8dc0-c263da53a6a7","html_url":"https://github.com/danielbrendel/steamwidgets-js","commit_stats":{"total_commits":33,"total_committers":1,"mean_commits":33.0,"dds":0.0,"last_synced_commit":"141d91d4e5efcfa39fe1ea2fd66d9585d00cfbce"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/danielbrendel/steamwidgets-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielbrendel%2Fsteamwidgets-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielbrendel%2Fsteamwidgets-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielbrendel%2Fsteamwidgets-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielbrendel%2Fsteamwidgets-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danielbrendel","download_url":"https://codeload.github.com/danielbrendel/steamwidgets-js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielbrendel%2Fsteamwidgets-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28806721,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T06:25:51.065Z","status":"ssl_error","status_checked_at":"2026-01-27T06:25:50.640Z","response_time":168,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["steam","steam-api","steam-app","steam-game","steam-group","steam-player","steam-server","steam-widgets","steam-workshop","widgets"],"created_at":"2026-01-27T06:50:58.635Z","updated_at":"2026-01-27T06:51:00.537Z","avatar_url":"https://github.com/danielbrendel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SteamWidgets NPM package\n\n(C) 2022 - 2025 by Daniel Brendel\n\nReleased under the MIT license\n\nhttps://www.steamwidgets.net\n\n## About\nSteamWidgets 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.\n\nSteamWidgets is used via JavaScript. Since JavaScript is supported by all major browser per default it is platform independent and compatible.\n\nThe following Widgets are currently available:\n- Steam App Widget\n- Steam Server Widget\n- Steam User Widget\n- Steam Workshop Widget\n- Steam Group Widget\n\n## Installation\n\n```\nnpm i steamwidgets.js\n```\n\n```javascript\nimport 'steamwidgets.js'; //Import all available widgets\n\nimport 'steamwidgets.js/steam_app'; //Import Steam App Widget\nimport 'steamwidgets.js/steam_server'; //Import Steam Server Widget\nimport 'steamwidgets.js/steam_user'; //Import Steam User Widget\nimport 'steamwidgets.js/steam_workshop'; //Import Steam Workshop Widget\nimport 'steamwidgets.js/steam_group'; //Import Steam Group Widget\n```\n\n## Steam App\n\nWhen referenced the required Steam App module, the minimum code to render a widget is as follows:\n\n```html\n\u003csteam-app appid=\"620\"\u003e\u003c/steam-app\u003e\n```\n\nThis renders the following widget:\u003cbr\u003e\n![Steam App Widget](https://www.steamwidgets.net/img/widget_app.png)\n\nYou can define these options:\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eAttribute\u003c/strong\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eValue\u003c/strong\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eappid\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies the ID of a Steam game/app\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003elang\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies the language of the localized Steam data\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eonlinecount\u003c/td\u003e\n\t\t\t\u003ctd\u003eIf specified this will be the text for the online count. Use \u003cb\u003e:count\u003c/b\u003e to dynamically insert the actual products player/user count.\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003erating\u003c/td\u003e\n\t\t\t\u003ctd\u003eIf set to true then the app rating will be shown as a 5-star-system, otherwise it is hidden\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eplaytext\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies the text of the button that eventually links to the Steam products store page\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eauthor\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify a text that is displayed as the author of the product. You can use \u003cb\u003e:developer\u003c/b\u003e and \u003cb\u003e:publisher\u003c/b\u003e to dynamically insert the products developer and publisher names\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003ewidth\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify the width of the widget\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eheight\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify the height of the widget\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-border / style.border\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify border rounding: Either none, small or max\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-shadow / style.shadow\u003c/td\u003e\n\t\t\t\u003ctd\u003eYou can specify false to prevent displaying box shadow or true to enable (default)\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-color-background / style.colorBackground\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify a CSS value for the background color\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-color-title / style.colorTitle\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify a CSS value for the title color\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-color-description / style.colorDescription\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify a CSS value for the description color\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-color-author / style.colorAuthor\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify a CSS value for the author color\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-color-onlinecount / style.colorOnlinecount\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify a CSS value for the online count color\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-hideimage / style.hideimage\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify whether the widget image shall be hidden or not\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\nYou can also dynamically create Steam Widgets via JavaScript:\n\n```html\n\u003cdiv id=\"app-widget\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n    document.addEventListener('DOMContentLoaded', function() {\n        let widget = new SteamApp('#app-widget', {\n            appid: '620',\n            //You can specify the same attributes as shown in the table above as well as events (see below)\n        });\n    });\n\u003c/script\u003e\n```\n\nThe following methods are available for a Steam App element / object:\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eMethod\u003c/strong\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eDescription\u003c/strong\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eupdateWidget()\u003c/td\u003e\n\t\t\t\u003ctd\u003eUpdates the widget data and displays them\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003echangeLang(lang, playtext, author, onlinecount)\u003c/td\u003e\n\t\t\t\u003ctd\u003eChanges the language of the widget using the given information\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003esetImageVisibility(visibility)\u003c/td\u003e\n\t\t\t\u003ctd\u003eSets the widget image visibility\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eremove()\u003c/td\u003e\n\t\t\t\u003ctd\u003eRemoves the widget from the document\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\nThe following events are available for a Steam App object:\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eEvent\u003c/strong\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eDescription\u003c/strong\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eevents.onInit(e)\u003c/td\u003e\n\t\t\t\u003ctd\u003eCalled when the widget is initialized\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eevents.onCompleted(e)\u003c/td\u003e\n\t\t\t\u003ctd\u003eCalled when the widget has finished loading\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003chr/\u003e\n\n## Steam Server\n\nWhen referenced the required Steam Server module, the minimum code to render a widget is as follows:\n\n```html\n\u003csteam-server addr=\"ip:port\"\u003e\u003c/steam-server\u003e\n```\n\nThis renders the following widget:\u003cbr\u003e\n![Steam Server Widget](https://www.steamwidgets.net/img/widget_server.png)\n\nYou can define these options:\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eAttribute\u003c/strong\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eValue\u003c/strong\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eaddr\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies the address of the server using format \u003cb\u003eip\u003c/b\u003e:\u003cb\u003eport\u003c/b\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eheader\u003c/td\u003e\n\t\t\t\u003ctd\u003eIf you want to render the widget with a header image you may specify the URL to an image here\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003ebots\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify the text for the bot info. Use :count to render the actual bot count\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003esecure_yes\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies the text that is displayed if the server is a secure server\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003esecure_no\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies the text that is displayed if the server is not a secure server\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003ehosting_dedicated\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies the text that is displayed if the server is a dedicated server\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003ehosting_listen\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies the text that is displayed if the server is a listen server\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eplaytext\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies the text of the button that issues a connection to the server\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003ewidth\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify the width of the widget\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eheight\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify the height of the widget\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-border / style.border\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify border rounding: Either none, small or max\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-shadow / style.shadow\u003c/td\u003e\n\t\t\t\u003ctd\u003eYou can specify false to prevent displaying box shadow or true to enable (default)\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-color-background / style.colorBackground\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify a CSS value for the background color\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-color-text-bright / style.colorTextBright\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify a CSS value for the bright texts\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-color-text-dark / style.colorTextDark\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify a CSS value for the dark texts\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\nYou can also dynamically create Steam Server widgets via JavaScript:\n\n```html\n\u003cdiv id=\"server-widget\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\ndocument.addEventListener('DOMContentLoaded', function() {\n\tlet widget = new SteamServer('#server-widget', {\n\t\taddr: 'ip:port',\n\t\t//You can specify the same attributes as shown in the table above as well as events (see below)\n\t});\n});\n\u003c/script\u003e\n```\n\nThe following methods are available for a Steam Server element / object:\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eMethod\u003c/strong\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eDescription\u003c/strong\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eupdateWidget()\u003c/td\u003e\n\t\t\t\u003ctd\u003eUpdates the widget data and displays them\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003echangeLang(bots, secure_yes, secure_no, hosting_dedicated, hosting_listen, playtext)\u003c/td\u003e\n\t\t\t\u003ctd\u003eChanges the language of the widget using the given information\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003esetImageVisibility(visibility)\u003c/td\u003e\n\t\t\t\u003ctd\u003eSets the widget image visibility\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eremove()\u003c/td\u003e\n\t\t\t\u003ctd\u003eRemoves the widget from the document\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\nThe following events are available for a Steam Server object:\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eEvent\u003c/strong\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eDescription\u003c/strong\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eevents.onInit(e)\u003c/td\u003e\n\t\t\t\u003ctd\u003eCalled when the widget is initialized\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eevents.onCompleted(e)\u003c/td\u003e\n\t\t\t\u003ctd\u003eCalled when the widget has finished loading\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003chr/\u003e\n\n## Steam User\n\nWhen referenced the required Steam User module, the minimum code to render a widget is as follows:\n\n```html\n\u003csteam-user steamid=\"id\"\u003e\u003c/steam-user\u003e\n```\n\nThis renders the following widget:\u003cbr\u003e\n![Steam User Widget](https://www.steamwidgets.net/img/widget_user.png)\n\nYou can define these options:\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eAttribute\u003c/strong\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eValue\u003c/strong\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003esteamid\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies the SteamID of the Steam user\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eheader\u003c/td\u003e\n\t\t\t\u003ctd\u003eIf you want to render the widget with a header image you may specify the URL to an image here\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eonline_yes\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies the text that is displayed if the user is currently online\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eonline_no\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies the text that is displayed if the user is not currently online\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003emember_since\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies the text and format of the info that shows since when the user account is registered. Use \u003cb\u003e:year\u003c/b\u003e, \u003cb\u003e:month\u003c/b\u003e and \u003cb\u003e:day\u003c/b\u003e to format the date.\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eviewtext\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies the text of the button which can be used to go to the users Steam Community profile\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003ewidth\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify the width of the widget\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eheight\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify the height of the widget\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-border / style.border\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify border rounding: Either none, small or max\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-shadow / style.shadow\u003c/td\u003e\n\t\t\t\u003ctd\u003eYou can specify false to prevent displaying box shadow or true to enable (default)\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-color-background / style.colorBackground\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify a CSS value for the background color\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-color-text-bright / style.colorTextBright\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify a CSS value for the bright texts\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-color-text-dark / style.colorTextDark\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify a CSS value for the dark texts\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\nYou can also dynamically create Steam User widgets via JavaScript:\n\n```html\n\u003cdiv id=\"user-widget\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n\tdocument.addEventListener('DOMContentLoaded', function() {\n        let widget = new SteamUser('#user-widget', {\n            steamid: 'id',\n            //You can specify the same attributes as shown in the table above as well as events (see below)\n        });\n    });\n\u003c/script\u003e\n```\n\nThe following methods are available for a Steam User element / object:\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eMethod\u003c/strong\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eDescription\u003c/strong\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eupdateWidget()\u003c/td\u003e\n\t\t\t\u003ctd\u003eUpdates the widget data and displays them\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003echangeLang(online_yes, online_no, member_since, viewtext)\u003c/td\u003e\n\t\t\t\u003ctd\u003eChanges the language of the widget using the given information\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003esetImageVisibility(visibility)\u003c/td\u003e\n\t\t\t\u003ctd\u003eSets the widget image visibility\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eremove()\u003c/td\u003e\n\t\t\t\u003ctd\u003eRemoves the widget from the document\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\nThe following events are available for a Steam User object:\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eEvent\u003c/strong\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eDescription\u003c/strong\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eevents.onInit(e)\u003c/td\u003e\n\t\t\t\u003ctd\u003eCalled when the widget is initialized\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eevents.onCompleted(e)\u003c/td\u003e\n\t\t\t\u003ctd\u003eCalled when the widget has finished loading\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003chr/\u003e\n\n## Steam Workshop\n\nWhen referenced the required Steam Workshop module, the minimum code to render a widget is as follows:\n\n```html\n\u003csteam-workshop itemid=\"id\"\u003e\u003c/steam-workshop\u003e\n```\n\nThis renders the following widget:\u003cbr\u003e\n![Steam Workshop Widget](https://www.steamwidgets.net/img/widget_workshop.png)\n\nYou can define these options:\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eAttribute\u003c/strong\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eValue\u003c/strong\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eitemid\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies the item ID of the Steam Workshop item\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eviews\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies the text of the views stats label\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003esubscriptions\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies the text of the subscriptions stats label\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003efavorites\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies the text of the favorites stats label\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eauthor\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies the author text. Use \u003cb\u003e:creator\u003c/b\u003e to insert the creators Steam persona name\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eviewtext\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies the text of the button which can be used to go to the Workshop item page\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eshow-image / showImage\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies if the workshop item preview image shall be displayed. Defaults to true/1\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-border / style.border\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify border rounding: Either none, small or max\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-shadow / style.shadow\u003c/td\u003e\n\t\t\t\u003ctd\u003eYou can specify false to prevent displaying box shadow or true to enable (default)\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-color-background / style.colorBackground\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify a CSS value for the background color\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-color-title / style.colorTitle\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify a CSS value for the title color\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-color-description / style.colorDescription\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify a CSS value for the description color\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-color-stats-count / style.colorStatsCount\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify a CSS value for the stats count color\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-color-stats-label / style.colorStatsLabel\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify a CSS value for the stats label color\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\nYou can also dynamically create Steam Workshop widgets via JavaScript:\n\n```html\n\u003cdiv id=\"workshop-widget\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n\tdocument.addEventListener('DOMContentLoaded', function() {\n        let widget = new SteamWorkshop('#workshop-widget', {\n            itemid: 'id',\n            //You can specify the same attributes as shown in the table above as well as events (see below)\n        });\n    });\n\u003c/script\u003e\n```\n\nThe following methods are available for a Steam Workshop element / object:\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eMethod\u003c/strong\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eDescription\u003c/strong\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eupdateWidget()\u003c/td\u003e\n\t\t\t\u003ctd\u003eUpdates the widget data and displays them\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003echangeLang(views, subscriptions, favorites, author, viewtext)\u003c/td\u003e\n\t\t\t\u003ctd\u003eChanges the language of the widget using the given information\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003esetImageVisibility(visibility)\u003c/td\u003e\n\t\t\t\u003ctd\u003eSets the widget image visibility\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eremove()\u003c/td\u003e\n\t\t\t\u003ctd\u003eRemoves the widget from the document\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\nThe following events are available for a Steam Workshop object:\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eEvent\u003c/strong\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eDescription\u003c/strong\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eevents.onInit(e)\u003c/td\u003e\n\t\t\t\u003ctd\u003eCalled when the widget is initialized\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eevents.onCompleted(e)\u003c/td\u003e\n\t\t\t\u003ctd\u003eCalled when the widget has finished loading\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\n## Steam Group\n\nWhen referenced the required Steam Group module, the minimum code to render a widget is as follows:\n\n```html\n\u003csteam-group group=\"id\"\u003e\u003c/steam-group\u003e\n```\n\nThis renders the following widget:\u003cbr\u003e\n![Steam Group Widget](https://www.steamwidgets.net/img/widget_group.png)\n\nYou can define these options:\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eAttribute\u003c/strong\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eValue\u003c/strong\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003egroup\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies the group either by numeric ID or URL identifier token\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003emembers\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies the text of the members stats label\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eonline\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies the text of the online stats label\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eingame\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies the text of the in-game stats label\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eviewtext\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies the text of the button which can be used to go to the group page\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eshow-image / showImage\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecifies if the group avatar image shall be displayed. Defaults to true/1\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-border / style.border\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify border rounding: Either none, small or max\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-shadow / style.shadow\u003c/td\u003e\n\t\t\t\u003ctd\u003eYou can specify false to prevent displaying box shadow or true to enable (default)\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-color-background / style.colorBackground\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify a CSS value for the background color\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-color-title / style.colorTitle\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify a CSS value for the title color\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-color-description / style.colorDescription\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify a CSS value for the description color\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-color-stats-count / style.colorStatsCount\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify a CSS value for the stats count color\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003estyle-color-stats-label / style.colorStatsLabel\u003c/td\u003e\n\t\t\t\u003ctd\u003eSpecify a CSS value for the stats label color\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\nYou can also dynamically create Steam Group widgets via JavaScript:\n\n```html\n\u003cdiv id=\"group-widget\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\n\tdocument.addEventListener('DOMContentLoaded', function() {\n        let widget = new SteamGroup('#group-widget', {\n            group: 'id or url',\n            //You can specify the same attributes as shown in the table above as well as events (see below)\n        });\n    });\n\u003c/script\u003e\n```\n\nThe following methods are available for a Steam Group element / object:\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eMethod\u003c/strong\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eDescription\u003c/strong\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eupdateWidget()\u003c/td\u003e\n\t\t\t\u003ctd\u003eUpdates the widget data and displays them\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003echangeLang(online, ingame, members, viewtext)\u003c/td\u003e\n\t\t\t\u003ctd\u003eChanges the language of the widget using the given information\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003esetImageVisibility(visibility)\u003c/td\u003e\n\t\t\t\u003ctd\u003eSets the widget image visibility\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eremove()\u003c/td\u003e\n\t\t\t\u003ctd\u003eRemoves the widget from the document\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\nThe following events are available for a Steam Group object:\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\t\u003ctr\u003e\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eEvent\u003c/strong\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003cstrong\u003eDescription\u003c/strong\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eevents.onInit(e)\u003c/td\u003e\n\t\t\t\u003ctd\u003eCalled when the widget is initialized\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eevents.onCompleted(e)\u003c/td\u003e\n\t\t\t\u003ctd\u003eCalled when the widget has finished loading\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielbrendel%2Fsteamwidgets-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanielbrendel%2Fsteamwidgets-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielbrendel%2Fsteamwidgets-js/lists"}