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

# Upotettava puhewidget

> Lisää puheagentti mille tahansa verkkosivustolle muutamalla koodirivillä

ThunderPhonen upotettavan puhewidgetin avulla verkkosivustosi kävijät voivat puhua tekoälyagentin kanssa suoraan selaimesta. Puhelua ei tarvita -- käyttäjät napsauttavat painiketta ja aloittavat ThunderPhonen reaaliaikaisen puhekeskustelun.

Widget näkyy lasimaisena palkkina, joka mukautuu vaaleisiin ja tummiin teemoihin. Korostusvärejä ja sijaintia voi mukauttaa. Se jaetaan `@thunderphone/widget`-npm-pakettina, ja se on saatavilla myös CDN:n kautta ympäristöihin, joissa ei käytetä bundleria.

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

## Vaatimukset

Ennen kuin upotat widgetin, suorita nämä kolme vaihetta [ThunderPhone Dashboardissa](https://app.thunderphone.com):

<Steps>
  <Step title="Luo julkaistava API-avain">
    Siirry hallintapaneelin asetuksissa kohtaan **Kehittäjät** ja luo julkaistava avain. Julkaistavat avaimet alkavat merkkijonolla `pk_live_`, ja ne on turvallista sisällyttää asiakaspuolen koodiin.
  </Step>

  <Step title="Määritä sallitut verkkotunnukset">
    Lisää samoissa Kehittäjät-asetuksissa verkkotunnukset, joihin widget upotetaan. `localhost` on aina sallittu kehitystä varten. Jokerimerkit ovat tuettuja (esim. `*.example.com`).
  </Step>

  <Step title="Luo verkkowidget">
    Siirry hallintapaneelissa kohtaan **Verkkowidgetit** ja luo widget. Valitse agentti, jonka haluat julkaista, sekä käytettävä julkaistava avain. Agentti määritetään automaattisesti julkaistavan avaimesi asetusten perusteella.
  </Step>
</Steps>

<Warning>
  Julkaistavat avaimet (`pk_live_...`) eivät ole samoja kuin salaiset API-tunnuksesi. Julkaistavat avaimet on suunniteltu asiakaspuolen käyttöön, ja ne on rajattu widget-istuntoihin sallituissa verkkotunnuksissasi. Älä koskaan käytä salaista API-tunnustasi asiakaspuolen koodissa.
</Warning>

***

## Pika-aloitus

Asenna paketti:

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

Lisää widget sovellukseesi:

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

Siinä kaikki. Käyttäjäsi näkevät lasimaisen puhelupalkin, joka yhdistää heidät tekoälyagenttiisi yhdellä napsautuksella.

***

## Mukauttaminen

Widgetissä on neljä ulkoasuun liittyvää proppia:

| Proppi         | Oletus                                     | Kuvaus                                                                        |
| -------------- | ------------------------------------------ | ----------------------------------------------------------------------------- |
| `theme`        | `'light'`                                  | `'light'` valkoiselle lasille, `'dark'` tummalle lasille                      |
| `primaryColor` | `'#000000'` (vaalea) / `'#ffffff'` (tumma) | Korostusväri aloituspainikkeelle, aaltomuodolle ja yhdistymisen ilmaisimelle  |
| `title`        | `'Voice assistant'`                        | Widgetissä näytettävä teksti                                                  |
| `position`     | `'bottom-right'`                           | Näkymän kulma: `'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>

Kolme muuta proppia mukauttavat istuntoa ulkoasun sijaan -- kaikki välitetään istuntopyyntöön puhelun alkaessa:

| Proppi     | Kuvaus                                                                                             |
| ---------- | -------------------------------------------------------------------------------------------------- |
| `language` | Istuntokohtainen kieliohitus -- koodi tai aluekohtainen tunniste, kuten `en`, `es` tai `fr-FR`     |
| `voice`    | Istuntokohtainen äänen ohitus -- äänen nimi, kuten `maria`                                         |
| `context`  | Agentille välitettävä sivun tai sivuston asiayhteys (katkaistaan palvelinpuolella 12 000 merkkiin) |

Katso täydellinen proppitaulukko [React-komponentin viitteestä](/fi/widget/react).

Täysin mukautettua käyttöliittymää varten käytä [headless-hookia](/fi/widget/headless-hook) puheistunnon hallintaan samalla, kun rakennat oman käyttöliittymäsi. Hook tarjoaa reaaliaikaiset äänitasot äänireaktiivisten visualisointien rakentamiseen.

***

## Integrointivaihtoehdot

Valitse teknologiaasi sopiva integrointitapa:

<CardGroup cols={3}>
  <Card title="React-komponentti" icon="react" href="/fi/widget/react">
    Valmis käyttöliittymäkomponentti, jossa on sisäänrakennetut puhelunhallinta- ja tilanäyttötoiminnot. Tuo, välitä propsit, valmista.
  </Card>

  <Card title="Headless-hook" icon="code" href="/fi/widget/headless-hook">
    Täysi hallinta käyttöliittymästä. `useThunderPhone`-hook hallitsee puheistuntoa samalla, kun rakennat oman käyttöliittymäsi.
  </Card>

  <Card title="CDN / Script-tagi" icon="globe" href="/fi/widget/cdn-script-tag">
    Ei vaadi bundleria. Lataa widget script-tagilla staattisille sivustoille, WordPressiin ja muihin kuin React-ympäristöihin.
  </Card>
</CardGroup>

***

## Tyylittely

Widgetissä on sisäänrakennetut vaalea ja tumma teema, joita hallitaan `theme`-propilla, sekä korostusväri, jota hallitaan `primaryColor`-propilla. Jos tarvitset laajempaa mukautusta, voit ylikirjoittaa CSS-mukautettuja ominaisuuksia ja luokkia. Lisätietoja on [tyylittelyoppaassa](/fi/widget/styling).

<Note>
  Tarvitsetko apua? Ota yhteyttä: [support@thunderphone.com](mailto:support@thunderphone.com)
</Note>