ವೆಬ್ ವಿಜೆಟ್ ಅನ್ನು ಎಂಬೆಡ್ ಮಾಡಿ

ವೆಬ್ ವಿಜೆಟ್ ನಿಮ್ಮ ಸೈಟ್ ಸಂದರ್ಶಕರಿಗೆ ಬ್ರೌಸರ್‌ನ ಮೈಕ್ರೋಫೋನ್ ಬಳಸಿ AI ಏಜೆಂಟ್‌ನೊಂದಿಗೆ ಕ್ಲಿಕ್-ಟು-ಟಾಕ್ ಸಂಭಾಷಣೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ತನ್ನದೇ ಆದ SDK ಉಲ್ಲೇಖ ಹೊಂದಿರುವ ಪ್ರತ್ಯೇಕ JavaScript / React SDK ಆಗಿದೆ — ಈ ಮಾರ್ಗದರ್ಶಿ ವಿಜೆಟ್‌ಗೆ ಅಗತ್ಯವಿರುವ ThunderPhone-ಪಕ್ಷದ ಸೆಟಪ್ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ.

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

1. ಏಜೆಂಟ್ ರಚಿಸಿ

   ವಿಜೆಟ್ ಸೆಷನ್‌ನಲ್ಲಿ ಪ್ರಾಂಪ್ಟ್ ಮತ್ತು ಧ್ವನಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಏಜೆಂಟ್. widget_enabled: true (ಡೀಫಾಲ್ಟ್) ಹೊಂದಿಸಿ.

2. ರೂಟಿಂಗ್ ಮೋಡ್ ನಿರ್ಧರಿಸಿ
   • mode="agent" — ಪ್ರತಿ ಕೀಗೆ ಒಂದು ಸ್ಥಿರ ಏಜೆಂಟ್. ಅತ್ಯಂತ ಸರಳ.
   • mode="webhook" — ನಿಮ್ಮ ಸರ್ವರ್ ಪ್ರತಿ ಸಂದರ್ಶಕರಿಗೆ web.incoming ವೆಬ್‌ಹುಕ್ ಮೂಲಕ ಏಜೆಂಟ್ ಆಯ್ಕೆಮಾಡುತ್ತದೆ. ಸೈನ್-ಇನ್ ಆಗಿರುವ ಬಳಕೆದಾರರು, A/B ಪರೀಕ್ಷೆಗಳು ಅಥವಾ ಪ್ರತಿ-ಪುಟ ರೂಟಿಂಗ್‌ಗೆ ಇದನ್ನು ಬಳಸಿ.
3. ಅನುಮತಿಸಲಾದ ಡೊಮೇನ್‌ಗಳನ್ನು ಪಟ್ಟಿ ಮಾಡಿ

   ಪ್ರಕಟಿಸಬಹುದಾದ ಕೀಲಿಗಳು ಮೂಲಕ್ಕೆ ಲಾಕ್ ಆಗಿರುತ್ತವೆ. ವಿಜೆಟ್ ಎಂಬೆಡ್ ಮಾಡುವ ಪ್ರತಿಯೊಂದು ಹೋಸ್ಟ್‌ನಾಮವನ್ನು ನೀವು ಸೂಚಿಸಬೇಕು. ಸ್ಥಳೀಯ ಅಭಿವೃದ್ಧಿಯ ಸಮಯದಲ್ಲಿ localhost / 127.0.0.1 ಗೆ ಯಾವಾಗಲೂ ಅನುಮತಿ ಇರುತ್ತದೆ.

ಪ್ರಕಟಿಸಬಹುದಾದ ಕೀ ರಚಿಸಿ

curl -X POST https://api.thunderphone.com/v1/publishable-key \
  -H "Authorization: Bearer sk_live_YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name":            "Marketing site (prod)",
    "mode":            "agent",
    "agent_id":        12,
    "allowed_domains": ["example.com", "*.example.com"]
  }'

curl -X POST https://api.thunderphone.com/v1/publishable-key \
  -H "Authorization: Bearer sk_live_YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name":            "Support (dynamic)",
    "mode":            "webhook",
    "webhook_url":     "https://example.com/thunderphone/widget-hook",
    "allowed_domains": ["support.example.com"]
  }'

ಪ್ರತಿಕ್ರಿಯೆಯು pk_live_... ನಿಂದ ಆರಂಭವಾಗುವ key ಯನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. ಪ್ರಕಟಿಸಬಹುದಾದ ಕೀಲಿಗಳು ವಿನ್ಯಾಸದ ಪ್ರಕಾರ ಸಾರ್ವಜನಿಕವಾಗಿವೆ — ನಿಮ್ಮ ಫ್ರಂಟ್‌ಎಂಡ್ ಬಂಡಲ್‌ನಲ್ಲಿ ಸೇರಿಸಲು ಸುರಕ್ಷಿತವಾಗಿವೆ. ಎಲ್ಲ ಫೀಲ್ಡ್‌ಗಳಿಗಾಗಿ ಪ್ರಕಟಿಸಬಹುದಾದ ಕೀಲಿಗಳ ಉಲ್ಲೇಖ ನೋಡಿ.

