ಎಂಬೆಡ್ ಮಾಡಬಹುದಾದ ಧ್ವನಿ ವಿಜೆಟ್

ThunderPhone ಎಂಬೆಡ್ ಮಾಡಬಹುದಾದ ಧ್ವನಿ ವಿಜೆಟ್ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಸಂದರ್ಶಕರಿಗೆ ಬ್ರೌಸರ್‌ನಿಂದಲೇ AI ಏಜೆಂಟ್ ಜೊತೆಗೆ ಮಾತನಾಡಲು ಅನುಮತಿಸುತ್ತದೆ. ಫೋನ್ ಕರೆ ಅಗತ್ಯವಿಲ್ಲ -- ಬಳಕೆದಾರರು ಒಂದು ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ ThunderPhone ಚಾಲಿತ ನೈಜ-ಸಮಯದ ಧ್ವನಿ ಸಂಭಾಷಣೆಯನ್ನು ಆರಂಭಿಸುತ್ತಾರೆ.

ವಿಜೆಟ್ ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದಾದ ಆ್ಯಕ್ಸೆಂಟ್ ಬಣ್ಣಗಳು ಮತ್ತು ಸ್ಥಾನೀಕರಣದೊಂದಿಗೆ, ಲೈಟ್ ಮತ್ತು ಡಾರ್ಕ್ ಥೀಮ್‌ಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ಗಾಜಿನಂತಹ ಬಾರ್ ಆಗಿ ರೆಂಡರ್ ಆಗುತ್ತದೆ. ಇದನ್ನು @thunderphone/widget npm ಪ್ಯಾಕೇಜ್ ಆಗಿ ವಿತರಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಬಂಡ್ಲರ್ ಅಲ್ಲದ ಪರಿಸರಗಳಿಗಾಗಿ CDN ಮೂಲಕವೂ ಲಭ್ಯವಿದೆ.

ThunderPhone widget in light and dark themes with various accent colors

ಪೂರ್ವಾಪೇಕ್ಷಿತಗಳು

ವಿಜೆಟ್ ಅನ್ನು ಎಂಬೆಡ್ ಮಾಡುವ ಮೊದಲು, ThunderPhone Dashboard ನಲ್ಲಿ ಈ ಮೂರು ಹಂತಗಳನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ:

ಪ್ರಕಟಿಸಬಹುದಾದ API ಕೀಲಿಯನ್ನು ರಚಿಸಿ
ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಸೆಟ್ಟಿಂಗ್‌ಗಳಲ್ಲಿನ ಡೆವಲಪರ್‌ಗಳು ಗೆ ಹೋಗಿ ಮತ್ತು ಪ್ರಕಟಿಸಬಹುದಾದ ಕೀಲಿಯನ್ನು ರಚಿಸಿ. ಪ್ರಕಟಿಸಬಹುದಾದ ಕೀಲಿಗಳು pk_live_ ನಿಂದ ಪ್ರಾರಂಭವಾಗುತ್ತವೆ ಮತ್ತು ಕ್ಲೈಂಟ್-ಸೈಡ್ ಕೋಡ್‌ನಲ್ಲಿ ಸೇರಿಸಲು ಸುರಕ್ಷಿತವಾಗಿವೆ.
ಅನುಮತಿಸಲಾದ ಡೊಮೇನ್‌ಗಳನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಿ
ಅದೇ ಡೆವಲಪರ್‌ಗಳ ಸೆಟ್ಟಿಂಗ್‌ಗಳಲ್ಲಿ, ವಿಜೆಟ್ ಅನ್ನು ಎಂಬೆಡ್ ಮಾಡುವ ಡೊಮೇನ್‌ಗಳನ್ನು ಸೇರಿಸಿ. ಅಭಿವೃದ್ಧಿಗಾಗಿ localhost ಗೆ ಯಾವಾಗಲೂ ಅನುಮತಿ ಇರುತ್ತದೆ. ವೈಲ್ಡ್‌ಕಾರ್ಡ್‌ಗಳಿಗೆ ಬೆಂಬಲವಿದೆ (ಉದಾ., *.example.com).
ವೆಬ್ ವಿಜೆಟ್ ರಚಿಸಿ
ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ನಲ್ಲಿನ ವೆಬ್ ವಿಜೆಟ್‌ಗಳು ಗೆ ಹೋಗಿ ಮತ್ತು ವಿಜೆಟ್ ರಚಿಸಿ. ನೀವು ಬಹಿರಂಗಪಡಿಸಲು ಬಯಸುವ ಏಜೆಂಟ್ ಮತ್ತು ಬಳಸಬೇಕಾದ ಪ್ರಕಟಿಸಬಹುದಾದ ಕೀಲಿಯನ್ನು ಆಯ್ಕೆಮಾಡಿ. ನಿಮ್ಮ ಪ್ರಕಟಿಸಬಹುದಾದ ಕೀಲಿ ಕಾನ್ಫಿಗರೇಶನ್‌ನಿಂದ ಏಜೆಂಟ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನಿರ್ಧರಿಸಲಾಗುತ್ತದೆ.

