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

# Webes widget beágyazása

> Helyezzen el egy hangalapú AI-ügynököt marketing- vagy támogatási webhelyén — nincs szükség telefonszámra.

A webes widget lehetővé teszi, hogy webhelye látogatói a böngésző mikrofonját használva, kattintással indított beszélgetést folytassanak egy AI-ügynökkel. Ez egy különálló JavaScript-/React SDK saját [SDK-referenciával](/hu/widget/overview) — ez az útmutató a widget működéséhez szükséges ThunderPhone-oldali beállításokra összpontosít.

<Note>
  Mindezt cURL nélkül is elvégezheti: a vezérlőpult **Webes widgetek**
  oldala (`/dashboard/web-widgets`) létrehozza a widgetet, beállítja annak módját
  és ügynökét, kezeli az engedélyezett domaineket, és átadja a beágyazási kódrészletet.
</Note>

## Előfeltételek

<Steps>
  <Step title="Ügynök létrehozása">
    Az az ügynök, amelynek promptja és hangja futtatja a widget munkamenetét. Állítsa be a
    `widget_enabled: true` értéket (ez az alapértelmezett).
  </Step>

  <Step title="Az útválasztási mód kiválasztása">
    * `mode="agent"` — kulcsonként egy statikus ügynök. Ez a legegyszerűbb.
    * `mode="webhook"` — a szervere látogatónként választja ki az ügynököt egy
      [`web.incoming` webhook](/hu/webhooks/call-incoming) segítségével. Használja ezt
      bejelentkezett felhasználókhoz, A/B tesztekhez vagy oldalankénti útválasztáshoz.
  </Step>

  <Step title="Az engedélyezett domainek felsorolása">
    A publikálható kulcsok origóhoz kötöttek. Meg kell adnia minden olyan gazdagépnevet,
    amely beágyazza a widgetet. A `localhost` / `127.0.0.1` helyi fejlesztés során
    mindig engedélyezett.
  </Step>
</Steps>

## Publikálható kulcs létrehozása

<CodeGroup>
  ```bash Static agent theme={null}
  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 theme={null}
  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>

A válasz tartalmaz egy `pk_live_...` előtaggal kezdődő `key` értéket. **A publikálható
kulcsok kialakításuk szerint nyilvánosak** — biztonságosan beépíthetők a front-end csomagjába.
Az összes mezőért lásd a [Publikálható kulcsok referenciáját](/api-reference/publishable-keys).

<Warning>
  Az `allowed_domains` mezőnek legalább egy bejegyzést kell tartalmaznia. A `*.example.com`
  illeszkedik az aldomainekre (például `api.example.com`), de **nem** az alapszintű
  domainre. Az olyan általános helyettesítő karakterek, mint a `*` vagy a `*.*`, elutasításra kerülnek.
</Warning>

## A widget beágyazása a webhelyére

Három integrációs lehetőséget ismertet a
[widget SDK dokumentációja](/hu/widget/overview):

<CardGroup cols={3}>
  <Card title="React-komponens" icon="react" href="/hu/widget/react">
    `<ThunderPhoneWidget publishableKey="pk_live_..." />`.
  </Card>

  <Card title="Headless hook" icon="circle-nodes" href="/hu/widget/headless-hook">
    `useThunderPhone()` egyéni felhasználói felületekhez.
  </Card>

  <Card title="CDN-szkriptcímke" icon="code" href="/hu/widget/cdn-script-tag">
    `ThunderPhone.mount({...})` csomagkezelőt nem használó webhelyekhez.
  </Card>
</CardGroup>

Mindhárom ugyanazt a `publishableKey` értéket fogadja el, és megjeleníti a mikrofon gombot,
valamint a hívás közbeni hangelemet.

A widget `context` értéke 12 000 karakterre van csonkítva (ez nagyjából 3400 tokennyi
tipikus angol szöveg), és beleszámít a
[promptméret-felárba](/hu/guides/billing-and-topups).

## Webhookok widget módban

Ha a `mode="webhook"`, a ThunderPhone minden munkamenet indításakor meghívja az Ön
`webhook_url` végpontját egy `web.incoming` adattartalommal. Adja vissza az adott látogatóhoz
futtatni kívánt ügynökkonfigurációt — ez ugyanazt a
[válaszsémát](/hu/webhooks/call-incoming) követi, mint a telefonhívások:

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

Saját munkamenetéből származó környezetet is beépíthet a promptba (melyik ügyfél böngészik,
melyik oldalon tart), és bevezetésenként cserélheti az ügynököket.

## Munkamenetek megfigyelése

A widget-munkamenetek a
[`GET /v1/calls`](/api-reference/calls#list-calls) végponton jelennek meg
`direction="widget"` értékkel — ugyanazzal az átirattal, felvétellel, értékeléssel és
számlázással, mint a telefonhívások esetében. Szűrjön a `direction` alapján, hogy csak widgetes
irányítópultot hozzon létre.

***

## Következő lépések

<CardGroup cols={2}>
  <Card title="Widget SDK-referencia" icon="window-maximize" href="/hu/widget/overview">
    React / hook / CDN integrációs részletek.
  </Card>

  <Card title="Dinamikus hívásonkénti konfiguráció" icon="bolt" href="/hu/guides/dynamic-call-config">
    Valósítsa meg a `mode="webhook"` folyamatot teljes körűen.
  </Card>

  <Card title="Publikálható kulcsok referenciája" icon="key" href="/api-reference/publishable-keys">
    A kulcserőforrás minden mezője.
  </Card>

  <Card title="Mikrofonmunkamenetek API-ja" icon="microphone" href="/api-reference/mic-sessions">
    Hagyja ki a widgetet; egyéni felhasználói felületekhez közvetlenül vezérelje a LiveKit-et.
  </Card>
</CardGroup>