System Requirement Javascript Widget

Customize and embed your free responsive javascript widget with access to our system requirement API. The system requirement widget lets your website users check any game system requirements live.

Embed This Widget

Test out the responsiveness!

STEP 1: Enter domain

loading

STEP 2 : Copy HTML into your page (final step)

Copy and paste the HTML code above into your website web page, where you would like the widget to be shown.

STEP 3 : Customise Your Widget (optional)

Processor

Graphics Card

Memory

PC Game

Custom Text

Advanced Widget Settings

Is your language not here? You can fill in and send us this JSON file to widget and we will quickly add it to our system.

Programmatic Generation

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.

Note: If you fill in one of the search GET variables but we cannot find any close results, by default the widget will not render. If you wish for the widget to fall back to allowing the user to search for an item when no searches are available, set fallback=choice in the script URL.

Terms of Use

  1. You must not place the embed code within an iframe.
  2. You must not remove or change the links to game-debate.com in the footer.
  3. You must not change or remove our link titles.
  4. You must not affect the style in a way the makes the footer links less visible.
  5. The links must be live generated by us (not cached or replaced with static links).
  6. The links must function as you would expect from a normal link i.e. they have to be clickable and open a new tab with primary focus.
  7. The system requirement results must be dynamically served by Game-Debate.
  8. Any changes you make to the tool must not cause excessive strain on our servers.

FAQ

A: You can feed the Processor, Graphics Card and amount of RAM of the PC you have for sale programmatically into the widget. When the widget loads on your web page it will identify those hardware components. Then from our list of every PC Game available your page visitors will only be able to change and test any and every PC game against the hardware you are selling on that page.

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

A: Yes, this is ideal for webpages dedicated to a single game, perhaps on a game retailer website or for the game developer site. Where you only want to let your potential customers test your own game, against any customer's PC hardware.

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.

A: Yes, you can use our JSON dumps:
A: Only 1 widget can run per web page. The widget should be customisable and flexible enough to be suitable for every page though. If you have a specific requirement that is not supported then please get in touch.
A: You can adjust everything to suit your needs except all the source links back to our website.
A: You can contact us via widget to request a missing game be added to our database.
A: You can fill in and send us this JSON file to widget. We will add it to our system for you to select. If you wish to prepare for us adding it, you can add the GET variable of your language code like so: https://www.game-debate.com/system-requirement-js-widget/script?domain=yourdomain.com&p_id=823&gc_id=463&ram=8&g_id=1308&lang=nl . Your widget will display in English until we have added the new JSON localization file. Once it is added, if you still have the "lang" GET variable set, it should transition automatically.

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.

A: You can update the widget by adding a new script to your page with the "src" attribute pointing to a URL with the new options set. We have an example function that you can use in these cases: 
								
/**
 *  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);
}
All you need to do here is call updateWidget with the new src. Examples:
								
// 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>');
A: You can contact us via widget.