ತ್ವರಿತ ಆರಂಭ

ಪ್ಯಾಕೇಜ್ ಅನ್ನು ಸ್ಥಾಪಿಸಿ:

npm install @thunderphone/widget

ನಿಮ್ಮ ಆ್ಯಪ್‌ಗೆ ವಿಜೆಟ್ ಅನ್ನು ಸೇರಿಸಿ:

import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
    />
  )
}

ಅಷ್ಟೇ. ನಿಮ್ಮ ಬಳಕೆದಾರರು ಒಂದೇ ಕ್ಲಿಕ್‌ನಲ್ಲಿ ಅವರನ್ನು ನಿಮ್ಮ AI ಏಜೆಂಟ್‌ಗೆ ಸಂಪರ್ಕಿಸುವ ಗಾಜಿನಂತಹ ಕರೆ ಬಾರ್ ಅನ್ನು ನೋಡುತ್ತಾರೆ.

ಕಸ್ಟಮೈಸೇಶನ್

ವಿಜೆಟ್ ನಾಲ್ಕು ಗೋಚರತೆ ಪ್ರಾಪ್‌ಗಳನ್ನು ಹೊಂದಿದೆ:

ಪ್ರಾಪ್	ಡೀಫಾಲ್ಟ್	ವಿವರಣೆ
`theme`	`'light'`	ಬಿಳಿ ಗಾಜಿಗಾಗಿ `'light'`, ಡಾರ್ಕ್ ಗಾಜಿಗಾಗಿ `'dark'`
`primaryColor`	`'#000000'` (ಲೈಟ್) / `'#ffffff'` (ಡಾರ್ಕ್)	ಆರಂಭ ಬಟನ್, ವೇವ್‌ಫಾರ್ಮ್ ಮತ್ತು ಸಂಪರ್ಕಿಸುವ ಸೂಚಕಕ್ಕಾಗಿ ಆ್ಯಕ್ಸೆಂಟ್ ಬಣ್ಣ
`title`	`'Voice assistant'`	ವಿಜೆಟ್‌ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾದ ಪಠ್ಯ
`position`	`'bottom-right'`	ವ್ಯೂಪೋರ್ಟ್ ಮೂಲೆಗೆ: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'`

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Ask our AI"
/>

ಇನ್ನೂ ಮೂರು ಪ್ರಾಪ್‌ಗಳು ಗೋಚರತೆಯ ಬದಲು ಸೆಷನ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡುತ್ತವೆ -- ಕರೆ ಆರಂಭವಾದಾಗ ಎಲ್ಲವನ್ನೂ ಸೆಷನ್ ವಿನಂತಿಗೆ ಫಾರ್ವರ್ಡ್ ಮಾಡಲಾಗುತ್ತದೆ:

ಪ್ರಾಪ್	ವಿವರಣೆ
`language`	ಪ್ರತಿ-ಸೆಷನ್ ಭಾಷಾ ಓವರ್‌ರೈಡ್ -- `en`, `es`, ಅಥವಾ `fr-FR` ನಂತಹ ಕೋಡ್ ಅಥವಾ ಲೊಕೇಲ್
`voice`	ಪ್ರತಿ-ಸೆಷನ್ ಧ್ವನಿ ಓವರ್‌ರೈಡ್ -- `maria` ನಂತಹ ಧ್ವನಿ ಹೆಸರು
`context`	ಏಜೆಂಟ್‌ಗೆ ರವಾನಿಸಲಾದ ವಾಸ್ತವಿಕ ಪುಟ ಅಥವಾ ಸೈಟ್ ಸಂದರ್ಭ (ಸರ್ವರ್-ಸೈಡ್‌ನಲ್ಲಿ 12,000 ಅಕ್ಷರಗಳಿಗೆ ಮೊಟಕುಗೊಳಿಸಲಾಗುತ್ತದೆ)

