---
title: "Vytvoření webového widgetu v dashboardu"
description: "Nastavte pro svůj web widget click-to-talk na stránce Webové widgety — bez nutnosti volání API."
---

Stránka **Webové widgety** (`/dashboard/web-widgets`) vytváří a spravuje
publikovatelné klíče, které zajišťují vložitelný hlasový widget ThunderPhone.
Vše, co [verze tohoto průvodce pro API](/cs/guides/embed-web-widget)
provádí pomocí cURL, tato stránka provádí pomocí formuláře — navíc vám
vygeneruje kód pro vložení.

## Vytvoření widgetu

<Steps>
  <Step title="Klikněte na Nový widget a vyberte režim">
    - **Režim agenta** — widget vždy spouští jednoho agenta, kterého vyberete
      z rozbalovacího seznamu. Nejjednodušší nastavení.
    - **Režim webhooku** — při každé relaci widgetu ThunderPhone zavolá
      vaši adresu URL webhooku a váš server vrátí konfiguraci agenta
      pro daného návštěvníka (směrování podle stránky, přihlášení uživatelé, postupné zavádění).
      Chcete-li použít výchozí webhook vaší organizace, nechte adresu URL prázdnou;
      při zadání nové adresy URL ji můžete také nastavit jako výchozí pro organizaci.
  </Step>
  <Step title="Uveďte povolené domény">
    Je vyžadována alespoň jedna doména a prohlížeče mohou spouštět
    relace pouze z názvů hostitelů, které uvedete. Zástupné znaky pro subdomény, například
    `*.example.com`, jsou povoleny (odpovídají subdoménám, nikoli samotné
    doméně); samostatné zástupné znaky, například `*`, jsou odmítnuty. Seznam brání běžnému
    opětovnému použití vašeho klíče na jiných webech, ale nejedná se o ověřování: skript
    mimo prohlížeč může odeslat libovolnou hlavičku `Origin`. `localhost` není
    v produkčním prostředí povolen automaticky; pro místní testování vůči produkčnímu rozhraní API
    jej přidejte do seznamu.
  </Step>
  <Step title="Vyberte přepsání z prohlížeče">
    Zaškrtněte každé nastavení relace, které vaše stránka odesílá: **Kontext stránky**,
    **Proměnné**, **Hlas**, **Jazyk**. Nové widgety nepovolují žádné z nich a
    požadavek na relaci obsahující vypnuté nastavení selže s kódem `400`.
    Váš klíč je veřejný, proto povolte pouze to, co používáte. Viz
    [Přepsání z prohlížeče](/cs/guides/embed-web-widget).
  </Step>
  <Step title="Pojmenujte jej, povolte jej a vytvořte">
    Přepínač **Povolit widget** určuje, zda klíč přijímá
    relace — widget můžete vytvořit zakázaný a zapnout jej při spuštění.
  </Step>
</Steps>

## Získejte kód pro vložení

Ihned po vytvoření (nebo pomocí tlačítka **Vložit** v každém řádku) dialog
pro vložení vygeneruje kód připravený k vložení s vyplněným publikovatelným
klíčem:

- **React** — fragment `<ThunderPhoneWidget />` pro aplikace s bundlerem.
- **Značka script** — dvojice CDN `<script>` + stylopis pro libovolný web.

Dialog také zobrazuje náhled základních možností vzhledu — název, primární
barvu, pozici v rohu a světlé/tmavé téma — a vaše volby zahrne
do fragmentu. Úplný přehled props, možnosti stylování a bezhlavou variantu
naleznete v [dokumentaci SDK widgetu](/cs/widget/overview).

<Note>
  Publikovatelné klíče (`pk_live_…`) jsou záměrně veřejné — lze je bezpečně použít
  v kódu front-endu. Kdykoli je zkopírujete tlačítkem kopírování v příslušném řádku.
</Note>

## Správa widgetů ze seznamu

Každý řádek lze upravovat přímo na místě:

- **Režim / Agent** — pomocí vložených výběrů přepínejte mezi režimem agenta
  a režimem webhooku nebo změňte agenta.
- **Domény** — přidávejte nebo odebírejte povolené domény jako štítky.
- **Povolit/zakázat** — přepínač pro každý widget; zakázané widgety okamžitě
  přestanou přijímat relace.
- **Převést do organizace** — zkopírujte nebo přesuňte widget do jiné organizace,
  jejímž jste členem (přesunutím jej odtud odeberete).
- **Smazat** — zruší publikovatelný klíč; widget okamžitě přestane fungovat
  na všech doménách. Tuto akci nelze vrátit zpět.

Relace widgetu se zobrazují v [historii hovorů](/cs/guides/review-calls) se stejným
přepisem, nahrávkou a hodnocením jako telefonní hovory.

## Další kroky

<CardGroup cols={2}>
  <Card title="Referenční dokumentace SDK widgetu" icon="window-maximize" href="/cs/widget/overview">
    Podrobnosti o komponentě React, bezhlavém hooku a skriptu CDN.
  </Card>
  <Card title="Směrování v režimu webhooku" icon="bolt" href="/cs/guides/dynamic-call-config">
    Vraťte konfiguraci agenta pro každého návštěvníka ze svého serveru.
  </Card>
</CardGroup>