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

ಕೆಲವು ಸಾಲುಗಳ ಕೋಡ್‌ನೊಂದಿಗೆ ಯಾವುದೇ ವೆಬ್‌ಸೈಟ್‌ಗೆ ಧ್ವನಿ AI ಏಜೆಂಟ್ ಅನ್ನು ಸೇರಿಸಿ

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

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

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

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

1. ವೆಬ್ ವಿಜೆಟ್ ರಚಿಸಿ

   ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ನಲ್ಲಿರುವ ವೆಬ್ ವಿಜೆಟ್‌ಗಳು ಗೆ ಹೋಗಿ ವಿಜೆಟ್ ರಚಿಸಿ. ನೀವು ಪ್ರದರ್ಶಿಸಲು ಬಯಸುವ ಏಜೆಂಟ್ ಅನ್ನು ಆಯ್ಕೆಮಾಡಿ. ಪ್ರತಿಯೊಂದು ವಿಜೆಟ್‌ಗೂ ತನ್ನದೇ ಪ್ರಕಟಿಸಬಹುದಾದ ಕೀ (pk_live_...) ಇರುತ್ತದೆ; ಇದನ್ನು ಕ್ಲೈಯಂಟ್-ಸೈಡ್ ಕೋಡ್‌ನಲ್ಲಿ ಸೇರಿಸುವುದು ಸುರಕ್ಷಿತವಾಗಿದೆ; ಏಜೆಂಟ್ ಅನ್ನು ಕೀಯಿಂದ ನಿರ್ಧರಿಸಲಾಗುತ್ತದೆ.

2. ಅನುಮತಿಸಲಾದ ಡೊಮೇನ್‌ಗಳನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಿ

   ಅದೇ ವಿಜೆಟ್‌ನಲ್ಲಿ, ಅದನ್ನು ಎಂಬೆಡ್ ಮಾಡುವ ಡೊಮೇನ್‌ಗಳನ್ನು ಸೇರಿಸಿ. ವೈಲ್ಡ್‌ಕಾರ್ಡ್‌ಗಳು ಬೆಂಬಲಿತವಾಗಿವೆ (ಉದಾ., *.example.com). ಯಾರಾದರೂ ನಿಮ್ಮ ಕೀಯನ್ನು ಬೇರೆ ಸೈಟ್‌ಗೆ ನಕಲಿಸಿದಾಗ ವಿಜೆಟ್ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದನ್ನು ಈ ಪಟ್ಟಿ ತಡೆಯುತ್ತದೆ; ಬ್ರೌಸರ್‌ನ ಹೊರಗಿನ ಸ್ಕ್ರಿಪ್ಟ್ ಯಾವುದೇ Origin ಹೆಡರ್ ಕಳುಹಿಸಬಹುದಾದ್ದರಿಂದ, ಇದು ದೃಢೀಕರಣವಲ್ಲ. ಪ್ರೊಡಕ್ಷನ್‌ನಲ್ಲಿ localhost ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅನುಮತಿಸಲ್ಪಡುವುದಿಲ್ಲ: ಪ್ರೊಡಕ್ಷನ್ API ವಿರುದ್ಧ ಸ್ಥಳೀಯವಾಗಿ ಪರೀಕ್ಷಿಸಲು ಅದನ್ನು ಪಟ್ಟಿಗೆ ಸೇರಿಸಿ.

