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

# Integrați widgetul web

> Adăugați un agent vocal pe site-ul dumneavoastră de marketing sau de asistență — nu este necesar niciun număr de telefon.

Widgetul web le oferă vizitatorilor site-ului dumneavoastră o conversație prin clic pentru a vorbi
cu un agent vocal AI, folosind microfonul browserului. Este un SDK JavaScript / React separat,
cu propria [referință SDK](/ro/widget/overview) — acest ghid se concentrează pe configurarea
din ThunderPhone de care are nevoie widgetul.

<Note>
  Puteți face toate acestea fără cURL: pagina din tabloul de bord **Widgeturi web**
  (`/dashboard/web-widgets`) creează widgetul, îi setează modul
  și agentul, gestionează domeniile permise și vă oferă fragmentul de încorporare.
</Note>

## Cerințe preliminare

<Steps>
  <Step title="Creați un agent">
    Agentul al cărui prompt și voce vor rula sesiunea widgetului. Setați
    `widget_enabled: true` (valoarea implicită).
  </Step>

  <Step title="Decideți modul de rutare">
    * `mode="agent"` — un agent static pentru fiecare cheie. Cel mai simplu.
    * `mode="webhook"` — serverul dumneavoastră alege agentul pentru fiecare vizitator printr-un
      [webhook `web.incoming`](/ro/webhooks/call-incoming). Utilizați această opțiune pentru
      utilizatori autentificați, teste A/B sau rutare per pagină.
  </Step>

  <Step title="Listați domeniile permise">
    Cheile publicabile sunt blocate la origine. Trebuie să specificați fiecare nume de gazdă
    care va încorpora widgetul. `localhost` / `127.0.0.1` sunt întotdeauna
    permise în timpul dezvoltării locale.
  </Step>
</Steps>

## Creați o cheie publicabilă

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

Răspunsul include o `key` care începe cu `pk_live_...`. **Cheile publicabile
sunt publice prin concepție** — pot fi incluse în siguranță în pachetul front-end.
Consultați [referința pentru chei publicabile](/api-reference/publishable-keys) pentru
toate câmpurile.

<Warning>
  `allowed_domains` trebuie să conțină cel puțin o intrare. `*.example.com`
  corespunde subdomeniilor (de exemplu, `api.example.com`), dar **nu** domeniului
  principal. Caracterele wildcard simple precum `*` sau `*.*` sunt respinse.
</Warning>

## Adăugați widgetul pe site-ul dumneavoastră

Trei opțiuni de integrare sunt prezentate în
[documentația SDK pentru widget](/ro/widget/overview):

<CardGroup cols={3}>
  <Card title="Componentă React" icon="react" href="/ro/widget/react">
    `<ThunderPhoneWidget publishableKey="pk_live_..." />`.
  </Card>

  <Card title="Hook fără interfață" icon="circle-nodes" href="/ro/widget/headless-hook">
    `useThunderPhone()` pentru interfețe personalizate.
  </Card>

  <Card title="Etichetă script CDN" icon="code" href="/ro/widget/cdn-script-tag">
    `ThunderPhone.mount({...})` pentru site-uri fără bundler.
  </Card>
</CardGroup>

Toate trei acceptă aceeași `publishableKey` și redau butonul de microfon,
precum și elementul audio din apel.

`context` al widgetului este trunchiat la 12.000 de caractere (aproximativ 3.400
de tokenuri din text englezesc obișnuit) și este luat în calcul pentru
[suprataxa pentru dimensiunea promptului](/ro/guides/billing-and-topups).

## Webhookuri în modul widget

Când `mode="webhook"`, ThunderPhone apelează `webhook_url` la fiecare
început de sesiune cu o sarcină utilă `web.incoming`. Returnați configurația
agentului pe care doriți să o rulați pentru acel vizitator — aceasta urmează aceeași
[schemă de răspuns](/ro/webhooks/call-incoming) ca apelurile
telefonice:

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

Puteți include în prompt context din propria sesiune (ce client navighează,
pe ce pagină se află) și puteți schimba agenții pentru fiecare lansare.

## Monitorizați sesiunile

Sesiunile widget apar în
[`GET /v1/calls`](/api-reference/calls#list-calls) cu
`direction="widget"` — aceeași transcriere, înregistrare, evaluare și
facturare ca apelurile telefonice. Filtrați după `direction` pentru a crea un
tablou de bord doar pentru widget.

***

## Pașii următori

<CardGroup cols={2}>
  <Card title="Referință SDK pentru widget" icon="window-maximize" href="/ro/widget/overview">
    Detalii de integrare React / hook / CDN.
  </Card>

  <Card title="Configurație dinamică pentru fiecare apel" icon="bolt" href="/ro/guides/dynamic-call-config">
    Implementați fluxul `mode="webhook"` de la un capăt la altul.
  </Card>

  <Card title="Referință pentru cheile publicabile" icon="key" href="/api-reference/publishable-keys">
    Fiecare câmp al resursei cheie.
  </Card>

  <Card title="API pentru sesiuni de microfon" icon="microphone" href="/api-reference/mic-sessions">
    Omiteți widgetul; controlați LiveKit direct pentru interfețe personalizate.
  </Card>
</CardGroup>