---
title: "Wijeti ya Sauti Inayoweza Kupachikwa"
description: "Ongeza ejenti ya sauti ya AI kwenye tovuti yoyote kwa mistari michache ya msimbo"
---
Wijeti ya sauti inayopachikwa ya ThunderPhone huwaruhusu wageni wa tovuti yako kuzungumza na ejenti wa AI moja kwa moja kutoka kwenye kivinjari. Hakuna simu inayohitajika -- watumiaji hubofya kitufe na kuanza mazungumzo ya sauti ya wakati halisi yanayoendeshwa na ThunderPhone.
Wijeti huonyeshwa kama upau wa mtindo wa kioo unaojirekebisha kwa mandhari mepesi na meusi, ukiwa na rangi za msisitizo na nafasi zinazoweza kubinafsishwa. Husambazwa kama kifurushi cha npm `@thunderphone/widget` na pia hupatikana kupitia CDN kwa mazingira yasiyotumia bundler.
## Mahitaji ya awali
Kabla ya kupachika wijeti, kamilisha hatua hizi tatu katika [Dashibodi ya ThunderPhone](https://app.thunderphone.com):
Nenda kwenye **Watengenezaji** katika mipangilio ya dashibodi na uunde ufunguo unaoweza kuchapishwa. Funguo zinazoweza kuchapishwa huanza na `pk_live_` na ni salama kujumuisha katika msimbo wa upande wa mteja.
Katika mipangilio hiyo hiyo ya Watengenezaji, ongeza domeni ambazo wijeti itapachikwa. `localhost` huruhusiwa kila wakati kwa ajili ya usanidi. Wildcard zinatumika (kwa mfano, `*.example.com`).
Nenda kwenye **Wijeti za Wavuti** katika dashibodi na uunde wijeti. Chagua ejenti unayetaka kuonyesha na ufunguo unaoweza kuchapishwa wa kutumia. Ejenti hutatuliwa kiotomatiki kutoka kwenye usanidi wa ufunguo wako unaoweza kuchapishwa.
Funguo zinazoweza kuchapishwa (`pk_live_...`) **si** sawa na tokeni zako za siri za API. Funguo zinazoweza kuchapishwa zimeundwa kwa matumizi ya upande wa mteja na zinawekewa wigo kwenye sesheni za wijeti katika domeni zako zinazoruhusiwa. Kamwe usitumie tokeni yako ya siri ya API katika msimbo wa upande wa mteja.
---
## Mwanzo wa Haraka
Sakinisha kifurushi:
```bash
npm install @thunderphone/widget
```
Ongeza wijeti kwenye programu yako:
```tsx
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
function App() {
return (
)
}
```
Hiyo tu. Watumiaji wako wataona upau wa simu wa mtindo wa kioo unaowaunganisha na ejenti wako wa AI kwa mbofyo mmoja.
---
## Ubinafsishaji
Wijeti ina props nne za mwonekano:
| Prop | Chaguo-msingi | Maelezo |
|------|---------|-------------|
| `theme` | `'light'` | `'light'` kwa kioo cheupe, `'dark'` kwa kioo cheusi |
| `primaryColor` | `'#000000'` (nyepesi) / `'#ffffff'` (nyeusi) | Rangi ya msisitizo kwa kitufe cha kuanza, umbo la mawimbi, na kiashiria cha kuunganisha |
| `title` | `'Voice assistant'` | Maandishi yanayoonyeshwa kwenye wijeti |
| `position` | `'bottom-right'` | Kona ya viewport: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'` |
```tsx Light theme (default)
```
```tsx Dark theme with custom color
```
Props tatu zaidi hubinafsisha sesheni badala ya mwonekano -- zote hutumwa kwenye ombi la sesheni simu inapoanza:
| Prop | Maelezo |
|------|-------------|
| `language` | Kubatilisha lugha kwa kila sesheni -- msimbo au lokaliti kama `en`, `es`, au `fr-FR` |
| `voice` | Kubatilisha sauti kwa kila sesheni -- jina la sauti kama `maria` |
| `context` | Muktadha wa ukweli wa ukurasa au tovuti unaopitishwa kwa ejenti (hukatwa upande wa seva hadi herufi 12,000) |
Tazama [marejeleo ya kipengele cha React](/sw/widget/react) kwa jedwali kamili la props.
Kwa UI iliyobinafsishwa kikamilifu, tumia [hook isiyo na kiolesura](/sw/widget/headless-hook) kudhibiti sesheni ya sauti unapounda kiolesura chako mwenyewe. Hook hutoa viwango vya sauti vya wakati halisi kwa ajili ya kuunda taswira zinazoitikia sauti.
---
## Chaguo za Muunganisho
Chagua mbinu ya muunganisho inayolingana na stack yako:
Kipengele cha UI kilichojengwa tayari chenye vidhibiti vya simu na onyesho la hali lililojengewa ndani. Ingiza, pitisha props, umemaliza.
Udhibiti kamili wa UI. Hook ya `useThunderPhone` husimamia kipindi cha sauti huku ukijenga kiolesura chako mwenyewe.
Hakuna bundler inayohitajika. Pakia wijeti kupitia tagi ya script kwa tovuti tuli, WordPress, na mazingira mengine yasiyo ya React.
---
## Uwekaji wa Mitindo
Wijeti huja na mandhari ya mwanga na giza yaliyojengewa ndani yanayodhibitiwa na prop ya `theme`, pamoja na rangi ya msisitizo inayodhibitiwa na prop ya `primaryColor`. Kwa ubinafsishaji wa kina zaidi, unaweza kubatilisha sifa maalum za CSS na class. Tazama [mwongozo wa uwekaji mitindo](/sw/widget/styling) kwa maelezo.
Unahitaji msaada? Wasiliana nasi kupitia [support@thunderphone.com](mailto:support@thunderphone.com)