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

CDN बिल्ड React अंतर्गत बंडल करते, त्यामुळे तुम्ही विजेट स्थिर साइट्स, WordPress, Webflow किंवा HTML जोडता येणाऱ्या कोणत्याही पेजवर वापरू शकता. npm, बंडलर किंवा फ्रेमवर्कची गरज नाही.

CDN URL

<link rel="stylesheet" href="https://cdn.thunderphone.com/widget/latest/style.css" />
<script src="https://cdn.thunderphone.com/widget/latest/widget.js"></script>

<!-- 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 प्रॉपर्टीही स्वीकारते:

पर्याय	प्रकार	आवश्यक	डीफॉल्ट	वर्णन
`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() क्लीनअप पद्धतींसह विजेट इन्स्टन्स परत करते:

<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>

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

विजेट दिसत नाही

CSS आणि JS या दोन्ही फाइल्स लोड झाल्या आहेत याची खात्री करा. नेटवर्क त्रुटींसाठी ब्राउझर कन्सोल तपासा. ThunderPhone.mount() कॉल करण्यापूर्वी लक्ष्य घटक DOM मध्ये अस्तित्वात असल्याचे सत्यापित करा.

ThunderPhone परिभाषित केलेले नाही

स्क्रिप्ट अद्याप लोड झालेली नाही. widget.js साठीचा <script> टॅग तुमच्या माउंट कॉलच्या आधी दिसत असल्याची खात्री करा, किंवा माउंट कॉल DOMContentLoaded लिसनरमध्ये गुंडाळा.

डोमेनला परवानगी नाही त्रुटी

app.thunderphone.com येथे डेव्हलपर्स सेटिंग्जमधील अनुमत डोमेनच्या सूचीमध्ये तुमचे डोमेन जोडा. localhost ला नेहमी परवानगी असते हे लक्षात ठेवा.

पुढील पायऱ्या

स्टाइलिंग

CSS कस्टम प्रॉपर्टीजसह विजेटचे स्वरूप सानुकूलित करा.

React घटक

React वापरत आहात? घटकाचे एकत्रीकरण अधिक सोपे आहे.