Integrate Gunfinder on your own website
The Gunfinder Widget gives website owners the ability to display Gunfinder search results on their own website. A great example is the Gunfinder integration on Geartester (at the very bottom of the page).
The following is a brief explanation of how to embed the Gunfinder Widget on your own website. Essentially, the process consists of 2 steps: first, a JavaScript file is included, and in the second step, minimal HTML code can be written that is 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 that must have an attribute named 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 starts a search for the term {search query} on Gunfinder and displays the results on the page. data-gunfinder-search-query is the only mandatory attribute. Additional available attributes can be found in the table below. All attributes must use the prefix data-gunfinder-search-.
Attribute |
Description |
Possible Values |
Required |
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 |
In stock. 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 get in touch |
No |
exclude-sources |
Comma-separated list of source names to be excluded(!) from the search. By default, all sources are searched. |
Please get in touch |
No |
marketplace |
If true, shows only marketplace results. If false, excludes 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 prefer not 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 appearance of the widget.
Variable |
Description |
Possible Values |
fontSize |
Base font size. Affects the entire widget. |
Standard CSS size values |
itemTitleColor |
Color of the listing title |
Standard CSS color values |
itemPriceColor |
Color of the listing price |
Standard CSS color values |
moreColor |
Text & border color of the "more listings" button |
Standard CSS color values |
Example:
<div data-gunfinder-search-widget data-gunfinder-search-query="{search query}" data-gunfinder-search-style='{"fontSize": "15px", "itemTitleColor": "red"}'></div>