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

ఒకే స్క్రిప్ట్ ట్యాగ్‌తో మీ మార్కెటింగ్ లేదా సపోర్ట్ సైట్‌లో వాయిస్ ఏజెంట్‌ను జోడించండి — సందర్శకులు ఫోన్ నంబర్ అవసరం లేకుండా బ్రౌజర్ నుంచే దానితో మాట్లాడగలరు.

వెబ్ విడ్జెట్ బ్రౌజర్ మైక్రోఫోన్‌ను ఉపయోగించి మీ సైట్ సందర్శకులకు 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 ద్వారా ఫిల్టర్ చేయండి.

తదుపరి దశలు#