ThunderPhone 2.0 अब लाइव है।सेल्फ़-सर्व, 2¢ प्रति मिनट से शुरू।घोषणा पढ़ें
शुरू करें

Widget

एम्बेड करने योग्य वॉइस विजेट

कुछ लाइनों के कोड से किसी भी वेबसाइट में वॉइस AI एजेंट जोड़ें

ThunderPhone एम्बेड करने योग्य वॉइस विजेट आपकी वेबसाइट के विज़िटर्स को ब्राउज़र से सीधे AI एजेंट से बात करने देता है। किसी फोन कॉल की आवश्यकता नहीं है -- उपयोगकर्ता एक बटन पर क्लिक करते हैं और ThunderPhone द्वारा संचालित रीयल-टाइम वॉइस बातचीत शुरू करते हैं।

विजेट एक ग्लासमॉर्फिक बार के रूप में रेंडर होता है जो लाइट और डार्क थीम के अनुकूल होता है, जिसमें कस्टमाइज़ करने योग्य एक्सेंट रंग और पोज़िशनिंग होती है। इसे @thunderphone/widget npm पैकेज के रूप में वितरित किया जाता है और यह गैर-बंडलर एनवायरनमेंट के लिए CDN के माध्यम से भी उपलब्ध है।

ThunderPhone widget in light and dark themes with various accent colors

आवश्यक शर्तें

विजेट एम्बेड करने से पहले, ThunderPhone Dashboard में ये तीन चरण पूरे करें:

  1. पब्लिश करने योग्य API key बनाएँ

    डैशबोर्ड सेटिंग्स में डेवलपर्स पर जाएँ और एक पब्लिश करने योग्य key बनाएँ। पब्लिश करने योग्य keys pk_live_ से शुरू होती हैं और क्लाइंट-साइड कोड में शामिल करना सुरक्षित है।

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

    उसी डेवलपर्स सेटिंग्स में, वे डोमेन जोड़ें जहाँ विजेट एम्बेड किया जाएगा। डेवलपमेंट के लिए localhost हमेशा अनुमत होता है। वाइल्डकार्ड समर्थित हैं (उदाहरण के लिए, *.example.com)।

  3. वेब विजेट बनाएँ

    डैशबोर्ड में वेब विजेट्स पर जाएँ और एक विजेट बनाएँ। जिस एजेंट को एक्सपोज़ करना है और जिस पब्लिश करने योग्य key का उपयोग करना है, उसे चुनें। एजेंट आपकी पब्लिश करने योग्य key कॉन्फ़िगरेशन से स्वचालित रूप से निर्धारित होता है।

त्वरित शुरुआत

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

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 एजेंट से कनेक्ट करता है।

कस्टमाइज़ेशन

विजेट में दिखावट के लिए चार props हैं:

Propडिफ़ॉल्टविवरण
theme'light'सफ़ेद ग्लास के लिए 'light', डार्क ग्लास के लिए 'dark'
primaryColor'#000000' (लाइट) / '#ffffff' (डार्क)स्टार्ट बटन, वेवफ़ॉर्म और कनेक्टिंग इंडिकेटर के लिए एक्सेंट रंग
title'Voice assistant'विजेट में दिखाया जाने वाला टेक्स्ट
position'bottom-right'व्यूपोर्ट कॉर्नर: 'bottom-right', 'bottom-left', 'top-right', 'top-left'
Light theme (default)
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>
Dark theme with custom color
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Ask our AI"
/>

दिखावट के बजाय सेशन को कस्टमाइज़ करने के लिए तीन और props हैं -- कॉल शुरू होने पर सभी को सेशन रिक्वेस्ट में फ़ॉरवर्ड किया जाता है:

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

पूरी props तालिका के लिए React कंपोनेंट रेफ़रेंस देखें।

पूरी तरह कस्टम UI के लिए, अपना इंटरफ़ेस बनाते समय वॉइस सेशन मैनेज करने हेतु हेडलेस हुक का उपयोग करें। हुक ऑडियो-रिएक्टिव विज़ुअलाइज़ेशन बनाने के लिए रीयल-टाइम ऑडियो लेवल एक्सपोज़ करता है।

इंटीग्रेशन विकल्प

अपनी स्टैक के लिए उपयुक्त इंटीग्रेशन विधि चुनें:

React कंपोनेंट

बिल्ट-इन कॉल कंट्रोल और स्टेटस डिस्प्ले के साथ पहले से बना UI कंपोनेंट। इंपोर्ट करें, props पास करें, हो गया।

हेडलेस हुक

UI पर पूरा नियंत्रण। आप अपना इंटरफ़ेस बनाते समय useThunderPhone हुक वॉइस सेशन को मैनेज करता है।

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

किसी बंडलर की आवश्यकता नहीं। स्टैटिक साइटों, WordPress और अन्य गैर-React एनवायरनमेंट के लिए स्क्रिप्ट टैग के माध्यम से विजेट लोड करें।

स्टाइलिंग

विजेट में theme prop द्वारा नियंत्रित बिल्ट-इन लाइट और डार्क थीम, और primaryColor prop द्वारा नियंत्रित एक्सेंट रंग शामिल हैं। अधिक गहरे कस्टमाइज़ेशन के लिए, आप CSS कस्टम प्रॉपर्टीज़ और क्लासेस को ओवरराइड कर सकते हैं। विवरण के लिए स्टाइलिंग गाइड देखें।