Helpdesk - widget (osadzenie na stronie)

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>:

<!-- 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:

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:

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:

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");