[Sugester V2](https://pomoc.sugester2.pl.md) / [Helpdesk / Tickety](https://pomoc.sugester2.pl/helpdesk-2.md)

# [Helpdesk - widget (osadzenie na stronie)](https://pomoc.sugester2.pl/helpdesk-widget-osadzenie-na-stronie-7sSvyenH.md)

## Widget - osadzenie na stronie

Widget pozwala klientom składać zgłoszenia bezpośrednio z Twojej strony lub aplikacji.

### Gdzie znaleźć kod widgetu?

1. Przejdź do **Helpdesk → Stanowiska**
2. Kliknij na nazwę stanowiska (np. "Wsparcie techniczne")
3. Na dole strony znajdziesz sekcję **Kod widgetu** z gotowym kodem do skopiowania

### Jak osadzić widget?

Skopiuj kod i wklej go na swojej stronie przed tagiem `</body>`:

```html
<!-- Intum Helpdesk Widget START -->
<link rel="stylesheet" href="https://twoja-domena.sugester2.pl/helpdesk/desks/widget.css">
<div id="intum-helpdesk-widget"></div>
<script>
  var IntumHelpdeskWidget = {
      account_url: "https://twoja-domena.sugester2.pl",
      desk_token: "TWOJ_TOKEN_STANOWISKA",
      locale: "pl"
  };
</script>
<script src="https://twoja-domena.sugester2.pl/helpdesk/desks/widget.js"></script>
<!-- Intum Helpdesk Widget END -->
```

### Tryby pracy widgetu

Widget może działać w dwóch trybach:

**1. Tylko formularz nowego zgłoszenia**

Jeśli nie przekażesz `client_external_id`, klient zobaczy tylko formularz do wysłania nowego zgłoszenia. Nie będzie mógł przeglądać swoich wcześniejszych ticketów.

**2. Panel klienta z listą zgłoszeń**

Jeśli przekażesz `client_external_id`, klient zobaczy:
- Listę swoich wcześniejszych zgłoszeń ("Moje zgłoszenia")
- Możliwość kliknięcia w ticket by zobaczyć szczegóły i komentarze
- Przycisk "+ Nowe zgłoszenie"

Aby ten tryb działał, musisz:
1. Włączyć weryfikację podpisu w ustawieniach stanowiska
2. Przekazać prawidłowy podpis `signature` w konfiguracji widgetu
3. Upewnić się, że tickety mają przypisany ten sam `client_external_id`

### Przekazywanie danych klienta

Jeśli znasz dane zalogowanego użytkownika, możesz je przekazać do widgetu:

```javascript
var IntumHelpdeskWidget = {
    account_url: "https://twoja-domena.sugester2.pl",
    desk_token: "TWOJ_TOKEN",
    // Dane klienta (firmy)
    client_external_id: "CRM-123",
    client_email: "firma@example.com",
    client_name: "Nazwa Firmy Sp. z o.o.",
    // Dane użytkownika (osoby)
    user_external_id: "USR-456",
    user_email: "jan.kowalski@firma.com",
    user_name: "Jan Kowalski",
    user_phone: "+48123456789",
    // Podpis (wymagany gdy włączona weryfikacja)
    signature: "abc123...",
    locale: "pl"
};
```

Dzięki temu:
- Formularz będzie wstępnie wypełniony
- Ticket zostanie automatycznie powiązany z klientem w CRM
- Klient zobaczy swoje wcześniejsze zgłoszenia (jeśli włączona weryfikacja podpisu)

### Strona testowa

Każde stanowisko ma stronę testową, gdzie możesz wypróbować widget bez osadzania go na zewnętrznej stronie. W widoku stanowiska kliknij przycisk **Testuj**.

## Bezpieczeństwo widgetu (HMAC)

Dla zwiększenia bezpieczeństwa możesz włączyć weryfikację podpisu HMAC w ustawieniach stanowiska. Wtedy każde żądanie z widgetu musi zawierać prawidłowy podpis.

**Ważne:** Weryfikacja podpisu jest wymagana, aby klient mógł przeglądać swoje wcześniejsze zgłoszenia. Bez niej widoczny jest tylko formularz nowego zgłoszenia.

### Jak działa HMAC?

1. W ustawieniach stanowiska włącz **Wymagaj podpisu**
2. System wygeneruje **tajny klucz** (secret_key)
3. Na swojej stronie oblicz podpis z danych klienta i tajnego klucza
4. Przekaż podpis w parametrze `signature`

### Przykład w Ruby:

```ruby
params = {
  client_email: "jan@example.com",
  client_external_id: "CRM-123",
  user_email: "user@firma.com"
}
data = params.select { |k,v| v.present? }.sort.map { |k,v| "#{k}=#{v}" }.join("&")
signature = OpenSSL::HMAC.hexdigest("sha256", secret_key, data)
```

### Przykład w Node.js:

```javascript
const crypto = require("crypto");
const params = { client_email: "jan@example.com", client_external_id: "CRM-123" };
const data = Object.entries(params).filter(([k,v]) => v).sort().map(([k,v]) => k+"="+v).join("&");
const signature = crypto.createHmac("sha256", secretKey).update(data).digest("hex");
```