---
title: "Vytvorte webový widget na paneli"
description: "Nastavte pre svoj web widget click-to-talk na stránke Web Widgets — bez nutnosti volaní API."
---

Stránka **Webové widgety** (`/dashboard/web-widgets`) vytvára a spravuje
verejné kľúče, ktoré poháňajú vložiteľný hlasový widget ThunderPhone.
Všetko, čo [verzia tohto návodu pre API](/sk/guides/embed-web-widget)
vykonáva pomocou cURL, táto stránka vykonáva pomocou formulára — navyše vám vygeneruje
kód na vloženie.

## Vytvorte widget

<Steps>
  <Step title="Kliknite na Nový widget a vyberte režim">
    - **Režim agenta** — widget vždy spúšťa jedného hlasového agenta, ktorého vyberiete
      z rozbaľovacieho zoznamu. Najjednoduchšie nastavenie.
    - **Režim webhooku** — pri každej relácii widgetu ThunderPhone zavolá
      URL vášho webhooku a váš server vráti konfiguráciu agenta
      pre daného návštevníka (smerovanie podľa stránky, prihlásení používatelia, nasadenia).
      Ak chcete použiť predvolený webhook organizácie, nechajte URL prázdne;
      pri zadaní novej URL ju môžete nastaviť aj ako predvolenú pre organizáciu.
  </Step>
  <Step title="Uveďte povolené domény">
    Verejné kľúče sú viazané na pôvod: vyžaduje sa aspoň jedna doména
    a widget funguje len na hostiteľských názvoch, ktoré uvediete. Zástupné znaky
    pre subdomény, napríklad `*.example.com`, sú povolené (zodpovedajú subdoménam,
    nie samotnej doméne); samostatné zástupné znaky, napríklad `*`, sú zamietnuté.
    `localhost` a `127.0.0.1` sú vždy povolené, takže lokálny vývoj
    funguje bez ich uvedenia.
  </Step>
  <Step title="Pomenujte ho, povoľte ho a vytvorte ho">
    Prepínač **Povoliť widget** určuje, či kľúč prijíma
    relácie — widget môžete vytvoriť zakázaný a zapnúť ho pri spustení.
  </Step>
</Steps>

## Získajte kód na vloženie

Ihneď po vytvorení (alebo prostredníctvom tlačidla **Vložiť** v každom riadku) dialóg
na vloženie vygeneruje kód pripravený na vloženie s vyplneným vaším verejným kľúčom:

- **React** — úryvok `<ThunderPhoneWidget />` pre aplikácie s bundlerom.
- **Značka script** — dvojica CDN `<script>` + štýlového súboru pre ľubovoľnú stránku.

Dialóg zároveň zobrazuje ukážku základných možností vzhľadu — názov, primárnu
farbu, pozíciu v rohu a svetlú/tmavú tému — a vaše voľby
zapracuje do úryvku. Úplný prehľad vlastností, možností úprav štýlov a
bezhlavú možnosť nájdete v [dokumentácii SDK widgetu](/sk/widget/overview).

<Note>
  Verejné kľúče (`pk_live_…`) sú zámerne verejné — je bezpečné ich použiť
  v kóde frontendu. Kedykoľvek ho skopírujete tlačidlom kopírovania v jeho riadku.
</Note>

## Spravujte widgety zo zoznamu

Každý riadok sa upravuje priamo na mieste:

- **Režim / Agent** — pomocou vložených výberov prepínajte medzi režimom agenta
  a webhooku alebo zmeňte agenta.
- **Domény** — pridávajte alebo odstraňujte povolené domény ako štítky.
- **Povoliť/zakázať** — prepínač pre každý widget; zakázané widgety okamžite
  prestanú prijímať relácie.
- **Preniesť do organizácie** — skopírujte alebo presuňte widget do inej organizácie,
  do ktorej patríte (presunutím sa odtiaľto odstráni).
- **Odstrániť** — zruší verejný kľúč; widget okamžite prestane fungovať
  na všetkých doménach. Túto akciu nemožno vrátiť späť.

Relácie widgetov sa zobrazujú v [histórii hovorov](/sk/guides/review-calls) s rovnakým
prepisom, nahrávkou a hodnotením ako telefonické hovory.

## Ďalšie kroky

<CardGroup cols={2}>
  <Card title="Referenčná dokumentácia SDK widgetu" icon="window-maximize" href="/sk/widget/overview">
    Podrobnosti o komponente React, bezhlavom hooku a skripte CDN.
  </Card>
  <Card title="Smerovanie v režime webhooku" icon="bolt" href="/sk/guides/dynamic-call-config">
    Vráťte konfiguráciu agenta pre každého návštevníka z vášho servera.
  </Card>
</CardGroup>