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

Widget

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

बंडलर के बिना किसी भी वेबसाइट में ThunderPhone वॉइस विजेट जोड़ें

CDN बिल्ड React को आंतरिक रूप से बंडल करता है, इसलिए आप विजेट को स्टैटिक साइटों, WordPress, Webflow, या किसी भी ऐसे पेज पर उपयोग कर सकते हैं जहाँ आप HTML जोड़ सकते हैं। npm, बंडलर या फ्रेमवर्क की आवश्यकता नहीं है।

CDN URLs

Latest (recommended)
<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
Pinned version
<!-- Each stable release also publishes an immutable /widget/vX.Y.Z/ path
     matching the @thunderphone/widget npm version (v1.1.2 at the time of
     writing). If you pin, you own updating the URL for new releases. -->
<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/v1.1.2/style.css" />
<script src="https://cdn.thunderphone.com/widget/v1.1.2/widget.js"></script>

बुनियादी उपयोग

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
</head>
<body>
 
  <div id="thunderphone"></div>
 
  <script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
  <script>
    ThunderPhone.mount({
      element: '#thunderphone',
      publishableKey: 'pk_live_your_publishable_key',
    })
  </script>
 
</body>
</html>

विजेट लक्ष्य एलिमेंट में माउंट होता है और व्यूपोर्ट के किसी कोने में फिक्स्ड-पोज़िशन बार के रूप में रेंडर होता है (डिफ़ॉल्ट bottom-right, जिसे position विकल्प नियंत्रित करता है)। माउंट एलिमेंट केवल React रूट है -- पेज में उसका स्थान विजेट के दिखाई देने की जगह को प्रभावित नहीं करता।

माउंट विकल्प

ThunderPhone.mount() React कंपोनेंट जैसे ही विकल्प स्वीकार करता है, साथ ही element प्रॉपर्टी भी:

विकल्पटाइपआवश्यकडिफ़ॉल्टविवरण
elementstring | HTMLElementहाँ--CSS सेलेक्टर (जैसे, '#thunderphone') या DOM एलिमेंट रेफ़रेंस।
publishableKeystringहाँ--पब्लिशेबल API key (pk_live_...)। एजेंट को key के विजेट कॉन्फ़िगरेशन से स्वचालित रूप से निर्धारित किया जाता है।
theme'light' | 'dark'नहीं'light'कलर स्कीम।
primaryColorstringनहीं'#000000' (लाइट) / '#ffffff' (डार्क)एक्सेंट कलर के रूप में उपयोग की जाने वाली CSS कलर स्ट्रिंग।
titlestringनहीं'Voice assistant'विजेट बार में प्रदर्शित टेक्स्ट।
position'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'नहीं'bottom-right'फिक्स्ड व्यूपोर्ट पोज़िशन।
apiBasestringनहीं'https://api.thunderphone.com/v1'API बेस URL ओवरराइड।
languagestringनहीं--प्रति-सेशन भाषा ओवरराइड -- en, es, या fr-FR जैसा भाषा कोड या लोकेल। सेट न होने पर, एजेंट की कॉन्फ़िगर की गई भाषा लागू होती है।
voicestringनहीं--प्रति-सेशन आवाज़ ओवरराइड -- maria जैसा आवाज़ नाम। सेट न होने पर, एजेंट की कॉन्फ़िगर की गई आवाज़ लागू होती है।
contextstringनहीं--एजेंट को भेजा जाने वाला प्रति-सेशन तथ्यात्मक पेज या साइट कॉन्टेक्स्ट। सर्वर-साइड पर 12,000 कैरेक्टर तक ट्रंकेट किया जाता है।
onConnect() => voidनहीं--आवाज़ सेशन कनेक्ट होने पर कॉल किया जाता है।
onDisconnect() => voidनहीं--सेशन समाप्त होने पर कॉल किया जाता है।
onError(error) => voidनहीं--त्रुटियों पर कॉल किया जाता है। Error में error (कोड) और message फ़ील्ड होते हैं।
ringtoneboolean | stringनहींfalseकनेक्ट करते समय रिंगटोन चलाएँ। डिफ़ॉल्ट रिंगटोन के लिए true, या कस्टम ऑडियो के लिए URL स्ट्रिंग।

क्लीनअप

ThunderPhone.mount() क्लीनअप मेथड्स के साथ एक विजेट इंस्टेंस लौटाता है:

<script>
  var widget = ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
  })
 
  // Later, when you want to remove the widget:
  widget.unmount()
 
  // Or equivalently:
  widget.destroy()
</script>

unmount() और destroy() दोनों एक ही काम करते हैं -- वे किसी भी सक्रिय वॉइस सेशन को डिस्कनेक्ट करते हैं और विजेट को DOM से हटाते हैं। अपने कोड में जो बेहतर लगे, उसका उपयोग करें।

उदाहरण

कस्टम रंग के साथ डार्क थीम

<div id="thunderphone"></div>
 
<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    theme: 'dark',
    primaryColor: '#8b5cf6',
    title: 'Talk to our AI',
  })
</script>

कस्टम पोज़िशन

<div id="thunderphone"></div>
 
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    position: 'bottom-left',
  })
</script>

इवेंट कॉलबैक के साथ

<div id="thunderphone"></div>
 
<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    onConnect: function () {
      console.log('Call started')
    },
    onDisconnect: function () {
      console.log('Call ended')
    },
    onError: function (error) {
      console.error('Widget error:', error.error, error.message)
    },
  })
</script>

रिंगटोन के साथ

<div id="thunderphone"></div>
 
<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  ThunderPhone.mount({
    element: '#thunderphone',
    publishableKey: 'pk_live_your_publishable_key',
    ringtone: true, // or a custom URL: 'https://example.com/ringtone.mp3'
  })
</script>

DOM एलिमेंट रेफरेंस का उपयोग

<div id="thunderphone"></div>
 
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
<script>
  var container = document.getElementById('thunderphone')
 
  ThunderPhone.mount({
    element: container,
    publishableKey: 'pk_live_your_publishable_key',
  })
</script>

WordPress / CMS इंटीग्रेशन

इसे कस्टम HTML ब्लॉक या अपनी थीम के फ़ूटर में जोड़ें:

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>
 
<div id="thunderphone-widget"></div>
<script>
  ThunderPhone.mount({
    element: '#thunderphone-widget',
    publishableKey: 'pk_live_your_publishable_key',
  })
</script>

समस्या निवारण

Widget दिखाई नहीं दे रहा है

सुनिश्चित करें कि CSS और JS, दोनों फ़ाइलें लोड हैं। नेटवर्क त्रुटियों के लिए ब्राउज़र कंसोल जांचें। ThunderPhone.mount() कॉल करने से पहले सत्यापित करें कि लक्ष्य एलिमेंट DOM में मौजूद है।

ThunderPhone परिभाषित नहीं है

स्क्रिप्ट अभी तक लोड नहीं हुई है। सुनिश्चित करें कि widget.js के लिए <script> टैग आपकी माउंट कॉल से पहले दिखाई दे, या माउंट कॉल को DOMContentLoaded लिस्नर में रैप करें।

डोमेन अनुमत नहीं है त्रुटि

app.thunderphone.com पर Developers सेटिंग्स में अपने डोमेन को अनुमत डोमेन सूची में जोड़ें। याद रखें कि localhost हमेशा अनुमत होता है।

अगले चरण

स्टाइलिंग

CSS कस्टम प्रॉपर्टीज़ के साथ widget का स्वरूप कस्टमाइज़ करें।

React कंपोनेंट

React का उपयोग कर रहे हैं? कंपोनेंट इंटीग्रेशन अधिक सरल है।