ನಿಮ್ಮ ಸೈಟ್‌ಗೆ ವಿಜೆಟ್ ಸೇರಿಸಿ

ಮೂರು ಏಕೀಕರಣ ಆಯ್ಕೆಗಳನ್ನು ವಿಜೆಟ್ SDK ದಸ್ತಾವೇಜುಗಳು ಒಳಗೊಂಡಿವೆ:

ಮೂರೂ ಒಂದೇ publishableKey ಸ್ವೀಕರಿಸುತ್ತವೆ ಮತ್ತು ಮೈಕ್ ಬಟನ್ ಹಾಗೂ ಕರೆಯಲ್ಲಿನ ಆಡಿಯೊ ಅಂಶವನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತವೆ.

ವಿಜೆಟ್ context ಅನ್ನು 12,000 ಅಕ್ಷರಗಳಿಗೆ (ಸಾಮಾನ್ಯ ಇಂಗ್ಲಿಷ್ ಪಠ್ಯದ ಸರಿಸುಮಾರು 3,400 ಟೋಕನ್‌ಗಳು) ಮೊಟಕುಗೊಳಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಅದು ಪ್ರಾಂಪ್ಟ್-ಗಾತ್ರದ ಹೆಚ್ಚುವರಿ ಶುಲ್ಕದಲ್ಲಿ ಎಣಿಕೆಯಾಗುತ್ತದೆ.

ವಿಜೆಟ್-ಮೋಡ್ ವೆಬ್‌ಹುಕ್‌ಗಳು

mode="webhook" ಆಗಿರುವಾಗ, ThunderPhone ಪ್ರತಿ ಸೆಷನ್ ಆರಂಭದಲ್ಲಿ ನಿಮ್ಮ webhook_url ಗೆ web.incoming ಪೇಲೋಡ್‌ನೊಂದಿಗೆ ಕರೆ ಮಾಡುತ್ತದೆ. ಆ ಸಂದರ್ಶಕರಿಗಾಗಿ ನೀವು ಚಾಲನೆಗೊಳಿಸಲು ಬಯಸುವ ಏಜೆಂಟ್ ಕಾನ್ಫಿಗರೇಶನ್ ಹಿಂತಿರುಗಿಸಿ — ಇದು ಫೋನ್ ಕರೆಗಳಂತೆಯೇ ಅದೇ ಪ್ರತಿಕ್ರಿಯೆ ಸ್ಕೀಮಾ ಅನುಸರಿಸುತ್ತದೆ:

{
  "prompt":  "You are a VIP concierge for Jane Doe.",
  "voice":   "john",
  "product": "storm-base",
  "tools":   [ /* per-customer tools */ ]
}

ನಿಮ್ಮ ಸ್ವಂತ ಸೆಷನ್‌ನ ಸಂದರ್ಭವನ್ನು (ಯಾವ ಗ್ರಾಹಕರು ಬ್ರೌಸ್ ಮಾಡುತ್ತಿದ್ದಾರೆ, ಅವರು ಯಾವ ಪುಟದಲ್ಲಿದ್ದಾರೆ) ಪ್ರಾಂಪ್ಟ್‌ಗೆ ಸೇರಿಸಬಹುದು ಮತ್ತು ಪ್ರತಿ ರೋಲ್ಔಟ್‌ಗೆ ಏಜೆಂಟ್‌ಗಳನ್ನು ಬದಲಾಯಿಸಬಹುದು.

ಸೆಷನ್‌ಗಳನ್ನು ಗಮನಿಸಿ

ವಿಜೆಟ್ ಸೆಷನ್‌ಗಳು GET /v1/calls ನಲ್ಲಿ direction="widget" ನೊಂದಿಗೆ ಕಾಣಿಸುತ್ತವೆ — ಫೋನ್ ಕರೆಗಳಂತೆಯೇ ಅದೇ ಟ್ರಾನ್ಸ್‌ಕ್ರಿಪ್ಟ್, ರೆಕಾರ್ಡಿಂಗ್, ಗ್ರೇಡಿಂಗ್ ಮತ್ತು ಬಿಲ್ಲಿಂಗ್ ಇರುತ್ತದೆ. ವಿಜೆಟ್-ಮಾತ್ರದ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ನಿರ್ಮಿಸಲು direction ಮೂಲಕ ಫಿಲ್ಟರ್ ಮಾಡಿ.

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