Wijeti ya Sauti Inayoweza Kupachikwa

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 ufunguo wa API unaoweza kuchapishwa

   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.

2. Sanidi domeni zinazoruhusiwa

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

3. Unda wijeti ya wavuti

   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.

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 sesheni badala ya mwonekano -- zote hutumwa kwenye ombi la sesheni simu inapoanza:

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.

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.