---
title: "Įterpkite žiniatinklio valdiklį"
description: "Įtraukite balso agentą į savo rinkodaros ar palaikymo svetainę naudodami vieną scenarijaus žymą — lankytojai gali su juo kalbėtis tiesiai naršyklėje, telefono numerio nereikia."
---

Žiniatinklio valdiklis suteikia jūsų svetainės lankytojams galimybę spustelėjus kalbėti su balso agentu, naudojant naršyklės mikrofoną. Tai atskiras JavaScript / React SDK su savo [SDK nuoroda](/lt/widget/overview) — šiame vadove aptariamas ThunderPhone pusės nustatymas, kurio reikia valdikliui.

<Note>
  Visa tai galite atlikti be cURL: skydelio puslapyje **Žiniatinklio valdikliai**
  (`/dashboard/web-widgets`) sukuriamas valdiklis, nustatomas jo režimas
  ir agentas, tvarkomi leidžiami domenai bei pateikiamas įterpimo fragmentas.
</Note>

## Būtinosios sąlygos

<Steps>
  <Step title="Sukurkite agentą">
    Agentas, kurio raginimas ir balsas bus naudojami valdiklio sesijoje. Nustatykite
    `widget_enabled: true` (numatytoji reikšmė).
  </Step>
  <Step title="Pasirinkite maršruto parinkimo režimą">
    - `mode="agent"` — vienas statinis agentas kiekvienam raktui. Paprasčiausia parinktis.
    - `mode="webhook"` — jūsų serveris kiekvienam lankytojui parenka agentą per
      [`web.incoming` žiniatinklio kabliuką](/lt/webhooks/call-incoming). Naudokite tai
      prisijungusiems naudotojams, A/B testams arba maršrutų parinkimui pagal puslapį.
  </Step>
  <Step title="Nurodykite leidžiamus domenus">
    Viešinami raktai yra susieti su kilme. Turite nurodyti kiekvieną prieglobos vardą,
    kuriame bus įterptas valdiklis. Vietinio kūrimo metu visada leidžiami `localhost` /
    `127.0.0.1`.
  </Step>
</Steps>

## Sukurkite viešinamą raktą

<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>

Atsakyme pateikiamas `key`, prasidedantis `pk_live_...`. **Viešinami
raktai pagal paskirtį yra vieši** — juos saugu įtraukti į jūsų naudotojo sąsajos paketą.
Visus laukus rasite [viešinamų raktų nuorodoje](/api-reference/publishable-keys).

<Warning>
  `allowed_domains` turi būti bent vienas įrašas. `*.example.com`
  atitinka subdomenus (pvz., `api.example.com`), bet **neatitinka**
  pagrindinio domeno. Bendrieji pakaitos simboliai, pvz., `*` arba `*.*`, atmetami.
</Warning>

## Įdiekite valdiklį savo svetainėje

[Valdiklio SDK dokumentacijoje](/lt/widget/overview) aprašytos trys integravimo parinktys:

<CardGroup cols={3}>
  <Card title="React komponentas" icon="react" href="/lt/widget/react">
    `<ThunderPhoneWidget publishableKey="pk_live_..." />`.
  </Card>
  <Card title="Begalvis kabliukas" icon="circle-nodes" href="/lt/widget/headless-hook">
    `useThunderPhone()` pasirinktinėms naudotojo sąsajoms.
  </Card>
  <Card title="CDN scenarijaus žyma" icon="code" href="/lt/widget/cdn-script-tag">
    `ThunderPhone.mount({...})` svetainėms be paketavimo įrankio.
  </Card>
</CardGroup>

Visos trys parinktys priima tą patį `publishableKey` ir pateikia mikrofono mygtuką
bei garso elementą pokalbio metu.

Valdiklio `context` sutrumpinamas iki 12 000 simbolių (maždaug 3 400
tipinio angliško teksto žetonų) ir įskaičiuojamas į
[raginimo dydžio priemoką](/lt/guides/billing-and-topups).

## Valdiklio režimo žiniatinklio kabliukai

Kai `mode="webhook"`, ThunderPhone kiekvienos sesijos pradžioje iškviečia jūsų
`webhook_url` su `web.incoming` turiniu. Grąžinkite agento konfigūraciją,
kurią norite paleisti tam lankytojui — ji atitinka tą pačią
[atsakymo schemą](/lt/webhooks/call-incoming), kaip ir telefono skambučiams:

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

Į raginimą galite įtraukti kontekstą iš savo sesijos (kuris klientas naršo,
kuriame puslapyje jis yra) ir keisti agentus pagal diegimo etapą.

## Stebėkite sesijas

Valdiklio sesijos rodomos
[`GET /v1/calls`](/api-reference/calls#list-calls), kai
`direction="widget"` — su tuo pačiu nuorašu, įrašu, vertinimu ir
atsiskaitymu kaip telefono skambučiai. Filtruokite pagal `direction`, kad sukurtumėte tik valdikliui skirtą
ataskaitų sritį.

---

## Kiti veiksmai

<CardGroup cols={2}>
  <Card title="Valdiklio SDK nuoroda" icon="window-maximize" href="/lt/widget/overview">
    React / hook / CDN integravimo informacija.
  </Card>
  <Card title="Dinaminė kiekvieno skambučio konfigūracija" icon="bolt" href="/lt/guides/dynamic-call-config">
    Įgyvendinkite `mode="webhook"` srautą nuo pradžios iki pabaigos.
  </Card>
  <Card title="Publikuojamų raktų nuoroda" icon="key" href="/api-reference/publishable-keys">
    Visi rakto ištekliaus laukai.
  </Card>
  <Card title="Mikrofono sesijų API" icon="microphone" href="/api-reference/mic-sessions">
    Praleiskite valdiklį; valdykite LiveKit tiesiogiai, kad sukurtumėte pasirinktines naudotojo sąsajas.
  </Card>
</CardGroup>