Il widget Gunfinder offre agli operatori di siti web la possibilità di visualizzare risultati di ricerca Gunfinder sul proprio sito. Un buon esempio è l'integrazione di Gunfinder su Geartester (in fondo alla pagina).
Di seguito viene spiegato brevemente come integrare il widget Gunfinder sul proprio sito. In sostanza, il processo consiste in 2 passaggi: per prima cosa si integra un file JavaScript e nel secondo passaggio si può scrivere un codice HTML minimale, che verrà riconosciuto e elaborato dal file JavaScript.
Incorporare il file JavaScript
Il seguente frammento di codice deve essere incorporato nel Head o nel Body del documento HTML:
<script src="https://widgets.gunfinder.de/js/search.js" async></script>
Posizionamento dello snippet HTML
Una volta che il file JavaScript è stato incluso, è possibile inserire un nuovo elemento DIV che deve avere un attributo con il nome data-gunfinder-search-widget affinché venga riconosciuto dal codice JavaScript. Ecco un semplice esempio:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Richiesta di ricerca}"></div>
Questo avvia una ricerca con il termine {Richiesta di ricerca} su Gunfinder e i risultati vengono visualizzati sulla pagina. data-gunfinder-search-query è l'unico attributo obbligatorio. Ulteriori attributi possibili possono essere trovati nella tabella seguente. Tutti gli attributi devono avere il prefisso data-gunfinder-search-.
| Attributo | Descrizione | Valori possibili | Obbligatorio |
| query | Richiesta di ricerca | Testo | Sì |
| count | Numero massimo di risultati. Numero intero. Impostazione predefinita: 5 | > 0 < 30 | No |
| price-min | Prezzo minimo. Numero intero. | > 0 < price-max (se specificato) | No |
| price-max | Prezzo massimo. Numero intero. | > 0 > price-min (se specificato) | No |
| condition | Condizione dell'articolo | new o used | No |
| available | Disponibile immediatamente. Impostazione predefinita: false | true o false | No |
| category | Limitazione della ricerca a una categoria specifica | weapon, ammunition, optics, apparel, equipment | No |
| style | Stile. Vedi descrizione qui sotto. | Oggetto JSON | No |
| sources | Elenco separato da virgole con i nomi delle fonti da cercare. Per impostazione predefinita, vengono cercate tutte le fonti. | Per favore contattaci | No |
| exclude-sources | Elenco separato da virgole con i nomi delle fonti che non devono essere cercate(!). Per impostazione predefinita, vengono cercate tutte le fonti. | Per favore contattaci | No |
| marketplace | Se true, mostra solo i risultati del marketplace. Se false, non mostra risultati del marketplace. | true o false | No |
Ulteriori esempi:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Richiesta di ricerca}" data-gunfinder-search-price-min="2500"></div>
<div data-gunfinder-search-widget data-gunfinder-search-query="{Richiesta di ricerca}" data-gunfinder-search-available="true"></div>
Stile
Se il widget non deve essere stilizzato tramite regole CSS, ci sono alcune semplici variabili che possono essere passate al widget come oggetto JSON per modificare l'aspetto del widget.
| Variabile | Descrizione | Valori possibili |
| fontSize | Dimensione del font di base. Influisce su tutto il widget. | Valori CSS standard per le dimensioni |
| itemTitleColor | Colore del titolo dell'offerta | Valori CSS standard per i colori |
| itemPriceColor | Colore del prezzo dell'offerta | Valori CSS standard per i colori |
| moreColor | Colore del testo e del bordo del pulsante "ulteriori offerte" | Valori CSS standard per i colori |
Esempio:
<div data-gunfinder-search-widget data-gunfinder-search-query="{Richiesta}" data-gunfinder-search-style='{"fontSize": "15px", "itemTitleColor": "red"}'></div>