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

# Widget vocal integrabil

> Adăugați un agent vocal AI pe orice site web cu câteva linii de cod

Widgetul vocal integrabil ThunderPhone le permite vizitatorilor site-ului dumneavoastră să vorbească direct din browser cu un agent vocal AI. Nu este necesar niciun apel telefonic -- utilizatorii fac clic pe un buton și încep o conversație vocală în timp real, susținută de ThunderPhone.

Widgetul este afișat ca o bară cu aspect de sticlă, care se adaptează la temele deschise și întunecate, cu culori de accent și poziționare personalizabile. Este distribuit ca pachetul npm `@thunderphone/widget` și este disponibil și prin CDN pentru medii fără bundler.

<Frame>
  <img src="https://mintcdn.com/thunderphone/4XhPaCl4RGfyS7_M/images/widget-showcase.png?fit=max&auto=format&n=4XhPaCl4RGfyS7_M&q=85&s=17fea4fe853f3548b9b2628c9d4c4fc0" alt="ThunderPhone widget in light and dark themes with various accent colors" width="1200" height="800" data-path="images/widget-showcase.png" />
</Frame>

## Cerințe preliminare

Înainte de a integra widgetul, parcurgeți acești trei pași în [Panoul ThunderPhone](https://app.thunderphone.com):

<Steps>
  <Step title="Creați o cheie API publicabilă">
    Accesați **Dezvoltatori** în setările panoului și creați o cheie publicabilă. Cheile publicabile încep cu `pk_live_` și pot fi incluse în siguranță în codul din partea clientului.
  </Step>

  <Step title="Configurați domeniile permise">
    În aceleași setări pentru Dezvoltatori, adăugați domeniile în care va fi integrat widgetul. `localhost` este întotdeauna permis pentru dezvoltare. Sunt acceptate caracterele wildcard (de exemplu, `*.example.com`).
  </Step>

  <Step title="Creați un widget web">
    Accesați **Widgeturi web** în panou și creați un widget. Selectați agentul pe care doriți să îl expuneți și cheia publicabilă de utilizat. Agentul este determinat automat din configurația cheii dumneavoastră publicabile.
  </Step>
</Steps>

<Warning>
  Cheile publicabile (`pk_live_...`) **nu** sunt identice cu tokenurile API secrete. Cheile publicabile sunt concepute pentru utilizare în partea clientului și sunt limitate la sesiunile widgetului de pe domeniile dumneavoastră permise. Nu utilizați niciodată tokenul API secret în codul din partea clientului.
</Warning>

***

## Pornire rapidă

Instalați pachetul:

```bash theme={null}
npm install @thunderphone/widget
```

Adăugați widgetul în aplicația dumneavoastră:

```tsx theme={null}
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
    />
  )
}
```

Atât. Utilizatorii dumneavoastră vor vedea o bară de apel cu aspect de sticlă, care îi conectează la agentul vocal AI cu un singur clic.

***

## Personalizare

Widgetul are patru proprietăți de aspect:

| Proprietate    | Valoare implicită                               | Descriere                                                                                   |
| -------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------- |
| `theme`        | `'light'`                                       | `'light'` pentru sticlă albă, `'dark'` pentru sticlă întunecată                             |
| `primaryColor` | `'#000000'` (deschis) / `'#ffffff'` (întunecat) | Culoare de accent pentru butonul de pornire, forma de undă și indicatorul de conectare      |
| `title`        | `'Voice assistant'`                             | Textul afișat în widget                                                                     |
| `position`     | `'bottom-right'`                                | Colțul ferestrei de afișare: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'` |

<CodeGroup>
  ```tsx Light theme (default) theme={null}
  <ThunderPhoneWidget
    publishableKey="pk_live_your_publishable_key"
  />
  ```

  ```tsx Dark theme with custom color theme={null}
  <ThunderPhoneWidget
    publishableKey="pk_live_your_publishable_key"
    theme="dark"
    primaryColor="#8b5cf6"
    title="Ask our AI"
  />
  ```
</CodeGroup>

Încă trei proprietăți personalizează sesiunea, nu aspectul -- toate sunt transmise cererii de sesiune atunci când începe un apel:

| Proprietate | Descriere                                                                                                        |
| ----------- | ---------------------------------------------------------------------------------------------------------------- |
| `language`  | Suprascrierea limbii pentru fiecare sesiune -- un cod sau o configurație regională precum `en`, `es` sau `fr-FR` |
| `voice`     | Suprascrierea vocii pentru fiecare sesiune -- un nume de voce precum `maria`                                     |
| `context`   | Context factual despre pagină sau site transmis agentului (trunchiat pe server la 12.000 de caractere)           |

Consultați [referința componentei React](/ro/widget/react) pentru tabelul complet al proprietăților.

Pentru o interfață complet personalizată, utilizați [hookul headless](/ro/widget/headless-hook) pentru a gestiona sesiunea vocală în timp ce vă construiți propria interfață. Hookul expune niveluri audio în timp real pentru crearea de vizualizări reactive la audio.

***

## Opțiuni de integrare

Alegeți metoda de integrare potrivită pentru stack-ul dumneavoastră:

<CardGroup cols={3}>
  <Card title="Componentă React" icon="react" href="/ro/widget/react">
    Componentă UI preconfigurată, cu controale de apel și afișare a stării integrate. Importați, transmiteți props, gata.
  </Card>

  <Card title="Hook headless" icon="code" href="/ro/widget/headless-hook">
    Control complet asupra interfeței UI. Hook-ul `useThunderPhone` gestionează sesiunea vocală, în timp ce dumneavoastră construiți propria interfață.
  </Card>

  <Card title="CDN / etichetă script" icon="globe" href="/ro/widget/cdn-script-tag">
    Nu este necesar un bundler. Încărcați widgetul printr-o etichetă script pentru site-uri statice, WordPress și alte medii non-React.
  </Card>
</CardGroup>

***

## Stilizare

Widgetul include teme deschise și întunecate integrate, controlate prin prop-ul `theme`, precum și o culoare de accent controlată prin prop-ul `primaryColor`. Pentru personalizare avansată, puteți suprascrie proprietățile și clasele CSS personalizate. Consultați [ghidul de stilizare](/ro/widget/styling) pentru detalii.

<Note>
  Aveți nevoie de ajutor? Contactați-ne la [support@thunderphone.com](mailto:support@thunderphone.com)
</Note>