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"
    />
  )
}

ਪ੍ਰੌਪਸ

ਕੰਪੋਨੈਂਟ ThunderPhoneWidgetProps ਰਾਹੀਂ ਹੇਠਲੇ ਪ੍ਰੌਪਸ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ:

ਉਦਾਹਰਨਾਂ

ਕਸਟਮ ਰੰਗ ਨਾਲ ਡਾਰਕ ਥੀਮ

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 props ਸੈਸ਼ਨ ਬੇਨਤੀ (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 ਵਰਤੋ -- ਉਤਪਾਦ ਵੇਰਵੇ, ਕੀਮਤਾਂ ਜਾਂ ਪੰਨਾ-ਵਿਸ਼ੇਸ਼ FAQs। ਸਰਵਰ-ਸਾਈਡ ਇਸਨੂੰ 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 ਕੁੰਜੀ ਸ਼ਾਮਲ ਹਨ।

ਅਗਲੇ ਕਦਮ