> ## Documentation Index > Fetch the complete documentation index at: https://docs.thunderphone.com/llms.txt > Use this file to discover all available pages before exploring further. # CDN / स्क्रिप्ट टैग > बंडलर के बिना किसी भी वेबसाइट में ThunderPhone वॉइस विजेट जोड़ें CDN बिल्ड React को आंतरिक रूप से बंडल करता है, इसलिए आप विजेट को स्टैटिक साइटों, WordPress, Webflow, या किसी भी ऐसे पेज पर उपयोग कर सकते हैं जहाँ आप HTML जोड़ सकते हैं। npm, बंडलर या फ्रेमवर्क की आवश्यकता नहीं है। ## CDN URLs ```html Latest (recommended) theme={null} ``` ```html Pinned version theme={null} ``` `latest` URLs वे हैं जिन्हें डैशबोर्ड का एम्बेड स्निपेट जनरेटर बनाता है। इन्हें 5 मिनट के लिए कैश किया जाता है और ये नई स्टेबल रिलीज़ को स्वचालित रूप से प्राप्त करते हैं। पिन किए गए `/widget/vX.Y.Z/` पाथ अपरिवर्तनीय होते हैं और लंबे समय के लिए कैश किए जाते हैं -- यदि आप पिन करते हैं, तो वर्शन को उस `@thunderphone/widget` npm रिलीज़ से मिलाएँ जिसके विरुद्ध आप डेवलप करते हैं। *** ## बुनियादी उपयोग ```html theme={null}

``` विजेट लक्ष्य एलिमेंट में माउंट होता है और **व्यूपोर्ट के किसी कोने में फिक्स्ड-पोज़िशन बार** के रूप में रेंडर होता है (डिफ़ॉल्ट `bottom-right`, जिसे `position` विकल्प नियंत्रित करता है)। माउंट एलिमेंट केवल React रूट है -- पेज में उसका स्थान विजेट के दिखाई देने की जगह को प्रभावित नहीं करता। *** ## माउंट विकल्प `ThunderPhone.mount()` React कंपोनेंट जैसे ही विकल्प स्वीकार करता है, साथ ही `element` प्रॉपर्टी भी: | विकल्प | टाइप | आवश्यक | डिफ़ॉल्ट | विवरण | | ---------------- | -------------------------------------------------------------- | ------ | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | `element` | `string \| HTMLElement` | हाँ | -- | CSS सेलेक्टर (जैसे, `'#thunderphone'`) या DOM एलिमेंट रेफ़रेंस। | | `publishableKey` | `string` | हाँ | -- | पब्लिशेबल API key (`pk_live_...`)। एजेंट को key के विजेट कॉन्फ़िगरेशन से स्वचालित रूप से निर्धारित किया जाता है। | | `theme` | `'light' \| 'dark'` | नहीं | `'light'` | कलर स्कीम। | | `primaryColor` | `string` | नहीं | `'#000000'` (लाइट) / `'#ffffff'` (डार्क) | एक्सेंट कलर के रूप में उपयोग की जाने वाली CSS कलर स्ट्रिंग। | | `title` | `string` | नहीं | `'Voice assistant'` | विजेट बार में प्रदर्शित टेक्स्ट। | | `position` | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | नहीं | `'bottom-right'` | फिक्स्ड व्यूपोर्ट पोज़िशन। | | `apiBase` | `string` | नहीं | `'https://api.thunderphone.com/v1'` | API बेस URL ओवरराइड। | | `language` | `string` | नहीं | -- | प्रति-सेशन भाषा ओवरराइड -- `en`, `es`, या `fr-FR` जैसा भाषा कोड या लोकेल। सेट न होने पर, एजेंट की कॉन्फ़िगर की गई भाषा लागू होती है। | | `voice` | `string` | नहीं | -- | प्रति-सेशन आवाज़ ओवरराइड -- `maria` जैसा आवाज़ नाम। सेट न होने पर, एजेंट की कॉन्फ़िगर की गई आवाज़ लागू होती है। | | `context` | `string` | नहीं | -- | एजेंट को भेजा जाने वाला प्रति-सेशन तथ्यात्मक पेज या साइट कॉन्टेक्स्ट। सर्वर-साइड पर 12,000 कैरेक्टर तक ट्रंकेट किया जाता है। | | `onConnect` | `() => void` | नहीं | -- | आवाज़ सेशन कनेक्ट होने पर कॉल किया जाता है। | | `onDisconnect` | `() => void` | नहीं | -- | सेशन समाप्त होने पर कॉल किया जाता है। | | `onError` | `(error) => void` | नहीं | -- | त्रुटियों पर कॉल किया जाता है। Error में `error` (कोड) और `message` फ़ील्ड होते हैं। | | `ringtone` | `boolean \| string` | नहीं | `false` | कनेक्ट करते समय रिंगटोन चलाएँ। डिफ़ॉल्ट रिंगटोन के लिए `true`, या कस्टम ऑडियो के लिए URL स्ट्रिंग। | *** ## क्लीनअप `ThunderPhone.mount()` क्लीनअप मेथड्स के साथ एक विजेट इंस्टेंस लौटाता है: ```html theme={null} ``` `unmount()` और `destroy()` दोनों एक ही काम करते हैं -- वे किसी भी सक्रिय वॉइस सेशन को डिस्कनेक्ट करते हैं और विजेट को DOM से हटाते हैं। अपने कोड में जो बेहतर लगे, उसका उपयोग करें। सिंगल-पेज एप्लिकेशन में दूसरे पेज पर नेविगेट करते समय या कंटेनिंग एलिमेंट हटाए जाने पर हमेशा विजेट को क्लीन अप करें। इससे सक्रिय वॉइस सेशन सही तरीके से डिस्कनेक्ट होते हैं। *** ## उदाहरण ### कस्टम रंग के साथ डार्क थीम ```html theme={null}

``` ### कस्टम पोज़िशन ```html theme={null}

``` ### इवेंट कॉलबैक के साथ ```html theme={null}

``` ### रिंगटोन के साथ ```html theme={null}

``` ### DOM एलिमेंट रेफरेंस का उपयोग ```html theme={null}

``` ### WordPress / CMS इंटीग्रेशन इसे कस्टम HTML ब्लॉक या अपनी थीम के फ़ूटर में जोड़ें: ```html theme={null} ``` `

` कहीं भी रखा जा सकता है -- यह केवल माउंट पॉइंट है। विजेट स्वयं व्यूपोर्ट के एक कोने में फिक्स्ड ओवरले के रूप में रेंडर होता है (`position` विकल्प द्वारा सेट) और आसपास के कंटेंट के साथ फ्लो नहीं करता। *** ## समस्या निवारण सुनिश्चित करें कि CSS और JS, दोनों फ़ाइलें लोड हैं। नेटवर्क त्रुटियों के लिए ब्राउज़र कंसोल जांचें। `ThunderPhone.mount()` कॉल करने से पहले सत्यापित करें कि लक्ष्य एलिमेंट DOM में मौजूद है। स्क्रिप्ट अभी तक लोड नहीं हुई है। सुनिश्चित करें कि `widget.js` के लिए `