Copy and paste the HTML code above into your website web page, where you would like the widget to be shown.
If you want to populate individual processors, graphics cards, memory, or PC games programatically, you can do so with either a search string or an ID (you will have to create some sort of map on your side to match hardware or games in your own database against our IDs).
For example: if you wish to search to pre-populate a processor, a graphics card, and the RAM, then replace the script src with https://www.game-debate.com/system-requirement-js-widget/script?domain=yourdomain.com&processor-search=core+i7+2700k&grafcard=gtx+560+ti&ram=8
. This is useful if you want a way to quickly make use of your current database without mapping them to our IDs.
If you do wish to map your database to the IDs in our database, then you can easily replace the generated code with the given IDs. For example https://www.game-debate.com/system-requirement-js-widget/script?domain=yourdomain.com&p_id=640&gc_id=463
Note that our list of RAM is only a list of values and you must select one of these values to pre-populate the RAM value.
Type | Search Get Key | ID Get Key |
---|---|---|
Processor | processor-search | p_id |
Graphics | grafcard-search | gc_id |
Game | game-search | g_id |
If you wish to know all our game IDs and their corresponding game titles, you can use our up to date JSON dump with all PC games that have system requirements at https://www.game-debate.com/game/api/list.
e.g. https://www.game-debate.com/system-requirement-js-widget/script?domain=yourdomain.com&p_id=823&gc_id=463&ram=8&g_id=1308
e.g. https://www.game-debate.com/system-requirement-js-widget/script?domain=yourdomain.com&game-search=grand+theft+auto+v
OR
https://www.game-debate.com/system-requirement-js-widget/script?domain=yourdomain.com&g_id=1308
Both of these will have the same widget result.
Note: where there are dynamic variables such as [[game]], simply place that in the same format exactly where you wish the dynamic variable to show up.
/**
* Updates the GD widget with a new SRC
* @param string newScriptSrc The new src with which to retrieve new data
* @param string placeholderHTML Optional: HTML you can use if you wish to show that
* loading is in progress (e.g. a loading icon)
*/
var updateWidget = function(newScriptSrc, placeholderHTML){
if(placeholderHTML)
document.getElementById('gd-widget-div').innerHTML = placeholderHTML;
var script = document.createElement("script");
script.type = "text/javascript";
script.src = newScriptSrc;
document.getElementsByTagName("body")[0].appendChild(script);
}
// default widget update with no intermediate loading stage
var scriptURL = "https://www.game-debate.com/system-requirement-js-widget/script?domain=game-debate.com&g_id=8083&theme=dark";
updateWidget(scriptURL);
// change the theme to light and show a loading div while the new widget is loading in
var scriptURL = "https://www.game-debate.com/system-requirement-js-widget/script?domain=game-debate.com&g_id=8083&theme=light";
updateWidget(scriptURL, '<div>loading...<div>');