सुरुवात करा

एम्बेड करता येणारे व्हॉइस विजेट

ThunderPhone एम्बेड करता येणारे व्हॉइस विजेट तुमच्या वेबसाइट अभ्यागतांना ब्राउझरमधून थेट AI एजंटशी बोलू देते. फोन कॉलची गरज नाही -- वापरकर्ते बटणावर क्लिक करतात आणि ThunderPhone द्वारे समर्थित रिअल-टाइम व्हॉइस संभाषण सुरू करतात.

हे विजेट ग्लासमॉर्फिक बार म्हणून रेंडर होते, जे सानुकूल करता येणारे अॅक्सेंट रंग आणि पोझिशनिंगसह लाइट व डार्क थीमशी जुळवून घेते. हे @thunderphone/widget npm पॅकेज म्हणून वितरित केले जाते आणि नॉन-बंडलर वातावरणांसाठी CDN द्वारेही उपलब्ध आहे.

विविध अॅक्सेंट रंगांसह लाइट आणि डार्क थीममधील ThunderPhone विजेट

पूर्वअटी

विजेट एम्बेड करण्यापूर्वी, ThunderPhone डॅशबोर्ड मध्ये या तीन पायऱ्या पूर्ण करा:

  1. प्रकाशनयोग्य API की तयार करा

    डॅशबोर्ड सेटिंग्जमधील विकासक विभागात जा आणि प्रकाशनयोग्य की तयार करा. प्रकाशनयोग्य की pk_live_ ने सुरू होतात आणि क्लायंट-साइड कोडमध्ये समाविष्ट करणे सुरक्षित असते.

  2. अनुमत डोमेन्स कॉन्फिगर करा

    त्याच विकासक सेटिंग्जमध्ये, ज्या डोमेन्सवर विजेट एम्बेड केले जाईल ते जोडा. विकासासाठी localhost ला नेहमी परवानगी असते. वाइल्डकार्ड समर्थित आहेत (उदा., *.example.com).

  3. वेब विजेट तयार करा

    डॅशबोर्डमधील वेब विजेट्स विभागात जा आणि विजेट तयार करा. तुम्हाला उपलब्ध करून द्यायचा एजंट आणि वापरायची प्रकाशनयोग्य की निवडा. तुमच्या प्रकाशनयोग्य की कॉन्फिगरेशनमधून एजंट आपोआप निश्चित केला जातो.

जलद सुरुवात

पॅकेज इंस्टॉल करा:

npm install @thunderphone/widget

तुमच्या अॅपमध्ये विजेट जोडा:

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

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

इतकेच. तुमच्या वापरकर्त्यांना ग्लासमॉर्फिक कॉल बार दिसेल, जो त्यांना एका क्लिकमध्ये तुमच्या AI एजंटशी जोडतो.

सानुकूलन

विजेटमध्ये दिसण्यासाठी चार प्रॉप्स आहेत:

प्रॉपडीफॉल्टवर्णन
theme'light'पांढऱ्या ग्लाससाठी 'light', गडद ग्लाससाठी 'dark'
primaryColor'#000000' (लाइट) / '#ffffff' (डार्क)सुरू करण्याचे बटण, वेव्हफॉर्म आणि कनेक्टिंग इंडिकेटरसाठी अॅक्सेंट रंग
title'Voice assistant'विजेटमध्ये दाखवला जाणारा मजकूर
position'bottom-right'व्ह्यूपोर्ट कोपरा: 'bottom-right', 'bottom-left', 'top-right', 'top-left'
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

आणखी तीन प्रॉप्स स्वरूपाऐवजी सेशन सानुकूलित करतात -- कॉल सुरू झाल्यावर ते सर्व सेशन विनंतीकडे फॉरवर्ड केले जातात:

प्रॉपवर्णन
languageप्रति-सेशन भाषा ओव्हरराइड -- en, es, किंवा fr-FR यांसारखा कोड किंवा लोकेल
voiceप्रति-सेशन व्हॉइस ओव्हरराइड -- maria यांसारखे व्हॉइस नाव
contextएजंटला दिलेला तथ्यात्मक पृष्ठ किंवा साइट संदर्भ (सर्व्हर-साइडवर 12,000 वर्णांपर्यंत मर्यादित)

संपूर्ण प्रॉप्स तक्त्यासाठी React कंपोनंट संदर्भ पहा.

पूर्णपणे सानुकूल UI साठी, तुमचा स्वतःचा इंटरफेस तयार करताना व्हॉइस सेशन व्यवस्थापित करण्यासाठी हेडलेस हुक वापरा. ऑडिओ-रिअॅक्टिव्ह व्हिज्युअलायझेशन तयार करण्यासाठी हुक रिअल-टाइम ऑडिओ पातळी उपलब्ध करून देतो.

एकत्रीकरण पर्याय

तुमच्या स्टॅकला अनुरूप असलेली एकत्रीकरण पद्धत निवडा:

React घटक

अंगभूत कॉल नियंत्रणे आणि स्थिती प्रदर्शनासह पूर्वनिर्मित UI घटक. इंपोर्ट करा, props पास करा, झाले.

हेडलेस हुक

UI वर पूर्ण नियंत्रण. तुम्ही तुमचा स्वतःचा इंटरफेस तयार करत असताना useThunderPhone हुक व्हॉइस सत्र व्यवस्थापित करतो.

CDN / स्क्रिप्ट टॅग

बंडलरची आवश्यकता नाही. स्टॅटिक साइट्स, WordPress आणि इतर non-React वातावरणांसाठी स्क्रिप्ट टॅगद्वारे विजेट लोड करा.

स्टायलिंग

विजेटमध्ये theme prop द्वारे नियंत्रित अंगभूत लाइट आणि डार्क थीम्स तसेच primaryColor prop द्वारे नियंत्रित अॅक्सेंट रंग उपलब्ध आहेत. अधिक सखोल सानुकूलनासाठी, तुम्ही CSS कस्टम प्रॉपर्टीज आणि क्लासेस ओव्हरराइड करू शकता. तपशीलांसाठी स्टायलिंग मार्गदर्शक पहा.