[Sugester V2](https://pomoc.sugester2.pl.md) / [Baza Wiedzy](https://pomoc.sugester2.pl/baza-wiedzy-2.md)

# [Widget Bazy Wiedzy — osadzanie i konfiguracja](https://pomoc.sugester2.pl/widget-bazy-wiedzy-osadzanie-i-konfiguracja.md)

## Czym jest widget Bazy Wiedzy?

Widget KB to zakładka osadzana na dowolnej stronie internetowej, która daje użytkownikom szybki dostęp do artykułów z Bazy Wiedzy — bez opuszczania strony.

Po kliknięciu zakładki otwiera się panel boczny z:
- **wyszukiwarką** artykułów
- zakładkami **Popularne**, **Najnowsze** i **Kategorie**
- możliwością przeglądania wpisów per kategoria

## Jak osadzić widget?

Skopiuj kod embed z ustawień Bazy Wiedzy (**Baza Wiedzy → wybierz bazę → sekcja Widget**) i wklej go przed tagiem `</body>` na swojej stronie:

```html
<script>
  var IntumKbWidget = {
    account_url: "https://twoje-konto.sugester.pl",
    kb_token: "TOKEN_BAZY_WIEDZY",
    locale: "pl",
    position: "right",
    color: "#3b82f6",
    tab_offset: "50%"
  };
</script>
<script src="URL_WIDGETU"></script>
```

## Parametry konfiguracji

| Parametr | Opis | Wartości | Domyślna |
|----------|------|----------|----------|
| `account_url` | URL Twojego konta | — | wymagany |
| `kb_token` | Token Bazy Wiedzy | — | wymagany |
| `locale` | Język widgetu | `pl`, `en`, `cs`, `sk`, `fr`, `de`, `es`, `uk` | `pl` |
| `position` | Strona ekranu | `right`, `left` | `right` |
| `color` | Kolor zakładki i nagłówka | dowolny kolor CSS (hex) | `#3b82f6` |
| `tab_offset` | Pozycja pionowa zakładki | wartość CSS `top` | `50%` |
| `label` | Własny tekst na zakładce | dowolny tekst | z tłumaczeń (`Pomoc`) |
| `product` | Branding w stopce | `intum`, `sugester` | `intum` |

## Pozycja zakładki (tab_offset)

Parametr `tab_offset` kontroluje **pionowe położenie** zakładki na ekranie. Przyjmuje dowolną wartość CSS dla właściwości `top`:

| Wartość | Efekt |
|---------|-------|
| `"20%"` | blisko górnej krawędzi |
| `"50%"` | środek ekranu (domyślnie) |
| `"80%"` | blisko dolnej krawędzi |
| `"200px"` | 200 pikseli od góry |
| `"calc(100% - 50px)"` | 50 pikseli od dołu |

### Przykłady

**Zakładka po lewej stronie, w górnej części ekranu:**
```js
var IntumKbWidget = {
    account_url: "https://twoje-konto.sugester.pl",
    kb_token: "TOKEN",
    locale: "pl",
    position: "left",
    color: "#10b981",
    tab_offset: "25%"
};
```

**Zakładka po prawej, na dole ekranu, z własnym tekstem:**
```js
var IntumKbWidget = {
    account_url: "https://twoje-konto.sugester.pl",
    kb_token: "TOKEN",
    locale: "en",
    position: "right",
    color: "#8b5cf6",
    tab_offset: "85%",
    label: "FAQ"
};
```

## Strona testowa

W ustawieniach Bazy Wiedzy dostępna jest **strona testowa widgetu** — pozwala zobaczyć jak widget wygląda i działa bez osadzania go na swojej stronie. Link: **Baza Wiedzy → wybierz bazę → Widget testing**.

## Stopka widgetu

W dolnej części panelu widgetu wyświetlana jest stopka z linkiem "Powered by Intum" (lub "Powered by Sugester" — zależnie od parametru `product`).