---
title: "Utwórz widżet internetowy w panelu"
description: "Skonfiguruj widżet „kliknij, aby rozmawiać” dla swojej witryny na stronie Widżety internetowe — bez wywołań API."
---

Strona **Widżety internetowe** (`/dashboard/web-widgets`) tworzy i zarządza
kluczami publicznymi, które obsługują osadzany widżet głosowy ThunderPhone.
Wszystko, co [wersja API tego przewodnika](/pl/guides/embed-web-widget)
robi za pomocą cURL, ta strona robi za pomocą formularza — dodatkowo generuje
dla Ciebie kod do osadzenia.

## Utwórz widżet

<Steps>
  <Step title="Kliknij Nowy widżet i wybierz tryb">
    - **Tryb agenta** — widżet zawsze uruchamia jednego agenta głosowego wybranego
      z listy rozwijanej. Najprostsza konfiguracja.
    - **Tryb webhooka** — przy każdej sesji widżetu ThunderPhone wywołuje
      adres URL webhooka, a serwer zwraca konfigurację agenta
      dla danego odwiedzającego (routing według strony, zalogowani użytkownicy, wdrożenia).
      Pozostaw adres URL pusty, aby użyć domyślnego webhooka organizacji;
      po wprowadzeniu nowego adresu URL możesz także ustawić go jako domyślny dla organizacji.
  </Step>
  <Step title="Wymień dozwolone domeny">
    Wymagana jest co najmniej jedna domena, a przeglądarki mogą rozpoczynać
    sesje wyłącznie z wymienionych nazw hostów. Dozwolone są symbole wieloznaczne
    dla subdomen, takie jak `*.example.com` (dopasowują subdomeny, ale nie samą
    domenę); ogólne symbole wieloznaczne, takie jak `*`, są odrzucane. Lista zapobiega przypadkowemu
    ponownemu użyciu klucza w innych witrynach, ale nie stanowi uwierzytelniania: skrypt
    poza przeglądarką może wysłać dowolny nagłówek `Origin`. `localhost` nie jest
    automatycznie dozwolony w środowisku produkcyjnym; dodaj go do listy, aby testować
    lokalnie z użyciem produkcyjnego API.
  </Step>
  <Step title="Wybierz nadpisania z przeglądarki">
    Zaznacz każde ustawienie sesji wysyłane przez stronę: **Kontekst strony**,
    **Zmienne**, **Głos**, **Język**. Nowe widżety nie akceptują żadnego z nich, a
    żądanie sesji zawierające wyłączone ustawienie kończy się błędem `400`.
    Klucz jest publiczny, więc zezwalaj tylko na to, czego używasz. Zobacz
    [Nadpisania z przeglądarki](/pl/guides/embed-web-widget).
  </Step>
  <Step title="Nadaj nazwę, włącz i utwórz">
    Przełącznik **Włącz widżet** kontroluje, czy klucz akceptuje
    sesje — możesz utworzyć wyłączony widżet i włączyć go przy uruchomieniu.
  </Step>
</Steps>

## Pobierz kod do osadzenia

Bezpośrednio po utworzeniu (lub za pomocą przycisku **Osadź** w każdym wierszu) okno
osadzania generuje gotowy do wklejenia kod z uzupełnionym kluczem publicznym:

- **React** — fragment `<ThunderPhoneWidget />` dla aplikacji używających bundlera.
- **Tag skryptu** — para CDN `<script>` + arkusz stylów dla dowolnej witryny.

Okno wyświetla również podgląd podstawowych opcji wyglądu — tytułu, koloru
podstawowego, położenia w rogu i jasnego/ciemnego motywu — oraz uwzględnia Twoje wybory
we fragmencie kodu. Pełny opis właściwości, punkty rozszerzeń stylizacji oraz
opcję headless znajdziesz w [dokumentacji SDK widżetu](/pl/widget/overview).

<Note>
  Klucze publiczne (`pk_live_…`) są z założenia publiczne — można je bezpiecznie umieszczać
  w kodzie front-endu. W dowolnym momencie skopiuj klucz przyciskiem kopiowania w jego wierszu.
</Note>

## Zarządzaj widżetami z listy

Każdy wiersz można edytować na miejscu:

- **Tryb / Agent** — przełączaj między trybem agenta i webhooka lub zmieniaj
  agenta za pomocą selektorów wbudowanych w wiersz.
- **Domeny** — dodawaj lub usuwaj dozwolone domeny jako etykiety.
- **Włącz/wyłącz** — przełącznik dla każdego widżetu; wyłączone widżety natychmiast
  przestają akceptować sesje.
- **Przenieś do organizacji** — skopiuj lub przenieś widżet do innej organizacji,
  do której należysz (przeniesienie usuwa go tutaj).
- **Usuń** — unieważnia klucz publiczny; widżet natychmiast przestaje działać
  we wszystkich domenach. Tej operacji nie można cofnąć.

Sesje widżetu pojawiają się w [historii połączeń](/pl/guides/review-calls) z takim samym
transkryptem, nagraniem i oceną jak połączenia telefoniczne.

## Dalsze kroki

<CardGroup cols={2}>
  <Card title="Dokumentacja SDK widżetu" icon="window-maximize" href="/pl/widget/overview">
    Szczegóły komponentu React, hooka headless i skryptu CDN.
  </Card>
  <Card title="Routing w trybie webhooka" icon="bolt" href="/pl/guides/dynamic-call-config">
    Zwracaj konfigurację agenta dla każdego użytkownika ze swojego serwera.
  </Card>
</CardGroup>