> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thunderphone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Luo verkkosivuwidget hallintapaneelissa

> Määritä sivustollesi napsauttamalla soitettava widgetti Verkkowidgetit-sivulla — API-kutsuja ei tarvita.

**Web-widgetit**-sivu (`/dashboard/web-widgets`) luo ja hallinnoi
julkaistavia avaimia, jotka mahdollistavat ThunderPhonen upotettavan
puhewidgetin. Kaiken, minkä tämän oppaan [API-versio](/fi/guides/embed-web-widget)
tekee cURLilla, tämä sivu tekee lomakkeella — ja lisäksi se luo
upotuskoodin puolestasi.

## Luo widget

<Steps>
  <Step title="Napsauta Uusi widget ja valitse tila">
    * **Agenttitila** — widget käyttää aina yhtä pudotusvalikosta valitsemaasi
      agenttia. Yksinkertaisin määritys.
    * **Webhook-tila** — jokaisessa widget-istunnossa ThunderPhone kutsuu
      webhook-URL-osoitettasi, ja palvelimesi palauttaa kyseisen kävijän
      agenttimäärityksen (sivukohtainen reititys, sisäänkirjautuneet käyttäjät,
      käyttöönotot). Jätä URL-osoite tyhjäksi käyttääksesi organisaatiosi
      oletuswebhookia; kun annat uuden URL-osoitteen, voit myös asettaa sen
      organisaation oletusarvoksi.
  </Step>

  <Step title="Listaa sallitut verkkotunnukset">
    Julkaistavat avaimet on rajoitettu alkuperään: vähintään yksi verkkotunnus
    vaaditaan, ja widget toimii vain listaamillasi isäntänimillä. Aliverkkotunnusten
    yleismerkit, kuten `*.example.com`, ovat sallittuja (ne vastaavat
    aliverkkotunnuksia, eivät paljasta verkkotunnusta); paljaat yleismerkit,
    kuten `*`, hylätään. `localhost` ja `127.0.0.1` ovat aina sallittuja,
    joten paikallinen kehitys toimii ilman niiden listaamista.
  </Step>

  <Step title="Nimeä se, ota käyttöön ja luo">
    **Ota widget käyttöön** -kytkin määrittää, hyväksyykö avain
    istuntoja — voit luoda widgetin poissa käytöstä ja ottaa sen käyttöön
    julkaisun yhteydessä.
  </Step>
</Steps>

## Nouda upotuskoodi

Heti luomisen jälkeen (tai kunkin rivin **Upota**-painikkeella) upotus-
valintaikkuna luo valmiin liitettävän koodin, johon julkaistava avaimesi on
täytetty:

* **React** — `<ThunderPhoneWidget />`-katkelma paketoijaa käyttäville sovelluksille.
* **Skriptitagi** — CDN-`<script>`- ja tyylitiedostopari mille tahansa sivustolle.

Valintaikkuna esikatselee myös ulkoasun perusasetuksia — otsikkoa,
pääväriä, kulmasijaintia sekä vaaleaa/tummaa teemaa — ja sisällyttää
valintasi katkelmaan. Katso täydelliset prop-viitteet, tyylikoukut ja
headless-vaihtoehto [widget SDK:n dokumentaatiosta](/fi/widget/overview).

<Note>
  Julkaistavat avaimet (`pk_live_…`) ovat suunnitellusti julkisia — ne on
  turvallista toimittaa käyttöliittymäkoodissa. Kopioi avain milloin tahansa
  sen rivin kopiointipainikkeella.
</Note>

## Hallitse widgetejä luettelosta

Jokaista riviä muokataan suoraan paikallaan:

* **Tila / Agentti** — vaihda agentti- ja webhook-tilan välillä tai vaihda
  agentti rivinsisäisillä valinnoilla.
* **Verkkotunnukset** — lisää tai poista sallittuja verkkotunnuksia tunnisteina.
* **Ota käyttöön / poista käytöstä** — kytkin jokaiselle widgetille; käytöstä
  poistetut widgetit lakkaavat hyväksymästä istuntoja välittömästi.
* **Siirrä organisaatioon** — kopioi tai siirrä widget toiseen organisaatioon,
  johon kuulut (siirtäminen poistaa sen täältä).
* **Poista** — peruuttaa julkaistavan avaimen; widget lakkaa toimimasta
  välittömästi kaikissa verkkotunnuksissa. Tätä ei voi kumota.

Widget-istunnot näkyvät [puheluhistoriassa](/fi/guides/review-calls) samalla
transkriptillä, tallenteella ja arvioinnilla kuin puhelut.

## Seuraavat vaiheet

<CardGroup cols={2}>
  <Card title="Widget SDK -viite" icon="window-maximize" href="/fi/widget/overview">
    React-komponentin, headless-koukun ja CDN-skriptin tiedot.
  </Card>

  <Card title="Webhook-tilan reititys" icon="bolt" href="/fi/guides/dynamic-call-config">
    Palauta kävijäkohtainen agenttimääritys palvelimeltasi.
  </Card>
</CardGroup>