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, which 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 inserted. It 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 will start a search for the term {search query} on Gunfinder and display 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 be prefixed with 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 |
In stock / ready to ship. 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, hides all marketplace results. |
true or false |
No |
Further 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 via 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 values for sizes |
itemTitleColor |
Color of the listing title |
Standard CSS values for colors |
itemPriceColor |
Color of the listing price |
Standard CSS values for colors |
moreColor |
Text & border color of the "more listings" 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>