[Intum Pomoc](https://intum.pl/pomoc.md) / [Portal i widget](https://intum.pl/pomoc/helpdesk/portal-i-widget.md)

# [Widget na stronie](https://intum.pl/pomoc/helpdesk/helpdesk-widget-na-stronie.md)

Widget to okienko zgłoszeń, które wklejasz na własną stronę (albo w panel klienta swojej
aplikacji) - klient zakłada w nim zgłoszenie i widzi odpowiedzi zespołu bez logowania się do
Intum.

> [!PATH]
> [Helpdesk → Desks](app:/helpdesk/desks) → *skrzynka* → **Edycja Desku** → **Widget**

## Osadzenie kodu {#osadzenie-kodu}

Każdy desk ma własny kod widgetu - kopiujesz go z karty desku (zakładka **Widget**) i wklejasz
przed `</body>` na stronie, na której ma się pokazywać:

```html
<!-- Intum Helpdesk Widget #12 START -->
<div id="intum-helpdesk-widget"></div>
<script>
  var IntumHelpdeskWidget = {
    account_url: "https://twojekonto.intum.pl",
    desk_token: "xxxxxxxxxxxx",
    client_external_id: "CRM-123",
    client_url: "https://klient.pl",
    client_email: "jan@klient.pl",
    client_name: "Jan Kowalski",
    user_external_id: "USR-456",
    user_email: "user@twojafirma.pl",
    user_phone: "+48123456789",
    user_name: "User Name",
    client_plan: "Pro",
    locale: "pl"
  };
</script>
<script src="https://twojekonto.intum.pl/helpdesk/widget.js"></script>
<!-- Intum Helpdesk Widget #12 END -->
```

Pola `client_*` i `user_*` wypełnia Twoja strona (albo aplikacja) danymi zalogowanej osoby -
dzięki nim zgłoszenie od razu ma przypisanego klienta i osobę kontaktową, a `client_external_id`
pozwala potem pokazać klientowi listę jego własnych zgłoszeń (patrz niżej). Wszystkie te pola są
opcjonalne - puste okienko też działa, tylko zgłoszenie nie będzie miało powiązanego klienta.

Zanim wkleisz kod na produkcyjną stronę, sprawdź go na [stronie testowej
desku](helpdesk/helpdesk-testowanie-widgetu) - zobaczysz dokładnie to, co zobaczy klient.

Reguły, na których adresach strony widget ma się w ogóle pokazywać (**Pokaż tylko na
stronach**/**Ukryj na stronach**), ustawiasz na karcie desku - opisane w [pomocy
Desku](helpdesk/helpdesk-desk#tresc-pomocy-i-widocznosc).

## Podpis zabezpieczający {#podpis-zabezpieczajacy}

Gdy osadzasz widget w panelu klienta swojej aplikacji (nie na publicznej stronie), warto włączyć
na desku **Podpis zabezpieczający** - bez niego ktoś znający `desk_token` mógłby w konsoli
przeglądarki podać cudzy `client_email`/`client_external_id` i podszyć się pod innego klienta.
Z włączonym podpisem widget odrzuca dane, dopóki nie dostanie poprawnego pola `signature` -
Twój backend liczy je kluczem tajnym desku (HMAC-SHA256 z posortowanych parametrów
`client_*`/`user_*`), dokładnie tak samo jak to policzy sam Intum. Klucz tajny i gotowy przykład
liczenia podpisu znajdziesz na karcie desku, zakładka **Widget** - opisane w [pomocy
Desku](helpdesk/helpdesk-desk#bezpieczenstwo).

> [!WARNING]
> Podpis liczysz zawsze po stronie swojego backendu (tam, gdzie masz klucz tajny) - nigdy w
> kodzie strony widocznym dla przeglądarki. Wpisanie klucza tajnego w kod strony całkowicie
> unieważnia sens podpisu.

## Co widzi klient w widgecie {#co-widzi-klient}

- **Nowe zgłoszenie** - klient wpisuje temat i treść, opcjonalnie dołącza załączniki (jeśli desk
  ma włączone **Załączniki**) i - gdy w koncie jest więcej niż jeden aktywny desk albo desk ma
  kategorie - wybiera desk i kategorię.
- **Odpowiedź AI przed zgłoszeniem** - jeśli desk ma włączoną [odpowiedź
  AI](helpdesk/helpdesk-ai-w-desku), zanim zgłoszenie trafi do zespołu, widget najpierw próbuje
  odpowiedzieć klientowi sam na podstawie bazy wiedzy desku. Klient widzi tę odpowiedź od razu w
  oknie rozmowy i może ją ocenić kciukiem w górę/w dół; jeśli odpowiedź go nie satysfakcjonuje,
  zgłoszenie i tak trafia do zespołu.
- **Lista własnych zgłoszeń** - gdy widget dostał `client_external_id`, klient widzi listę
  wcześniej założonych przez siebie zgłoszeń (tego klienta, niezależnie od tego, kto z jego strony
  je zakładał) i może otworzyć każde z nich, przeczytać odpowiedzi zespołu i dopisać własny
  komentarz.
- **E-mail z linkiem bez logowania** - jeśli desk ma włączone powiadomienia mailem (zakładka
  **E-mail** na karcie desku), klient dostaje e-mail o nowym zgłoszeniu i o każdej odpowiedzi
  zespołu z linkiem, który otwiera to jedno zgłoszenie w widgecie bez podawania hasła - wygodne,
  gdy strona z widgetem nie ma własnego logowania.
- **Załączniki** - dozwolone typy plików (m.in. obrazy, PDF, Word, Excel, ZIP, pliki tekstowe) i
  limit 10 MB na plik są takie same jak przy załącznikach dodawanych przez zespół.

## Gdy coś nie działa {#gdy-cos-nie-dziala}

Objawy związane z widgetem (nie pokazuje się, odrzuca dane, brak odpowiedzi AI) i co sprawdzić:
[Szybka pomoc](helpdesk/helpdesk-szybka-pomoc).