Wijeti ya Sauti Inayoweza Kupachikwa

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:

1. Unda wijeti ya wavuti

   Nenda kwenye Wijeti za Wavuti katika dashibodi na uunde wijeti. Chagua ejenti unayetaka kuonyesha. Kila wijeti ina ufunguo wake unaoweza kuchapishwa (pk_live_...), ambao ni salama kujumuisha katika msimbo wa upande wa mteja; ejenti hutambuliwa kutoka kwenye ufunguo huo.

2. Sanidi vikoa vinavyoruhusiwa

   Kwenye wijeti hiyo hiyo, ongeza vikoa ambamo itawekwa. Vikarata vinatumika (kwa mfano, *.example.com). Orodha huzuia wijeti kufanya kazi mtu anaponakili ufunguo wako kwenye tovuti nyingine; si uthibitishaji, kwa kuwa script iliyo nje ya kivinjari inaweza kutuma kichwa chochote cha Origin. localhost hairuhusiwi kiotomatiki katika uzalishaji: iongeze kwenye orodha ili ujaribu ndani ya mazingira yako dhidi ya API ya uzalishaji.

3. Chagua mabadilisho ya kivinjari

   Ikiwa ukurasa wako unaweka language, voice, au context, washa kila kimoja chini ya Mabadilisho ya kivinjari. Wijeti mpya hazikubali chochote, na ombi la kipindi lenye mpangilio uliozimwa hushindwa kwa 400 override_not_allowed. Tazama Mabadilisho ya kivinjari.

Mwanzo wa Haraka#

Sakinisha kifurushi:

npm install @thunderphone/widget

Ongeza wijeti kwenye programu yako:

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'
 
function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
    />
  )
}

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:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Ask our AI"
/>

Props tatu zaidi hubinafsisha kipindi badala ya mwonekano -- zote hutumwa kwa ombi la kipindi simu inapoanza. Kila moja hufanya kazi tu wakati ufunguo unaoweza kuchapishwa wa wijeti unairuhusu chini ya Ubatilishaji wa kivinjari; vinginevyo ombi la kipindi hushindwa kwa 400 override_not_allowed:

Tazama marejeleo ya kipengele cha React kwa jedwali kamili la props.

Kwa UI iliyobinafsishwa kikamilifu, tumia hook isiyo na kiolesura kudhibiti sesheni ya sauti unapounda kiolesura chako mwenyewe. Hook hutoa viwango vya sauti vya wakati halisi kwa ajili ya kuunda taswira zinazoitikia sauti.

Kila mazungumzo ya wijeti ni simu. Huhesabiwa kuelekea kikomo cha simu zinazofanyika kwa wakati mmoja cha shirika lako (simu 20 zinaendelea kwa chaguomsingi, zikishirikiwa na simu za simu na simu nyingine) na kikomo cha wijeti cha vipindi 25 vinavyotumika (au kikomo chako cha simu zinazofanyika kwa wakati mmoja, ikiwa ni kikubwa zaidi). Kwenye kikomo chochote, mazungumzo mapya hayawezi kuanza hadi simu iishe.

Chaguo za Muunganisho#

Chagua mbinu ya muunganisho inayolingana na stack yako:

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 kwa maelezo.