---
title: "Lisa veebividin manustatud kujul"
description: "Lisa häälagent oma turundus- või tugisaidile ühe skriptisildiga — külastajad saavad sellega rääkida otse brauserist, telefoninumbrit pole vaja."
---

Veebividin annab sinu saidi külastajatele brauseri mikrofoni abil klõpsuga algatatava vestluse AI-häälagendiga. See on eraldi JavaScripti / Reacti SDK koos oma [SDK viitega](/et/widget/overview) — see juhend keskendub ThunderPhone'i-poolsele seadistusele, mida vidin vajab.

<Note>
  Saad seda kõike teha ilma cURL-ita: juhtpaneeli leht **Veebividinad**
  (`/dashboard/web-widgets`) loob vidina, määrab selle režiimi
  ja agendi, haldab lubatud domeene ning annab sulle manustamiskoodi.
</Note>

## Eeldused

<Steps>
  <Step title="Loo agent">
    Agent, kelle viip ja hääl vidina seansis töötavad. Määra
    `widget_enabled: true` (vaikeväärtus).
  </Step>
  <Step title="Vali marsruutimisrežiim">
    - `mode="agent"` — üks staatiline agent võtme kohta. Kõige lihtsam.
    - `mode="webhook"` — sinu server valib agendi iga külastaja jaoks
      [`web.incoming` webhooki](/et/webhooks/call-incoming) kaudu. Kasuta seda
      sisselogitud kasutajate, A/B-testide või lehepõhise marsruutimise jaoks.
  </Step>
  <Step title="Loetle lubatud domeenid">
    Avaldatavad võtmed on päritolupõhiselt lukustatud. Pead nimetama iga hostinime,
    kuhu vidin manustatakse. `localhost` / `127.0.0.1` on kohaliku arenduse ajal
    alati lubatud.
  </Step>
</Steps>

## Loo avaldatav võti

<CodeGroup>
```bash Static agent
curl -X POST https://api.thunderphone.com/v1/publishable-key \
  -H "Authorization: Bearer sk_live_YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name":            "Marketing site (prod)",
    "mode":            "agent",
    "agent_id":        12,
    "allowed_domains": ["example.com", "*.example.com"]
  }'
```

```bash Dynamic via webhook
curl -X POST https://api.thunderphone.com/v1/publishable-key \
  -H "Authorization: Bearer sk_live_YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name":            "Support (dynamic)",
    "mode":            "webhook",
    "webhook_url":     "https://example.com/thunderphone/widget-hook",
    "allowed_domains": ["support.example.com"]
  }'
```
</CodeGroup>

Vastus sisaldab `key` väärtust, mis algab tekstiga `pk_live_...`. **Avaldatavad
võtmed on kavandatult avalikud** — neid on turvaline lisada sinu front-endi paketti.
Kõigi väljade kohta vaata [avaldatavate võtmete viidet](/api-reference/publishable-keys).

<Warning>
  `allowed_domains` peab sisaldama vähemalt üht kirjet. `*.example.com`
  vastab alamdomeenidele (nt `api.example.com`), kuid **mitte** paljale
  domeenile. Paljad metamärgid nagu `*` või `*.*` lükatakse tagasi.
</Warning>

## Lisa vidin oma saidile

Kolme integreerimisviisi kirjeldatakse
[vidina SDK dokumentatsioonis](/et/widget/overview):

<CardGroup cols={3}>
  <Card title="Reacti komponent" icon="react" href="/et/widget/react">
    `<ThunderPhoneWidget publishableKey="pk_live_..." />`.
  </Card>
  <Card title="Kasutajaliideseta hook" icon="circle-nodes" href="/et/widget/headless-hook">
    `useThunderPhone()` kohandatud kasutajaliideste jaoks.
  </Card>
  <Card title="CDN-i skriptisilt" icon="code" href="/et/widget/cdn-script-tag">
    `ThunderPhone.mount({...})` saitide jaoks, mis ei kasuta pakendajat.
  </Card>
</CardGroup>

Kõik kolm kasutavad sama `publishableKey` väärtust ning kuvavad mikrofoninupu
ja kõnesisese helielemendi.

Vidina `context` kärbitakse 12 000 tähemärgini (ligikaudu 3400 tokenit
tüüpilist ingliskeelset teksti) ja see arvestatakse
[viiba suuruse lisatasu](/et/guides/billing-and-topups) hulka.

## Veebividina režiimi webhookid

Kui `mode="webhook"`, kutsub ThunderPhone sinu `webhook_url`-i iga
seansi alguses `web.incoming` payloadiga. Tagasta häälagendi
konfiguratsioon, mida soovid selle külastaja jaoks käivitada — see järgib sama
[vastuseskeemi](/et/webhooks/call-incoming) nagu telefonikõned:

```json
{
  "prompt":  "You are a VIP concierge for Jane Doe.",
  "voice":   "john",
  "product": "storm-base",
  "tools":   [ /* per-customer tools */ ]
}
```

Saad lisada viibale konteksti oma seansist (milline klient sirvib,
millisel lehel ta on) ning vahetada agente iga juurutuse jaoks.

## Jälgi seansse

Vidina seansid kuvatakse
[`GET /v1/calls`](/api-reference/calls#list-calls) kaudu koos
`direction="widget"` — sama transkriptsioon, salvestus, hindamine ja
arveldus nagu telefonikõnedel. Ainult vidina seansside armatuurlaua
loomiseks filtreeri `direction` järgi.

---

## Järgmised sammud

<CardGroup cols={2}>
  <Card title="Vidina SDK viide" icon="window-maximize" href="/et/widget/overview">
    Reacti / hooki / CDN-i integratsiooni üksikasjad.
  </Card>
  <Card title="Dünaamiline kõnepõhine konfiguratsioon" icon="bolt" href="/et/guides/dynamic-call-config">
    Rakenda `mode="webhook"` voog algusest lõpuni.
  </Card>
  <Card title="Avaldatavate võtmete viide" icon="key" href="/api-reference/publishable-keys">
    Kõik võtmeressursi väljad.
  </Card>
  <Card title="Mikrofoni seansside API" icon="microphone" href="/api-reference/mic-sessions">
    Jäta vidin vahele; kohandatud kasutajaliideste jaoks halda LiveKiti otse.
  </Card>
</CardGroup>