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

# Beágyazható hangalapú widget

> Adjon hozzá hangalapú AI-ügynököt bármely webhelyhez néhány sor kóddal

A ThunderPhone beágyazható hangwidgetje lehetővé teszi, hogy webhelye látogatói közvetlenül a böngészőből beszéljenek egy AI-ügynökkel. Nincs szükség telefonhívásra -- a felhasználók egy gombra kattintanak, és valós idejű, ThunderPhone által működtetett hangbeszélgetést indítanak.

A widget üvegszerű sávként jelenik meg, amely alkalmazkodik a világos és sötét témákhoz, testreszabható kiemelőszínekkel és pozicionálással. Az `@thunderphone/widget` npm-csomagként érhető el, valamint CDN-en keresztül is használható nem bundlert használó környezetekben.

<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 világos és sötét témákban, különböző kiemelőszínekkel" width="1200" height="800" data-path="images/widget-showcase.png" />
</Frame>

## Előfeltételek

A widget beágyazása előtt végezze el ezt a három lépést a [ThunderPhone Dashboardban](https://app.thunderphone.com):

<Steps>
  <Step title="Hozzon létre egy közzétehető API-kulcsot">
    Lépjen a vezérlőpult beállításaiban a **Fejlesztők** részhez, és hozzon létre egy közzétehető kulcsot. A közzétehető kulcsok `pk_live_` előtaggal kezdődnek, és biztonságosan elhelyezhetők kliensoldali kódban.
  </Step>

  <Step title="Állítsa be az engedélyezett domaineket">
    Ugyanazon Fejlesztők beállításokban adja hozzá azokat a domaineket, ahol a widgetet beágyazza. Fejlesztéshez a `localhost` mindig engedélyezett. Helyettesítő karakterek is támogatottak (például: `*.example.com`).
  </Step>

  <Step title="Hozzon létre egy webes widgetet">
    Lépjen a vezérlőpult **Webes widgetek** részéhez, és hozzon létre egy widgetet. Válassza ki a közzétenni kívánt ügynököt és a használni kívánt közzétehető kulcsot. Az ügynök automatikusan feloldásra kerül a közzétehető kulcs konfigurációja alapján.
  </Step>
</Steps>

<Warning>
  A közzétehető kulcsok (`pk_live_...`) **nem** azonosak a titkos API-tokenjeivel. A közzétehető kulcsok kliensoldali használatra készültek, és az engedélyezett domaineken futó widgetmunkamenetekre vannak korlátozva. Soha ne használja a titkos API-tokenjét kliensoldali kódban.
</Warning>

***

## Gyors kezdés

Telepítse a csomagot:

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

Illessze be a widgetet az alkalmazásába:

```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"
    />
  )
}
```

Ennyi az egész. Felhasználói egy üvegszerű hívássávot látnak, amely egyetlen kattintással összeköti őket az AI-ügynökével.

***

## Testreszabás

A widget négy megjelenési proppal rendelkezik:

| Prop           | Alapértelmezett                             | Leírás                                                                             |
| -------------- | ------------------------------------------- | ---------------------------------------------------------------------------------- |
| `theme`        | `'light'`                                   | `'light'` fehér üveghez, `'dark'` sötét üveghez                                    |
| `primaryColor` | `'#000000'` (világos) / `'#ffffff'` (sötét) | Kiemelőszín az indítógombhoz, a hullámformához és a kapcsolódási jelzőhöz          |
| `title`        | `'Voice assistant'`                         | A widgetben megjelenített szöveg                                                   |
| `position`     | `'bottom-right'`                            | A nézetablak sarka: `'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>

További három prop a megjelenés helyett a munkamenetet szabja testre -- mindegyik továbbításra kerül a munkamenet-kérelemhez a hívás indításakor:

| Prop       | Leírás                                                                                                     |
| ---------- | ---------------------------------------------------------------------------------------------------------- |
| `language` | Munkamenetenkénti nyelvi felülbírálás -- például `en`, `es` vagy `fr-FR` kód vagy területi beállítás       |
| `voice`    | Munkamenetenkénti hangfelülbírálás -- például `maria` hangnév                                              |
| `context`  | Az ügynöknek átadott tényszerű oldal- vagy webhelykontextus (a szerveroldalon 12 000 karakterre csonkítva) |

A teljes proptáblázatért tekintse meg a [React-komponens referenciáját](/hu/widget/react).

Teljesen egyedi felülethez használja a [headless hookot](/hu/widget/headless-hook) a hangmunkamenet kezeléséhez, miközben saját felületet épít. A hook valós idejű hangszinteket biztosít hangra reagáló vizualizációk készítéséhez.

***

## Integrációs lehetőségek

Válassza ki a technológiai környezetéhez illő integrációs módszert:

<CardGroup cols={3}>
  <Card title="React-komponens" icon="react" href="/hu/widget/react">
    Előre elkészített felhasználói felületi komponens beépített hívásvezérlőkkel és állapotkijelzéssel. Importálja, adja át a propokat, és kész.
  </Card>

  <Card title="Headless hook" icon="code" href="/hu/widget/headless-hook">
    Teljes kontroll a felhasználói felület felett. A `useThunderPhone` hook kezeli a hangmunkamenetet, miközben Ön saját felületet épít.
  </Card>

  <Card title="CDN / Script tag" icon="globe" href="/hu/widget/cdn-script-tag">
    Nincs szükség bundlerre. Töltse be a widgetet script taggel statikus webhelyekhez, WordPresshez és más, nem React-alapú környezetekhez.
  </Card>
</CardGroup>

***

## Stílus

A widget beépített világos és sötét témákat tartalmaz, amelyeket a `theme` prop vezérel, valamint egy kiemelőszínt, amelyet a `primaryColor` prop szabályoz. Mélyebb testreszabáshoz felülírhatja a CSS egyéni tulajdonságait és osztályait. Részletekért tekintse meg a [stílusútmutatót](/hu/widget/styling).

<Note>
  Segítségre van szüksége? Lépjen kapcsolatba velünk a [support@thunderphone.com](mailto:support@thunderphone.com) címen.
</Note>