---
title: "Luo verkkosivuwidget hallintapaneelissa"
description: "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ä avattavasta valikosta
      valitsemaasi agenttia. Yksinkertaisin määritys.
    - **Webhook-tila** — ThunderPhone kutsuu webhook-URL-osoitettasi jokaisen
      widget-istunnon yhteydessä, ja palvelimesi palauttaa agentin määrityksen
      kyseiselle kävijälle (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 oletukseksi.
  </Step>
  <Step title="Listaa sallitut verkkotunnukset">
    Vähintään yksi verkkotunnus vaaditaan, ja selaimet voivat aloittaa
    istuntoja vain luettelemistasi isäntänimistä. Aliverkkotunnusten
    jokerimerkit, kuten `*.example.com`, ovat sallittuja (ne vastaavat
    aliverkkotunnuksia, eivät paljasta verkkotunnusta); paljaat jokerimerkit,
    kuten `*`, hylätään. Luettelo estää avaimesi satunnaisen uudelleenkäytön
    muilla sivustoilla, mutta se ei ole todennus: selaimen ulkopuolinen skripti
    voi lähettää minkä tahansa `Origin`-otsakkeen. `localhost` ei ole
    automaattisesti sallittu tuotannossa; lisää se luetteloon testataksesi
    paikallisesti tuotanto-APIa vasten.
  </Step>
  <Step title="Valitse selaimen ohitukset">
    Valitse jokainen istuntoasetus, jonka sivusi lähettää: **Sivun konteksti**,
    **Muuttujat**, **Ääni**, **Kieli**. Uudet widgetit eivät hyväksy mitään,
    ja istuntopyyntö, joka sisältää poissa käytöstä olevan asetuksen, epäonnistuu koodilla `400`.
    Avaimesi on julkinen, joten salli vain käyttämäsi asetukset. Katso
    [Selaimen ohitukset](/fi/guides/embed-web-widget).
  </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>