3. ಬ್ರೌಸರ್ ಓವರ್‌ರೈಡ್‌ಗಳನ್ನು ಆಯ್ಕೆಮಾಡಿ

   ನಿಮ್ಮ ಪುಟವು language, voice, ಅಥವಾ context ಹೊಂದಿಸಿದರೆ, ಬ್ರೌಸರ್ ಓವರ್‌ರೈಡ್‌ಗಳು ಅಡಿಯಲ್ಲಿ ಪ್ರತಿಯೊಂದನ್ನೂ ಆನ್ ಮಾಡಿ. ಹೊಸ ವಿಜೆಟ್‌ಗಳು ಯಾವುದನ್ನೂ ಸ್ವೀಕರಿಸುವುದಿಲ್ಲ, ಮತ್ತು ಆಫ್ ಆಗಿರುವ ಸೆಟ್ಟಿಂಗ್ ಹೊಂದಿರುವ ಸೆಷನ್ ವಿನಂತಿಯು 400 override_not_allowed ನೊಂದಿಗೆ ವಿಫಲವಾಗುತ್ತದೆ. ಬ್ರೌಸರ್ ಓವರ್‌ರೈಡ್‌ಗಳು ನೋಡಿ.

ತ್ವರಿತ ಆರಂಭ#

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

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 ಏಜೆಂಟ್‌ಗೆ ಸಂಪರ್ಕಿಸುವ ಗಾಜಿನಂತಹ ಕರೆ ಬಾರ್ ಅನ್ನು ನೋಡುತ್ತಾರೆ.

ಕಸ್ಟಮೈಸೇಶನ್#

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

<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>

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

ಇನ್ನೂ ಮೂರು ಪ್ರಾಪ್‌ಗಳು ರೂಪಕ್ಕಿಂತ ಸೆಷನ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡುತ್ತವೆ -- ಕರೆ ಪ್ರಾರಂಭವಾದಾಗ ಎಲ್ಲವನ್ನೂ ಸೆಷನ್ ವಿನಂತಿಗೆ ಫಾರ್ವರ್ಡ್ ಮಾಡಲಾಗುತ್ತದೆ. ವಿಜೆಟ್‌ನ ಪ್ರಕಟಿಸಬಹುದಾದ ಕೀ ಬ್ರೌಸರ್ ಓವರ್‌ರೈಡ್‌ಗಳು ಅಡಿಯಲ್ಲಿ ಅನುಮತಿಸಿದಾಗ ಮಾತ್ರ ಪ್ರತಿಯೊಂದು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ; ಇಲ್ಲದಿದ್ದರೆ ಸೆಷನ್ ವಿನಂತಿಯು 400 override_not_allowed ನೊಂದಿಗೆ ವಿಫಲವಾಗುತ್ತದೆ:

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

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

ಪ್ರತಿಯೊಂದು ವಿಜೆಟ್ ಸಂಭಾಷಣೆಯೂ ಒಂದು ಕರೆಯಾಗಿದೆ. ಇದು ನಿಮ್ಮ ಸಂಸ್ಥೆಯ ಏಕಕಾಲಿಕ-ಕರೆ ಮಿತಿಗೆ ಸೇರುತ್ತದೆ (ಡೀಫಾಲ್ಟ್ ಆಗಿ ಪ್ರಗತಿಯಲ್ಲಿರುವ 20 ಕರೆಗಳು, ಫೋನ್ ಮತ್ತು ಇತರ ಕರೆಗಳೊಂದಿಗೆ ಹಂಚಿಕೊಳ್ಳಲಾಗುತ್ತದೆ) ಹಾಗೂ 25 ಸಕ್ರಿಯ ಸೆಷನ್‌ಗಳ ವಿಜೆಟ್ ಮಿತಿಗೂ ಸೇರುತ್ತದೆ (ಅಥವಾ ಅದಕ್ಕಿಂತ ಹೆಚ್ಚಿದ್ದರೆ ನಿಮ್ಮ ಏಕಕಾಲಿಕ-ಕರೆ ಮಿತಿ). ಯಾವುದೇ ಮಿತಿಯನ್ನು ತಲುಪಿದಾಗ, ಒಂದು ಕರೆ ಮುಗಿಯುವವರೆಗೆ ಹೊಸ ಸಂಭಾಷಣೆಯನ್ನು ಪ್ರಾರಂಭಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ.

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

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

ರೂಪವಿನ್ಯಾಸ#

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