--- title: "CDN / स्क्रिप्ट टॅग" description: "बंडलरशिवाय कोणत्याही वेबसाइटवर ThunderPhone व्हॉइस विजेट जोडा" --- CDN बिल्ड React अंतर्गत बंडल करते, त्यामुळे तुम्ही विजेट स्थिर साइट्स, WordPress, Webflow किंवा HTML जोडता येणाऱ्या कोणत्याही पेजवर वापरू शकता. npm, बंडलर किंवा फ्रेमवर्कची गरज नाही. ## CDN URL ```html Latest (recommended) ``` ```html Pinned version ``` डॅशबोर्डचा एम्बेड स्निपेट जनरेटर `latest` URL तयार करतो. ते 5 मिनिटांसाठी कॅश केले जातात आणि नवीन स्थिर रिलीझ आपोआप स्वीकारतात. पिन केलेले `/widget/vX.Y.Z/` पथ अपरिवर्तनीय असतात आणि दीर्घकाळ कॅश केले जातात -- तुम्ही पिन केल्यास, ज्या `@thunderphone/widget` npm रिलीझसह तुम्ही विकास करता त्याच्याशी आवृत्ती जुळवा. --- ## मूलभूत वापर ```html

``` विजेट लक्ष्य घटकामध्ये माउंट होते आणि **व्ह्यूपोर्टच्या एका कोपऱ्यात स्थिर-स्थितीच्या बारच्या स्वरूपात** रेंडर होते (डीफॉल्ट `bottom-right`, `position` पर्यायाद्वारे नियंत्रित). माउंट घटक फक्त React रूट आहे -- पेजमधील त्याचे स्थान विजेट कुठे दिसते यावर परिणाम करत नाही. --- ## माउंट पर्याय `ThunderPhone.mount()` React घटकाप्रमाणेच पर्याय स्वीकारते, तसेच `element` प्रॉपर्टीही स्वीकारते: | पर्याय | प्रकार | आवश्यक | डीफॉल्ट | वर्णन | |--------|------|----------|---------|-------------| | `element` | `string \| HTMLElement` | होय | -- | CSS सिलेक्टर (उदा., `'#thunderphone'`) किंवा DOM घटक संदर्भ. | | `publishableKey` | `string` | होय | -- | प्रकाशित करण्यायोग्य API की (`pk_live_...`). कीच्या विजेट कॉन्फिगरेशनमधून एजंट आपोआप निश्चित केला जातो. | | `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` (कोड) आणि `message` फील्ड असतात. | | `ringtone` | `boolean \| string` | नाही | `false` | कनेक्ट होत असताना रिंगटोन वाजवा. डीफॉल्ट रिंगटोनसाठी `true`, किंवा सानुकूल ऑडिओसाठी URL स्ट्रिंग. | --- ## क्लीनअप `ThunderPhone.mount()` क्लीनअप पद्धतींसह विजेट इन्स्टन्स परत करते: ```html ``` `unmount()` आणि `destroy()` दोन्ही एकच कार्य करतात -- ते कोणतेही सक्रिय व्हॉइस सत्र डिस्कनेक्ट करतात आणि DOM मधून विजेट काढून टाकतात. तुमच्या कोडमध्ये जे अधिक योग्य वाचते ते वापरा. सिंगल-पेज अॅप्लिकेशन्समध्ये दुसऱ्या पृष्ठावर जाताना किंवा समाविष्ट करणारा घटक काढून टाकल्यावर विजेट नेहमी क्लीनअप करा. यामुळे सक्रिय व्हॉइस सत्रे योग्यरित्या डिस्कनेक्ट होतात. --- ## उदाहरणे ### सानुकूल रंगासह गडद थीम ```html

``` ### सानुकूल स्थान ```html

``` ### इव्हेंट कॉलबॅकसह ```html

``` ### रिंगटोनसह ```html

``` ### DOM घटक संदर्भ वापरून ```html

``` ### WordPress / CMS एकत्रीकरण हे सानुकूल HTML ब्लॉकमध्ये किंवा तुमच्या थीमच्या फूटरमध्ये जोडा: ```html ``` `

` कुठेही ठेवता येतो -- तो फक्त माउंट पॉइंट आहे. विजेट स्वतः व्ह्यूपोर्टच्या एका कोपऱ्यात स्थिर ओव्हरले म्हणून रेंडर होते (`position` पर्यायाद्वारे सेट केलेले) आणि आसपासच्या सामग्रीसह प्रवाहित होत नाही. --- ## समस्यानिवारण CSS आणि JS या दोन्ही फाइल्स लोड झाल्या आहेत याची खात्री करा. नेटवर्क त्रुटींसाठी ब्राउझर कन्सोल तपासा. `ThunderPhone.mount()` कॉल करण्यापूर्वी लक्ष्य घटक DOM मध्ये अस्तित्वात असल्याचे सत्यापित करा. स्क्रिप्ट अद्याप लोड झालेली नाही. `widget.js` साठीचा `