ಸಂಪೂರ್ಣ ಪ್ರಾಪ್‌ಗಳ ಪಟ್ಟಿಗಾಗಿ React ಘಟಕ ಉಲ್ಲೇಖ ನೋಡಿ.

ಸಂಪೂರ್ಣವಾಗಿ ಕಸ್ಟಮ್ UI ಗಾಗಿ, ನಿಮ್ಮದೇ ಇಂಟರ್‌ಫೇಸ್ ನಿರ್ಮಿಸುವಾಗ ಧ್ವನಿ ಸೆಷನ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಹೆಡ್‌ಲೆಸ್ ಹುಕ್ ಬಳಸಿ. ಆಡಿಯೊ-ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ ದೃಶ್ಯೀಕರಣಗಳನ್ನು ನಿರ್ಮಿಸಲು ಹುಕ್ ನೈಜ-ಸಮಯದ ಆಡಿಯೊ ಮಟ್ಟಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಏಕೀಕರಣ ಆಯ್ಕೆಗಳು

ನಿಮ್ಮ ಸ್ಟ್ಯಾಕ್‌ಗೆ ಹೊಂದುವ ಏಕೀಕರಣ ವಿಧಾನವನ್ನು ಆಯ್ಕೆಮಾಡಿ:

React ಘಟಕ

ಅಂತರ್ನಿರ್ಮಿತ ಕರೆ ನಿಯಂತ್ರಣಗಳು ಮತ್ತು ಸ್ಥಿತಿ ಪ್ರದರ್ಶನವಿರುವ ಪೂರ್ವನಿರ್ಮಿತ UI ಘಟಕ. ಇಂಪೋರ್ಟ್ ಮಾಡಿ, ಪ್ರಾಪ್ಸ್ ನೀಡಿ, ಮುಗಿಯಿತು.

ಹೆಡ್‌ಲೆಸ್ ಹೂಕ್

UI ಮೇಲೆ ಸಂಪೂರ್ಣ ನಿಯಂತ್ರಣ. ನೀವು ನಿಮ್ಮದೇ ಇಂಟರ್‌ಫೇಸ್ ನಿರ್ಮಿಸುವಾಗ useThunderPhone ಹೂಕ್ ಧ್ವನಿ ಸೆಷನ್ ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ.

CDN / ಸ್ಕ್ರಿಪ್ಟ್ ಟ್ಯಾಗ್

ಬಂಡ್ಲರ್ ಅಗತ್ಯವಿಲ್ಲ. ಸ್ಥಿರ ಸೈಟ್‌ಗಳು, WordPress ಮತ್ತು ಇತರ React-ಅಲ್ಲದ ಪರಿಸರಗಳಿಗಾಗಿ ಸ್ಕ್ರಿಪ್ಟ್ ಟ್ಯಾಗ್ ಮೂಲಕ ವಿಜೆಟ್ ಲೋಡ್ ಮಾಡಿ.

ರೂಪವಿನ್ಯಾಸ

ವಿಜೆಟ್‌ನಲ್ಲಿ theme ಪ್ರಾಪ್ ಮೂಲಕ ನಿಯಂತ್ರಿಸಲ್ಪಡುವ ಅಂತರ್ನಿರ್ಮಿತ ಲೈಟ್ ಮತ್ತು ಡಾರ್ಕ್ ಥೀಮ್‌ಗಳು ಹಾಗೂ primaryColor ಪ್ರಾಪ್ ಮೂಲಕ ನಿಯಂತ್ರಿಸಲ್ಪಡುವ ಆಕ್ಸೆಂಟ್ ಬಣ್ಣವಿದೆ. ಇನ್ನಷ್ಟು ಆಳವಾದ ಕಸ್ಟಮೈಸೇಶನ್‌ಗಾಗಿ, ನೀವು CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳು ಮತ್ತು ಕ್ಲಾಸ್‌ಗಳನ್ನು ಓವರ್‌ರೈಡ್ ಮಾಡಬಹುದು. ವಿವರಗಳಿಗಾಗಿ ರೂಪವಿನ್ಯಾಸ ಮಾರ್ಗದರ್ಶಿ ನೋಡಿ.