Integrate Gunfinder on your own website
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 very bottom of the page).
Below is a brief explanation of how to embed the Gunfinder widget on your own website. Basically, 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 recognised and processed by the JavaScript file.
Embedding the JavaScript File
The following code snippet must be embedded 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 that must have an attribute named data-gunfinder-search-widget so it is recognized by the JavaScript code. Here is a simple example:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Suchanfrage}"></div>
This starts a search with the term {Suchanfrage} on Gunfinder and displays 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 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 |
Immediately available. Default: false |
true or false |
No |
category |
Limit 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 search. 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, shows no marketplace results. |
true or false |
No |
More examples:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Suchanfrage}" data-gunfinder-search-price-min="2500"></div>
<div data-gunfinder-search-widget data-gunfinder-search-query="{Suchanfrage}" 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 as a JSON object to the widget to change its appearance.
Variable |
Description |
Possible values |
fontSize |
Basic font size. Affects the entire widget. |
Standard CSS size values |
itemTitleColor |
Colour of the listing title |
Standard CSS color values |
itemPriceColor |
Colour of the listing price |
Standard CSS color values |
moreColor |
Text & border colour of the "more listings" button |
Standard CSS color values |
Example:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Suchanfrage}" data-gunfinder-search-style='{"fontSize": "15px", "itemTitleColor": "red"}'></div>