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

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

వెబ్ విడ్జెట్ బ్రౌజర్ మైక్రోఫోన్‌ను ఉపయోగించి మీ సైట్ సందర్శకులకు AI ఏజెంట్‌తో క్లిక్ చేసి మాట్లాడే సంభాషణను అందిస్తుంది. ఇది దాని స్వంత SDK రిఫరెన్స్ కలిగిన ప్రత్యేక JavaScript / React SDK — ఈ గైడ్ విడ్జెట్‌కు అవసరమైన ThunderPhone-వైపు సెటప్‌పై దృష్టి పెడుతుంది.

ముందస్తు అవసరాలు#

1. ఏజెంట్‌ను సృష్టించండి

   విడ్జెట్ సెషన్‌ను నడిపే prompt మరియు వాయిస్ ఉన్న ఏజెంట్‌ను సృష్టించండి. widget_enabled: trueను సెట్ చేయండి (డిఫాల్ట్).

2. రూటింగ్ మోడ్‌ను నిర్ణయించండి
   • mode="agent" — ప్రతి కీకి ఒక స్థిర ఏజెంట్. అత్యంత సులభం.
   • mode="webhook" — మీ సర్వర్ ప్రతి సందర్శకుడికి ఏజెంట్‌ను ఒక web.incoming webhook ద్వారా ఎంచుకుంటుంది. లాగిన్ అయిన వినియోగదారులు, 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 టోకెన్‌లు) మరియు 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 */ ]
}

మీ స్వంత సెషన్ నుండి సందర్భాన్ని (ఏ కస్టమర్ బ్రౌజ్ చేస్తున్నారు, వారు ఏ పేజీలో ఉన్నారు) ప్రాంప్ట్‌లో కలపవచ్చు మరియు ప్రతి రోల్‌అవుట్‌కు ఏజెంట్‌లను మార్చవచ్చు.

సెషన్‌లను పరిశీలించండి#

విజెట్ సెషన్‌లు GET /v1/callsలో direction="widget"తో కనిపిస్తాయి — ఫోన్ కాల్‌ల మాదిరిగానే ట్రాన్స్‌క్రిప్ట్, రికార్డింగ్, గ్రేడింగ్, మరియు బిల్లింగ్ ఉంటాయి. విజెట్‌కు మాత్రమే సంబంధించిన డ్యాష్‌బోర్డ్‌ను రూపొందించడానికి direction ద్వారా ఫిల్టర్ చేయండి.

తదుపరి దశలు#