ಪ್ರಾರಂಭಿಸಿ

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 ಗುಣಲಕ್ಷಣವನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ:

ಆಯ್ಕೆವಿಧಅಗತ್ಯವಿದೆಡೀಫಾಲ್ಟ್ವಿವರಣೆ
elementstring | HTMLElementಹೌದು--CSS ಸೆಲೆಕ್ಟರ್ (ಉದಾ., '#thunderphone') ಅಥವಾ DOM ಘಟಕದ ಉಲ್ಲೇಖ.
publishableKeystringಹೌದು--ಪ್ರಕಟಿಸಬಹುದಾದ API ಕೀ (pk_live_...). ಕೀಯ ವಿಜೆಟ್ ಕಾನ್ಫಿಗರೇಶನ್‌ನಿಂದ ಏಜೆಂಟ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನಿರ್ಧರಿಸಲಾಗುತ್ತದೆ.
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 (ಕೋಡ್) ಮತ್ತು 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>

ಸಮಸ್ಯೆ ನಿವಾರಣೆ

ವಿಜೆಟ್ ಕಾಣಿಸುತ್ತಿಲ್ಲ

CSS ಮತ್ತು JS ಫೈಲ್‌ಗಳೆರಡೂ ಲೋಡ್ ಆಗಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ನೆಟ್‌ವರ್ಕ್ ದೋಷಗಳಿಗಾಗಿ ಬ್ರೌಸರ್ ಕನ್ಸೋಲ್ ಪರಿಶೀಲಿಸಿ. ThunderPhone.mount() ಕರೆಯುವ ಮೊದಲು ಗುರಿ ಎಲಿಮೆಂಟ್ DOM ನಲ್ಲಿ ಅಸ್ತಿತ್ವದಲ್ಲಿದೆ ಎಂದು ದೃಢೀಕರಿಸಿ.

ThunderPhone ವ್ಯಾಖ್ಯಾನಗೊಂಡಿಲ್ಲ

ಸ್ಕ್ರಿಪ್ಟ್ ಇನ್ನೂ ಲೋಡ್ ಆಗಿಲ್ಲ. widget.js ಗಾಗಿ ಇರುವ <script> ಟ್ಯಾಗ್ ನಿಮ್ಮ ಮೌಂಟ್ ಕರೆಗೂ ಮೊದಲು ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ, ಅಥವಾ ಮೌಂಟ್ ಕರೆಯನ್ನು DOMContentLoaded ಲಿಸನರ್‌ನಲ್ಲಿ ಸುತ್ತಿ.

ಡೊಮೇನ್ ಅನುಮತಿಸಲಾಗಿಲ್ಲ ದೋಷ

app.thunderphone.com ನಲ್ಲಿ ಡೆವಲಪರ್‌ಗಳು ಸೆಟ್ಟಿಂಗ್‌ಗಳಲ್ಲಿನ ಅನುಮತಿಸಲಾದ ಡೊಮೇನ್‌ಗಳ ಪಟ್ಟಿಗೆ ನಿಮ್ಮ ಡೊಮೇನ್ ಸೇರಿಸಿ. localhost ಗೆ ಯಾವಾಗಲೂ ಅನುಮತಿ ಇರುತ್ತದೆ ಎಂಬುದನ್ನು ನೆನಪಿಡಿ.

ಮುಂದಿನ ಹಂತಗಳು

ಶೈಲೀಕರಣ

CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳೊಂದಿಗೆ ವಿಜೆಟ್‌ನ ನೋಟವನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ.

React ಕಾಂಪೊನೆಂಟ್

React ಬಳಸುತ್ತಿದ್ದೀರಾ? ಕಾಂಪೊನೆಂಟ್ ಏಕೀಕರಣವು ಸರಳವಾಗಿದೆ.