--- title: "CDN / Lebo ya script" description: "Ongeza wijeti ya sauti ya ThunderPhone kwenye tovuti yoyote bila bundler" --- Muundo wa CDN hujumuisha React ndani yake, kwa hivyo unaweza kutumia wijeti kwenye tovuti tuli, WordPress, Webflow, au ukurasa wowote ambapo unaweza kuongeza HTML. Huhitaji npm, bundler, wala framework. ## URL za CDN ```html Latest (recommended) ``` ```html Pinned version ``` URL za `latest` ndizo zinazotolewa na kitengeneza snippet ya kupachika cha dashibodi. Huhifadhiwa kwenye kache kwa dakika 5 na hupokea matoleo mapya thabiti kiotomatiki. Njia zilizobanwa za `/widget/vX.Y.Z/` hazibadiliki na huhifadhiwa kwenye kache kwa muda mrefu -- ukibana toleo, linganisha toleo na toleo la npm la `@thunderphone/widget` unalotumia kutengeneza. --- ## Matumizi ya Msingi ```html

``` Wijeti hujipachika kwenye elementi lengwa na huonyeshwa kama **upau wa nafasi isiyobadilika katika kona ya eneo la kuonyesha** (chaguomsingi `bottom-right`, inadhibitiwa na chaguo la `position`). Elementi ya kupachika ni mzizi wa React pekee -- eneo lake kwenye ukurasa haliathiri mahali wijeti inaonekana. --- ## Chaguo za Kupachika `ThunderPhone.mount()` hukubali chaguo sawa na kijenzi cha React, pamoja na sifa ya `element`: | Chaguo | Aina | Inahitajika | Chaguomsingi | Maelezo | |--------|------|----------|---------|-------------| | `element` | `string \| HTMLElement` | Ndiyo | -- | Kiteuzi cha CSS (mfano, `'#thunderphone'`) au rejeleo la elementi ya DOM. | | `publishableKey` | `string` | Ndiyo | -- | Ufunguo wa API unaoweza kuchapishwa (`pk_live_...`). Ejenti huamuliwa kiotomatiki kutoka kwenye usanidi wa wijeti wa ufunguo. | | `theme` | `'light' \| 'dark'` | Hapana | `'light'` | Mpangilio wa rangi. | | `primaryColor` | `string` | Hapana | `'#000000'` (mwanga) / `'#ffffff'` (giza) | Mfuatano wa rangi wa CSS unaotumika kama rangi ya mkazo. | | `title` | `string` | Hapana | `'Voice assistant'` | Maandishi yanayoonyeshwa kwenye upau wa wijeti. | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | Hapana | `'bottom-right'` | Nafasi isiyobadilika katika eneo la kuonyesha. | | `apiBase` | `string` | Hapana | `'https://api.thunderphone.com/v1'` | Kubatilisha URL msingi ya API. | | `language` | `string` | Hapana | -- | Kubatilisha lugha kwa kila kipindi -- msimbo wa lugha au locale kama `en`, `es`, au `fr-FR`. Isipowekwa, lugha iliyosanidiwa ya ejenti hutumika. | | `voice` | `string` | Hapana | -- | Kubatilisha sauti kwa kila kipindi -- jina la sauti kama `maria`. Isipowekwa, sauti iliyosanidiwa ya ejenti hutumika. | | `context` | `string` | Hapana | -- | Muktadha wa ukweli wa ukurasa au tovuti kwa kila kipindi unaotumwa kwa ejenti. Hukatwa upande wa seva hadi herufi 12,000. | | `onConnect` | `() => void` | Hapana | -- | Huitwa kipindi cha sauti kinapounganishwa. | | `onDisconnect` | `() => void` | Hapana | -- | Huitwa kipindi kinapoisha. | | `onError` | `(error) => void` | Hapana | -- | Huitwa hitilafu zinapotokea. Hitilafu ina sehemu za `error` (msimbo) na `message`. | | `ringtone` | `boolean \| string` | Hapana | `false` | Cheza mlio wa simu wakati wa kuunganisha. `true` kwa mlio chaguomsingi wa simu, au mfuatano wa URL kwa sauti maalum. | --- ## Usafishaji `ThunderPhone.mount()` hurejesha kielelezo cha wijeti chenye mbinu za usafishaji: ```html ``` `unmount()` na `destroy()` zote hufanya jambo lilelile -- hutenganisha kipindi chochote cha sauti kinachotumika na kuondoa wijeti kutoka kwenye DOM. Tumia yoyote inayoeleweka zaidi kwenye msimbo wako. Safisha wijeti kila mara unapohama kutoka kwenye ukurasa katika programu za ukurasa mmoja au kipengele kinachoibeba kinapoondolewa. Hii huhakikisha vipindi vya sauti vinavyotumika vinatenganishwa ipasavyo. --- ## Mifano ### Mandhari Meusi yenye Rangi Maalum ```html

``` ### Nafasi Maalum ```html

``` ### Yenye Vipokezi vya Tukio ```html

``` ### Yenye Mlio wa Simu ```html

``` ### Kutumia Rejeleo la Kipengele cha DOM ```html

``` ### Ujumuishaji wa WordPress / CMS Ongeza hii kwenye bloku ya HTML Maalum au sehemu ya chini ya mandhari yako: ```html ``` `

` inaweza kuwekwa popote -- ni sehemu ya kupachika tu. Wijeti yenyewe huonyeshwa kama safu inayobaki mahali pake katika kona ya eneo la kuonyesha (iliyowekwa na chaguo la `position`) na haifuati mtiririko wa maudhui yanayoizunguka. --- ## Utatuzi wa matatizo Hakikisha faili za CSS na JS zimepakiwa. Angalia konsoli ya kivinjari kwa hitilafu za mtandao. Thibitisha kwamba elementi lengwa ipo kwenye DOM kabla ya kuita `ThunderPhone.mount()`. Script bado haijapakiwa. Hakikisha lebo ya `