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

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

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

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

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

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

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

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

4. ಬ್ರೌಸರ್ ಅತಿಕ್ರಮಣಗಳನ್ನು ಆಯ್ಕೆಮಾಡಿ

   ನಿಮ್ಮ ಪುಟವು ಕಳುಹಿಸಬಹುದಾದ ಸೆಷನ್ ಸೆಟ್ಟಿಂಗ್ಗಳನ್ನು ನಿರ್ಧರಿಸಿ. ಹೊಸ ಕೀಗಳು ಯಾವುದನ್ನೂ ಸ್ವೀಕರಿಸುವುದಿಲ್ಲ; ಬ್ರೌಸರ್ ಅತಿಕ್ರಮಣಗಳು ನೋಡಿ.

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

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"],
    "allowed_overrides": ["context"]
  }'

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 ಸ್ವೀಕರಿಸುತ್ತವೆ ಮತ್ತು ಮೈಕ್ ಬಟನ್ ಜೊತೆಗೆ ಕರೆಯಲ್ಲಿರುವ ಆಡಿಯೊ ಎಲಿಮೆಂಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತವೆ.

ಬ್ರೌಸರ್ ಓವರ್‌ರೈಡ್‌ಗಳು#

ವಿಜೆಟ್ ಪುಟದಿಂದ ಪ್ರತಿ ಸೆಷನ್‌ಗೆ ನಾಲ್ಕು ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಕಳುಹಿಸಬಹುದು:

ನಿಮ್ಮ ಪ್ರಕಟಿಸಬಹುದಾದ ಕೀ ಸಾರ್ವಜನಿಕವಾಗಿದೆ, ಆದ್ದರಿಂದ ಅದನ್ನು ಹೊಂದಿರುವ ಯಾರಾದರೂ ನಿಮ್ಮ ಡೊಮೇನ್‌ನಂತೆ ನಟಿಸುವ ಸ್ಕ್ರಿಪ್ಟ್‌ನಿಂದಲೂ ಈ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಕಳುಹಿಸಬಹುದು. ಆದ್ದರಿಂದ, ನೀವು ಕೀಯಲ್ಲಿ ಅನುಮತಿಸುವವರೆಗೆ ಪ್ರತಿಯೊಂದೂ ನಿಷ್ಕ್ರಿಯವಾಗಿರುತ್ತದೆ: ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ನಲ್ಲಿ ವಿಜೆಟ್ ರಚಿಸುವಾಗ ಅಥವಾ ಸಂಪಾದಿಸುವಾಗ ಬ್ರೌಸರ್ ಓವರ್‌ರೈಡ್‌ಗಳು ಅಡಿಯಲ್ಲಿ ಅದನ್ನು ಆಯ್ಕೆಮಾಡಿ, ಅಥವಾ ಪ್ರಕಟಿಸಬಹುದಾದ ಕೀಗಳ API ಮೂಲಕ allowed_overrides ಹೊಂದಿಸಿ. ನಿಮ್ಮ ಪುಟವು ನಿಜವಾಗಿ ಕಳುಹಿಸುವವುಗಳನ್ನು ಮಾತ್ರ ಅನುಮತಿಸಿ.

ಕೀ ಅನುಮತಿಸದ ಸೆಟ್ಟಿಂಗ್ ಹೊಂದಿರುವ ಸೆಷನ್ ವಿನಂತಿಯು 400 ನೊಂದಿಗೆ ವಿಫಲವಾಗುತ್ತದೆ ಮತ್ತು ಅದರ ಹೆಸರನ್ನು ತೋರಿಸುತ್ತದೆ:

{
  "error": "override_not_allowed",
  "fields": ["voice"],
  "message": "This publishable key does not allow the browser to set `voice`. ..."
}

ಈ ಪರಿಶೀಲನೆಯು ಎರಡೂ ಮೋಡ್‌ಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತದೆ. ವೆಬ್‌ಹುಕ್ ಮೋಡ್‌ನಲ್ಲಿ ಅನುಮತಿಸಲಾದ ಸೆಟ್ಟಿಂಗ್ ಅನ್ನು ನಿಮ್ಮ web.incoming ವೆಬ್‌ಹುಕ್‌ಗೆ ಸಹ ಫಾರ್ವರ್ಡ್ ಮಾಡಲಾಗುತ್ತದೆ (context ಎನ್ನುವುದು website_context ಆಗಿ ಬರುತ್ತದೆ). ಈ ಸೆಟ್ಟಿಂಗ್ ಇರುವುದಕ್ಕೂ ಮುಂಚೆ ರಚಿಸಲಾದ ಕೀಲಿಗಳು ಎಲ್ಲಾ ನಾಲ್ಕನ್ನೂ ಅನುಮತಿಸುತ್ತವೆ, ಆದ್ದರಿಂದ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಎಂಬೆಡ್‌ಗಳು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಲೇ ಇರುತ್ತವೆ; ನೀವು ಬಳಸದವುಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ.

ವಿಜೆಟ್ 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 */ ]
}

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

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

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

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