React કમ્પોનેન્ટ

ThunderPhoneWidget કોમ્પોનન્ટ મ્યૂટ કરવા, કૉલ સમાપ્ત કરવા અને કનેક્શનની સ્થિતિ દર્શાવવા માટેના બિલ્ટ-ઇન નિયંત્રણો સાથે ગ્લાસમોર્ફિક કૉલ બાર રેન્ડર કરે છે. React એપમાં વૉઇસ AI ઉમેરવાની આ સૌથી ઝડપી રીત છે.

ઇન્સ્ટોલેશન

npm install @thunderphone/widget

મૂળભૂત ઉપયોગ

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
    />
  )
}

Props

કોમ્પોનન્ટ ThunderPhoneWidgetProps દ્વારા નીચેના props સ્વીકારે છે:

ઉદાહરણો

કસ્ટમ રંગ સાથે ડાર્ક થીમ

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
      title="Talk to our AI"
    />
  )
}

કસ્ટમ સ્થિતિ

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      position="bottom-left"
    />
  )
}

પ્રતિ-સેશન ભાષા, અવાજ અને કોન્ટેક્સ્ટ

કૉલ શરૂ થાય ત્યારે language, voice, અને context પ્રોપ્સ સેશન વિનંતી (POST /widget/session) પર ફોરવર્ડ થાય છે, જે તે સેશન માટે એજન્ટના કન્ફિગર કરેલા ડિફૉલ્ટને ઓવરરાઇડ કરે છે:

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function PricingPageWidget() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      language="es"
      voice="maria"
      context="Page: Pricing. Plans: Starter $29/mo, Pro $99/mo. Annual billing saves 20%."
    />
  )
}

મુલાકાતી જે પેજ પર છે તેના વિશે એજન્ટને તથ્યાત્મક જાણકારી આપવા માટે context નો ઉપયોગ કરો -- પ્રોડક્ટ વિગતો, કિંમતો અથવા પેજ-વિશિષ્ટ FAQ. તેને સર્વર-સાઇડ પર 12,000 અક્ષરો સુધી ટૂંકાવવામાં આવે છે.

ઇવેન્ટ કૉલબૅક સાથે

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function SupportWidget() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      onConnect={() => {
        console.log('Voice session connected')
        analytics.track('widget_call_started')
      }}
      onDisconnect={() => {
        console.log('Voice session ended')
        analytics.track('widget_call_ended')
      }}
      onError={(error) => {
        console.error(`Widget error: ${error.error} - ${error.message}`)
      }}
    />
  )
}

કસ્ટમ સ્ટાઇલિંગ સાથે

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function BrandedWidget() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      primaryColor="#4a90d9"
      className="my-custom-widget"
    />
  )
}

.my-custom-widget .tp-button--end {
  background-color: #e74c3c;
}

ઉપલબ્ધ તમામ CSS ક્લાસ અને કસ્ટમ પ્રોપર્ટી માટે સ્ટાઇલિંગ માર્ગદર્શિકા જુઓ.

રિંગટોન સાથે

કનેક્શન સ્થાપિત થઈ રહ્યું હોય ત્યારે ફોન વાગવાનો અવાજ વગાડો:

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function PhoneWidget() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      ringtone={true}
    />
  )
}

ઑડિયો ફાઇલ URL પાસ કરીને કસ્ટમ રિંગટોનનો ઉપયોગ કરો:

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  ringtone="https://example.com/my-ringtone.mp3"
/>

વિજેટ connecting સ્થિતિમાં હોય ત્યારે રિંગટોન લૂપમાં વાગે છે અને એજન્ટ કનેક્ટ થાય ત્યારે સરળતાથી ધીમો થઈને બંધ થાય છે.

કસ્ટમ API બેઝ સાથે

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  apiBase="https://your-proxy.example.com/v1"
/>

ભૂલ સંભાળવું

જ્યારે onError કૉલબૅક ટ્રિગર થાય છે, ત્યારે તેને બે ફીલ્ડ ધરાવતો એક એરર ઑબ્જેક્ટ મળે છે:

સામાન્ય એરર કોડમાં ડોમેન મંજૂર નથી, એજન્ટ મળ્યો નથી અને અમાન્ય API કીનો સમાવેશ થાય છે.

આગળના પગલાં