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

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

<Note>
  మీరు cURL లేకుండానే ఇవన్నీ చేయవచ్చు: **వెబ్ విడ్జెట్‌లు** డ్యాష్‌బోర్డ్
  పేజీ (`/dashboard/web-widgets`) విడ్జెట్‌ను సృష్టించి, దాని మోడ్
  మరియు ఏజెంట్‌ను సెట్ చేసి, అనుమతించబడిన డొమైన్‌లను నిర్వహించి, ఎంబెడ్ స్నిపెట్‌ను అందిస్తుంది.
</Note>

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

<Steps>
  <Step title="ఏజెంట్‌ను సృష్టించండి">
    ప్రాంప్ట్ మరియు వాయిస్ విడ్జెట్ సెషన్‌ను నడిపే ఏజెంట్. `widget_enabled: true`ను
    సెట్ చేయండి (డిఫాల్ట్).
  </Step>
  <Step title="రూటింగ్ మోడ్‌ను నిర్ణయించండి">
    - `mode="agent"` — ప్రతి కీకి ఒక స్థిర ఏజెంట్. అత్యంత సులభం.
    - `mode="webhook"` — మీ సర్వర్ ప్రతి సందర్శకుడికి ఏజెంట్‌ను
      [`web.incoming` వెబ్‌హుక్](/te/webhooks/call-incoming) ద్వారా ఎంచుకుంటుంది. లాగిన్ అయిన
      వినియోగదారులు, A/B పరీక్షలు లేదా ప్రతి పేజీకి రూటింగ్ కోసం దీన్ని ఉపయోగించండి.
  </Step>
  <Step title="అనుమతించబడిన డొమైన్‌లను జాబితా చేయండి">
    పబ్లిషబుల్ కీలు ఒరిజిన్-లాక్ చేయబడ్డాయి. విడ్జెట్‌ను ఎంబెడ్ చేసే ప్రతి హోస్ట్‌నేమ్‌ను
    మీరు పేర్కొనాలి. స్థానిక డెవలప్‌మెంట్ సమయంలో `localhost` / `127.0.0.1` ఎల్లప్పుడూ
    అనుమతించబడతాయి.
  </Step>
</Steps>

## పబ్లిషబుల్ కీని సృష్టించండి

<CodeGroup>
```bash Static agent
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"]
  }'
```

```bash Dynamic via webhook
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"]
  }'
```
</CodeGroup>

ప్రతిస్పందనలో `pk_live_...`తో ప్రారంభమయ్యే `key` ఉంటుంది. **పబ్లిషబుల్
కీలు రూపకల్పన ప్రకారమే పబ్లిక్‌గా ఉంటాయి** — మీ ఫ్రంట్-ఎండ్ బండిల్‌లో
సురక్షితంగా చేర్చవచ్చు. అన్ని ఫీల్డ్‌ల కోసం
[పబ్లిషబుల్ కీలు రిఫరెన్స్](/api-reference/publishable-keys) చూడండి.

<Warning>
  `allowed_domains`లో కనీసం ఒక ఎంట్రీ ఉండాలి. `*.example.com`
  సబ్‌డొమైన్‌లకు (ఉదా. `api.example.com`) సరిపోతుంది, కానీ బేర్
  డొమైన్‌కు **కాదు**. `*` లేదా `*.*` వంటి బేర్ వైల్డ్‌కార్డ్‌లు తిరస్కరించబడతాయి.
</Warning>

## మీ సైట్‌లో విడ్జెట్‌ను జోడించండి

ఈ మూడు ఇంటిగ్రేషన్ ఎంపికలు
[విడ్జెట్ SDK డాక్యుమెంటేషన్](/te/widget/overview)లో ఉన్నాయి:

<CardGroup cols={3}>
  <Card title="React కాంపోనెంట్" icon="react" href="/te/widget/react">
    `<ThunderPhoneWidget publishableKey="pk_live_..." />`.
  </Card>
  <Card title="హెడ్‌లెస్ హుక్" icon="circle-nodes" href="/te/widget/headless-hook">
    అనుకూల UIల కోసం `useThunderPhone()`.
  </Card>
  <Card title="CDN స్క్రిప్ట్ ట్యాగ్" icon="code" href="/te/widget/cdn-script-tag">
    బండ్లర్ లేని సైట్‌ల కోసం `ThunderPhone.mount({...})`.
  </Card>
</CardGroup>

మూడు ఎంపికలూ ఒకే `publishableKey`ను స్వీకరించి, మైక్ బటన్‌తో పాటు
కాల్‌లోని ఆడియో ఎలిమెంట్‌ను రెండర్ చేస్తాయి.

విడ్జెట్ `context` 12,000 అక్షరాలకు కుదించబడుతుంది (సాధారణ ఆంగ్ల పాఠ్యంలో
సుమారు 3,400 టోకెన్‌లు) మరియు
[ప్రాంప్ట్ పరిమాణ సర్‌చార్జ్](/te/guides/billing-and-topups)లో లెక్కించబడుతుంది.

## విడ్జెట్-మోడ్ వెబ్‌హుక్‌లు

`mode="webhook"` ఉన్నప్పుడు, ప్రతి సెషన్ ప్రారంభంలో ThunderPhone మీ `webhook_url`ను
`web.incoming` పేలోడ్‌తో కాల్ చేస్తుంది. ఆ సందర్శకుడి కోసం మీరు అమలు చేయాలనుకునే
ఏజెంట్ కాన్ఫిగరేషన్‌ను తిరిగి ఇవ్వండి — ఇది ఫోన్ కాల్‌ల మాదిరిగానే అదే
[ప్రతిస్పందన స్కీమా](/te/webhooks/call-incoming)ను అనుసరిస్తుంది:

```json
{
  "prompt":  "You are a VIP concierge for Jane Doe.",
  "voice":   "john",
  "product": "storm-base",
  "tools":   [ /* per-customer tools */ ]
}
```

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

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

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

---

## తదుపరి దశలు

<CardGroup cols={2}>
  <Card title="విజెట్ SDK రిఫరెన్స్" icon="window-maximize" href="/te/widget/overview">
    React / హుక్ / CDN ఇంటిగ్రేషన్ వివరాలు.
  </Card>
  <Card title="డైనమిక్ ప్రతి-కాల్ కాన్ఫిగ్" icon="bolt" href="/te/guides/dynamic-call-config">
    `mode="webhook"` ప్రవాహాన్ని ప్రారంభం నుండి ముగింపు వరకు అమలు చేయండి.
  </Card>
  <Card title="ప్రచురించదగిన కీ రిఫరెన్స్" icon="key" href="/api-reference/publishable-keys">
    కీ రిసోర్స్‌లోని ప్రతి ఫీల్డ్.
  </Card>
  <Card title="మైక్ సెషన్‌ల API" icon="microphone" href="/api-reference/mic-sessions">
    విజెట్‌ను దాటవేసి; అనుకూల UIల కోసం LiveKitను నేరుగా నియంత్రించండి.
  </Card>
</CardGroup>