The Gunfinder widget offers website owners the possibility to display Gunfinder search results on their own website. A good example is the Gunfinder integration on Geartester (at the bottom of the page).
Below is a brief explanation of how to integrate the Gunfinder widget on your own website. Basically the process consists of 2 steps: First, a JavaScript file is included and then in the second step, minimal HTML code can be written, which is recognized and processed by the JavaScript file.
Including the JavaScript file
The following code snippet must be included in either the head or body of the HTML document
:<script src="https://widgets.gunfinder.de/js/search.js" async></script>
Placing the HTML snippet
Once the JavaScript file is included, a new DIV element can be inserted, which must be given an attribute called data-gunfinder-search-widget so that it is recognized by the JavaScript code. Here is a simple example:
<div data-gunfinder-search-widget data-gunfinder-search-query="{search-query}"></div>
.
This will start a search with the term {search-query} on Gunfinder and display the results on the page. data-gunfinder-search-query is the only mandatory attribute. Other possible attributes can be found in the following table. All attributes must be prefixed with data-gunfinder-search-.
| Attribute | Description | Possible values | Mandatory |
| query | Search query | Text | Yes |
| count | Maximum number of results. Integer number. Default: 5 | > 0 < 30 | No |
| price-min | Minimum price. Integer. | > 0 < price-max (if specified) | No |
| price-max | Maximum price. Integer. | > 0 > price-min (if specified) | No |
| condition | Item condition | new or used | No |
| available | Available immediately. Default: false | true or false | No |
| category | Limit the search to a specific category | weapon, ammunition, optics, apparel, equipment | No |
| style | Styling. See description below. | JSON object | No |
| sources | Comma separated list with names of sources to be searched. By default, all sources are searched. | Please contact us | No |
| exclude-sources | Comma separated list with names of sources which should not(!) be searched. By default all sources are searched. | Please contact us | No |
| marketplace | If true, shows only marketplace results. If false, does not show marketplace results. | true or false | No |
More examples:
<div data-gunfinder-search-widget data-gunfinder-search-query="{search-query}" data-gunfinder-search-price-min="2500"></div>
<div data-gunfinder-search-widget data-gunfinder-search-query="{search-query}" data-gunfinder-search-available="true"></div>
Styling
If you don't want to style the widget using CSS rules, there are some simple variables that can be passed to the widget as a JSON object to change the look of the widget.
| Variable | Description | Possible values |
| fontSize | Basic font size. Has effect on the whole widget. | Default CSS values for sizes |
| itemTitleColor | Color of the offer heading | Default CSS values for colors |
| itemPriceColor | Color of the offer price | Default CSS values for colors |
| moreColor | text & border color of the "more offers" button | Default CSS values for colors |
Example:
<div data-gunfinder-search-widget data-gunfinder-search-query="{search-query}" data-gunfinder-search-style='{"fontSize": "15px", "itemTitleColor": "red"}'></div>
Marktplatz
