[Sugester V2 EN](https://sugester.intum.com/kb/sugester-v2-en.md) / [Knowledge Base](https://sugester.intum.com/kb/sugester-v2-en/knowledge-base.md)

# [Knowledge Base Widget — embedding and configuration](https://sugester.intum.com/kb/sugester-v2-en/knowledge-base-widget-embedding-and-configuration.md)

## What is the Knowledge Base Widget?

The KB widget is a tab embedded on any webpage that provides users with quick access to Knowledge Base articles — without leaving the page.

When the tab is clicked, a sidebar opens with:
- **search** for articles
- **Popular**, **Latest**, and **Categories** tabs
- the ability to browse entries by category

## How to embed the widget?

Copy the embed code from the Knowledge Base settings (**Knowledge Base → select base → Widget section**) and paste it before the `</body>` tag on your page:

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

## Configuration Parameters

| Parameter | Description | Values | Default |
|-----------|-------------|--------|---------|
| `account_url` | Your account URL | — | required |
| `kb_token` | Knowledge Base Token | — | required |
| `locale` | Widget language | `pl`, `en`, `cs`, `sk`, `fr`, `de`, `es`, `uk` | `pl` |
| `position` | Screen side | `right`, `left` | `right` |
| `color` | Tab and header color | any CSS color (hex) | `#3b82f6` |
| `tab_offset` | Vertical position of the tab | CSS `top` value | `50%` |
| `label` | Custom text on the tab | any text | from translations (`Help`) |
| `product` | Branding in the footer | `intum`, `sugester` | `intum` |

## Tab Position (tab_offset)

The `tab_offset` parameter controls the **vertical position** of the tab on the screen. It accepts any CSS value for the `top` property:

| Value | Effect |
|-------|--------|
| `"20%"` | close to the top edge |
| `"50%"` | center of the screen (default) |
| `"80%"` | close to the bottom edge |
| `"200px"` | 200 pixels from the top |
| `"calc(100% - 50px)"` | 50 pixels from the bottom |

### Examples

**Tab on the left side, at the top of the screen:**
```js
var IntumKbWidget = {
    account_url: "https://your-account.sugester.pl",
    kb_token: "TOKEN",
    locale: "pl",
    position: "left",
    color: "#10b981",
    tab_offset: "25%"
};
```

**Tab on the right, at the bottom of the screen, with custom text:**
```js
var IntumKbWidget = {
    account_url: "https://your-account.sugester.pl",
    kb_token: "TOKEN",
    locale: "en",
    position: "right",
    color: "#8b5cf6",
    tab_offset: "85%",
    label: "FAQ"
};
```

## Widget Test Page

In the Knowledge Base settings, there is a **widget test page** — it allows you to see how the widget looks and works without embedding it on your page. Link: **Knowledge Base → select base → Widget testing**.

## Widget Footer

At the bottom of the widget panel, a footer is displayed with the link "Powered by Intum" (or "Powered by Sugester" — depending on the `product` parameter).