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 ಪ್ರಾಪ್‌ಗಳನ್ನು ಸೆಷನ್ ವಿನಂತಿಗೆ (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 ಕೀ ಸೇರಿವೆ.

ಮುಂದಿನ ಹಂತಗಳು