వెబ్ విడ్జెట్‌ను ఎంబెడ్ చేయండి

వెబ్ విడ్జెట్ బ్రౌజర్ మైక్రోఫోన్‌ను ఉపయోగించి, మీ సైట్ సందర్శకులకు AI ఏజెంట్‌తో క్లిక్-టు-టాక్ సంభాషణను అందిస్తుంది. ఇది ప్రత్యేకమైన JavaScript / React SDK మరియు దాని స్వంత 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 ద్వారా ఫిల్టర్ చేయండి.

తదుపరి దశలు