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

काही ओळींच्या कोडसह कोणत्याही वेबसाइटवर व्हॉइस AI एजंट जोडा

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

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

पूर्वअटी#

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

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

   डॅशबोर्डमधील वेब विजेट्स वर जा आणि विजेट तयार करा. तुम्हाला उपलब्ध करून द्यायचा असलेला एजंट निवडा. प्रत्येक विजेटची स्वतःची प्रकाशित करण्यायोग्य की (pk_live_...) असते, जी क्लायंट-साइड कोडमध्ये समाविष्ट करणे सुरक्षित आहे; एजंट कीवरून निश्चित केला जातो.

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

   त्याच विजेटमध्ये, ते एम्बेड केले जाईल ते डोमेन जोडा. वाइल्डकार्ड समर्थित आहेत (उदा., *.example.com). कोणी तुमची की दुसऱ्या साइटवर कॉपी केल्यास ही सूची विजेटला कार्य करण्यापासून रोखते; हे प्रमाणीकरण नाही, कारण ब्राउझरबाहेरील स्क्रिप्ट कोणताही Origin हेडर पाठवू शकते. प्रॉडक्शनमध्ये localhost आपोआप अनुमत नसते: प्रॉडक्शन API विरुद्ध स्थानिक पातळीवर चाचणी करण्यासाठी ते सूचीमध्ये जोडा.

3. ब्राउझर ओव्हरराइड्स निवडा

   तुमचे पृष्ठ language, voice, किंवा context सेट करत असल्यास, ब्राउझर ओव्हरराइड्स अंतर्गत प्रत्येक पर्याय चालू करा. नवीन विजेट्स कोणतेही स्वीकारत नाहीत आणि बंद असलेली सेटिंग असलेली सेशन विनंती 400 override_not_allowed सह अयशस्वी होते. ब्राउझर ओव्हरराइड्स पहा.

जलद सुरुवात#

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

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 एजंटशी जोडतो.

सानुकूलन#

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

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

आणखी तीन props स्वरूपाऐवजी सत्र सानुकूलित करतात -- कॉल सुरू झाल्यावर ते सर्व सत्र विनंतीकडे पाठवले जातात. प्रत्येक prop फक्त विजेटची publishable key ब्राउझर ओव्हरराइड्स अंतर्गत त्यास अनुमती देत असल्यास कार्य करते; अन्यथा सत्र विनंती 400 override_not_allowed सह अयशस्वी होते:

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

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

प्रत्येक विजेट संभाषण हा एक कॉल असतो. तो तुमच्या संस्थेच्या समवर्ती-कॉल मर्यादेत गणला जातो (डीफॉल्टनुसार प्रगतीपथावर असलेले 20 कॉल, फोन आणि इतर कॉलसह सामायिक) तसेच विजेटच्या 25 सक्रिय सत्रांच्या मर्यादेत (किंवा तुमची समवर्ती-कॉल मर्यादा जास्त असल्यास ती मर्यादा). यापैकी कोणतीही मर्यादा गाठल्यावर, कॉल संपेपर्यंत नवीन संभाषण सुरू करता येत नाही.

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

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

स्टायलिंग#

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