The Gunfinder widget offers website operators the opportunity to display Gunfinder search results on their own website. A good example is the Gunfinder integration on Geartester (at the very bottom of the page).
Below is a brief explanation of how to embed the Gunfinder widget on your own website. The process essentially consists of 2 steps: First, a JavaScript file is included, and in the second step, minimal HTML code can be written that will be recognized and processed by the JavaScript file.
Including the JavaScript File
The following code snippet must be included either in 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 added, which must have an attribute named data-gunfinder-search-widget so that it can be recognized by the JavaScript code. Here is a simple example:
<div data-gunfinder-search-widget data-gunfinder-search-query="{search query}"></div>
This will initiate a search with the term {search query} on Gunfinder, and the results will be displayed 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 have the prefix data-gunfinder-search-.
| Attribute | Description | Possible Values | Mandatory |
| query | Search query | Text | Yes |
| count | Maximum number of results. Integer. 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 for immediate delivery. 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 of source names to be searched. By default, all sources are searched. | Please contact us | No |
| exclude-sources | Comma-separated list of source names that should not be searched. By default, all sources are searched. | Please contact us | No |
| marketplace | If true, only shows 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 the widget should not be styled with CSS rules, there are some simple variables that can be passed to the widget as a JSON object to change the appearance of the widget.
| Variable | Description | Possible Values |
| fontSize | Basic font size. Affects the entire widget. | Standard CSS values for sizes |
| itemTitleColor | Color of the offer title | Standard CSS values for colors |
| itemPriceColor | Color of the offer price | Standard CSS values for colors |
| moreColor | Text & border color of the "more offers" button | Standard 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>
Marketplace
