---
title: "வலை விட்ஜெட்டை உட்பொதிக்கவும்"
description: "ஒரே script tag மூலம் உங்கள் மார்க்கெட்டிங் அல்லது ஆதரவு தளத்தில் ஒரு குரல் ஏஜென்ட்டைச் சேர்க்கவும் — பார்வையாளர்கள் தொலைபேசி எண் தேவையின்றி உலாவியிலிருந்தே அதனுடன் நேரடியாகப் பேசலாம்."
---

வெப் விட்ஜெட், உலாவியின் மைக்ரோஃபோனைப் பயன்படுத்தி, உங்கள் தளப் பார்வையாளர்களுக்கு AI ஏஜென்டுடன் கிளிக் செய்து பேசும் உரையாடலை வழங்குகிறது. இது தனித்த [SDK குறிப்பு](/ta/widget/overview) கொண்ட தனி JavaScript / React SDK ஆகும் — இந்த வழிகாட்டி, விட்ஜெட்டுக்குத் தேவையான ThunderPhone-பக்க அமைப்பில் கவனம் செலுத்துகிறது.

<Note>
  cURL இல்லாமலேயே இதை எல்லாம் செய்யலாம்: **வெப் விட்ஜெட்டுகள்** டாஷ்போர்டு
  பக்கம் (`/dashboard/web-widgets`) விட்ஜெட்டை உருவாக்கி, அதன் பயன்முறை
  மற்றும் ஏஜென்டை அமைத்து, அனுமதிக்கப்பட்ட டொமைன்களை நிர்வகித்து, உட்பொதிக்கும் துணுக்கை வழங்குகிறது.
</Note>

## முன்தேவைகள்

<Steps>
  <Step title="ஒரு ஏஜென்டை உருவாக்குங்கள்">
    prompt மற்றும் குரல் விட்ஜெட் அமர்வை இயக்கும் ஏஜென்ட். `widget_enabled: true`
    (இயல்புநிலை) என அமைக்கவும்.
  </Step>
  <Step title="ரூட்டிங் பயன்முறையைத் தீர்மானியுங்கள்">
    - `mode="agent"` — ஒவ்வொரு விசைக்கும் ஒரு நிலையான ஏஜென்ட். மிகவும் எளிமையானது.
    - `mode="webhook"` — ஒவ்வொரு பார்வையாளருக்கும் உங்கள் சர்வர் ஏஜென்டைத் தேர்ந்தெடுக்கும்;
      இதற்கு [`web.incoming` வெப்ஹூக்](/ta/webhooks/call-incoming) பயன்படுத்தப்படும். உள்நுழைந்த பயனர்கள்,
      A/B சோதனைகள் அல்லது ஒவ்வொரு பக்கத்திற்குமான ரூட்டிங்கிற்கு இதைப் பயன்படுத்துங்கள்.
  </Step>
  <Step title="அனுமதிக்கப்பட்ட டொமைன்களைப் பட்டியலிடுங்கள்">
    வெளியிடக்கூடிய விசைகள் origin-க்கு பூட்டப்பட்டவை. விட்ஜெட்டை உட்பொதிக்கும் ஒவ்வொரு ஹோஸ்ட்பெயரையும்
    நீங்கள் குறிப்பிட வேண்டும். உள்ளூர் மேம்பாட்டின்போது `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 ஆவணங்களில்](/ta/widget/overview) உள்ளன:

<CardGroup cols={3}>
  <Card title="React கூறு" icon="react" href="/ta/widget/react">
    `<ThunderPhoneWidget publishableKey="pk_live_..." />`.
  </Card>
  <Card title="ஹெட்லெஸ் ஹுக்" icon="circle-nodes" href="/ta/widget/headless-hook">
    தனிப்பயன் UI-களுக்கு `useThunderPhone()`.
  </Card>
  <Card title="CDN ஸ்கிரிப்ட் குறிச்சொல்" icon="code" href="/ta/widget/cdn-script-tag">
    பண்டிலர் இல்லாத தளங்களுக்கு `ThunderPhone.mount({...})`.
  </Card>
</CardGroup>

மூன்றும் ஒரே `publishableKey`-ஐ ஏற்று, மைக் பொத்தானையும் அழைப்பின்போதைய ஆடியோ கூறையும் ரெண்டர் செய்கின்றன.

விட்ஜெட் `context` 12,000 எழுத்துகளாக (வழக்கமான ஆங்கில உரையின் தோராயமாக 3,400
டோக்கன்கள்) துண்டிக்கப்படும்; மேலும் இது
[prompt-அளவு கூடுதல் கட்டணத்தில்](/ta/guides/billing-and-topups) கணக்கிடப்படும்.

## விட்ஜெட்-பயன்முறை வெப்ஹூக்குகள்

`mode="webhook"` ஆக இருக்கும்போது, ஒவ்வொரு அமர்வு தொடக்கத்திலும் ThunderPhone உங்கள்
`webhook_url`-ஐ `web.incoming` பேலோடுடன் அழைக்கும். அந்தப் பார்வையாளருக்காக இயக்க விரும்பும்
ஏஜென்ட் உள்ளமைவைத் திருப்பியனுப்புங்கள் — இது தொலைபேசி அழைப்புகளைப் போலவே அதே
[பதில் ஸ்கீமாவைப்](/ta/webhooks/call-incoming) பின்பற்றுகிறது:

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

உங்கள் சொந்த அமர்விலிருந்து சூழலை (எந்த வாடிக்கையாளர் உலாவுகிறார், அவர்கள் எந்தப் பக்கத்தில் உள்ளனர்)
prompt-இல் சேர்க்கலாம்; மேலும் ஒவ்வொரு வெளியீட்டு கட்டத்திற்கும் ஏஜென்ட்களை மாற்றலாம்.

## அமர்வுகளைக் கண்காணிக்கவும்

விட்ஜெட் அமர்வுகள்
[`GET /v1/calls`](/api-reference/calls#list-calls) இல்
`direction="widget"` உடன் தோன்றும் — தொலைபேசி அழைப்புகளைப் போலவே உரையாடல் பதிவு, பதிவு செய்தல், மதிப்பீடு மற்றும் கட்டண விவரங்களுடன். விட்ஜெட்டுக்கான டாஷ்போர்டை உருவாக்க `direction` மூலம் வடிகட்டவும்.

---

## அடுத்த படிகள்

<CardGroup cols={2}>
  <Card title="விட்ஜெட் SDK குறிப்பு" icon="window-maximize" href="/ta/widget/overview">
    React / hook / CDN ஒருங்கிணைப்பு விவரங்கள்.
  </Card>
  <Card title="ஒவ்வொரு அழைப்பிற்குமான டைனமிக் கட்டமைப்பு" icon="bolt" href="/ta/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>