---
title: "വെബ് വിജറ്റ് എംബെഡ് ചെയ്യുക"
description: "ഒറ്റ സ്ക്രിപ്റ്റ് ടാഗ് ഉപയോഗിച്ച് നിങ്ങളുടെ മാർക്കറ്റിംഗ് അല്ലെങ്കിൽ പിന്തുണാ സൈറ്റിൽ ഒരു വോയ്‌സ് ഏജന്റിനെ ചേർക്കുക — സന്ദർശകർക്ക് ഫോൺ നമ്പർ ആവശ്യമില്ലാതെ ബ്രൗസറിൽ നിന്ന് നേരിട്ട് അതുമായി സംസാരിക്കാം."
---

വെബ് വിജറ്റ് നിങ്ങളുടെ സൈറ്റ് സന്ദർശകർക്ക് ബ്രൗസറിന്റെ മൈക്രോഫോൺ ഉപയോഗിച്ച് ഒരു AI ഏജന്റുമായി ക്ലിക്ക്-ടു-ടോക്ക് സംഭാഷണം നൽകുന്നു. ഇതിന് സ്വന്തം [SDK റഫറൻസ്](/ml/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` വെബ്ഹുക്ക്](/ml/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 ഡോക്യുമെന്റേഷനിൽ](/ml/widget/overview) ഉൾപ്പെടുത്തിയിട്ടുണ്ട്:

<CardGroup cols={3}>
  <Card title="React കോംപോണന്റ്" icon="react" href="/ml/widget/react">
    `<ThunderPhoneWidget publishableKey="pk_live_..." />`.
  </Card>
  <Card title="ഹെഡ്‌ലെസ് ഹുക്ക്" icon="circle-nodes" href="/ml/widget/headless-hook">
    ഇഷ്ടാനുസൃത UI-കൾക്കായി `useThunderPhone()`.
  </Card>
  <Card title="CDN സ്ക്രിപ്റ്റ് ടാഗ്" icon="code" href="/ml/widget/cdn-script-tag">
    ബണ്ട്ലർ ഇല്ലാത്ത സൈറ്റുകൾക്കായി `ThunderPhone.mount({...})`.
  </Card>
</CardGroup>

മൂന്നും ഒരേ `publishableKey` സ്വീകരിക്കുകയും മൈക്രോഫോൺ ബട്ടണും
കോളിനിടയിലെ ഓഡിയോ എലമെന്റും റെൻഡർ ചെയ്യുകയും ചെയ്യുന്നു.

വിജറ്റ് `context` 12,000 പ്രതീകങ്ങളിൽ വെട്ടിച്ചുരുക്കപ്പെടുന്നു (സാധാരണ ഇംഗ്ലീഷ് ടെക്സ്റ്റിന്റെ ഏകദേശം 3,400
ടോക്കണുകൾ), കൂടാതെ ഇത്
[പ്രോംപ്റ്റ്-വലുപ്പ സർചാർജിൽ](/ml/guides/billing-and-topups) ഉൾപ്പെടും.

## വിജറ്റ്-മോഡ് വെബ്ഹുക്കുകൾ

`mode="webhook"` ആയിരിക്കുമ്പോൾ, എല്ലാ സെഷൻ ആരംഭങ്ങളിലും ThunderPhone നിങ്ങളുടെ `webhook_url`-ലേക്ക്
ഒരു `web.incoming` പേലോഡോടെ വിളിക്കുന്നു. ആ സന്ദർശകനായി പ്രവർത്തിപ്പിക്കേണ്ട
ഏജന്റ് കോൺഫിഗറേഷൻ തിരികെ നൽകുക — ഇത് ഫോൺ കോളുകളുടെ അതേ
[പ്രതികരണ സ്കീമ](/ml/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="/ml/widget/overview">
    React / hook / CDN ഇന്റഗ്രേഷൻ വിശദാംശങ്ങൾ.
  </Card>
  <Card title="ഓരോ കോളിനുമുള്ള ഡൈനാമിക് കോൺഫിഗറേഷൻ" icon="bolt" href="/ml/guides/dynamic-call-config">
    `mode="webhook"` ഫ്ലോ തുടക്കം മുതൽ അവസാനം വരെ നടപ്പിലാക്കുക.
  </Card>
  <Card title="പ്രസിദ്ധീകരിക്കാവുന്ന കീകളുടെ റഫറൻസ്" icon="key" href="/api-reference/publishable-keys">
    കീ റിസോഴ്സിലെ എല്ലാ ഫീൽഡുകളും.
  </Card>
  <Card title="Mic സെഷനുകൾ API" icon="microphone" href="/api-reference/mic-sessions">
    വിഡ്ജറ്റ് ഒഴിവാക്കുക; ഇഷ്ടാനുസൃത UI-കൾക്കായി LiveKit നേരിട്ട് ഉപയോഗിക്കുക.
  </Card>
</CardGroup>