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

ಒಂದೇ ಸ್ಕ್ರಿಪ್ಟ್ ಟ್ಯಾಗ್‌ನೊಂದಿಗೆ ನಿಮ್ಮ ಮಾರ್ಕೆಟಿಂಗ್ ಅಥವಾ ಬೆಂಬಲ ಸೈಟ್‌ಗೆ ಧ್ವನಿ ಏಜೆಂಟ್ ಅನ್ನು ಸೇರಿಸಿ — ಭೇಟಿ ನೀಡುವವರು ಫೋನ್ ಸಂಖ್ಯೆಯ ಅಗತ್ಯವಿಲ್ಲದೆ ಬ್ರೌಸರ್‌ನಿಂದಲೇ ಅದರೊಂದಿಗೆ ಮಾತನಾಡಬಹುದು.

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

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

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

   ವಿಜೆಟ್ ಸೆಷನ್ ಅನ್ನು ನಡೆಸುವ prompt ಮತ್ತು ಧ್ವನಿಯ ಏಜೆಂಟ್. 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 ಟೋಕನ್‌ಗಳು) ಮತ್ತು ಅದು prompt-ಗಾತ್ರದ ಹೆಚ್ಚುವರಿ ಶುಲ್ಕ ಕಡೆಗೆ ಎಣಿಕೆಯಾಗುತ್ತದೆ.

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

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 */ ]
}

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

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

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

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