---
title: "વેબ વિજેટ એમ્બેડ કરો"
description: "એક જ સ્ક્રિપ્ટ ટૅગ સાથે તમારા માર્કેટિંગ અથવા સપોર્ટ સાઇટ પર વૉઇસ એજન્ટ ઉમેરો — મુલાકાતીઓ ફોન નંબરની જરૂર વગર બ્રાઉઝરમાંથી સીધા તેની સાથે વાત કરે છે."
---

વેબ વિજેટ તમારા સાઇટ મુલાકાતીઓને બ્રાઉઝરના માઇક્રોફોનનો ઉપયોગ કરીને AI એજન્ટ સાથે ક્લિક-ટુ-ટોક સંવાદ આપે છે. તે પોતાનું [SDK રેફરન્સ](/gu/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` webhook](/gu/webhooks/call-incoming) દ્વારા એજન્ટ પસંદ કરે છે.
      લૉગ-ઇન વપરાશકર્તાઓ, A/B પરીક્ષણો અથવા પ્રતિ-પેજ રાઉટિંગ માટે આનો ઉપયોગ કરો.
  </Step>
  <Step title="મંજૂર ડોમેન્સની યાદી બનાવો">
    પ્રકાશિત કરી શકાય તેવી કીઓ origin-લૉક હોય છે. વિજેટ એમ્બેડ કરનાર દરેક
    hostnameનું નામ આપવું આવશ્યક છે. સ્થાનિક ડેવલપમેન્ટ દરમિયાન `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 દસ્તાવેજોમાં](/gu/widget/overview) આવરી લેવામાં આવ્યા છે:

<CardGroup cols={3}>
  <Card title="React કમ્પોનન્ટ" icon="react" href="/gu/widget/react">
    `<ThunderPhoneWidget publishableKey="pk_live_..." />`.
  </Card>
  <Card title="હેડલેસ હૂક" icon="circle-nodes" href="/gu/widget/headless-hook">
    કસ્ટમ UI માટે `useThunderPhone()`.
  </Card>
  <Card title="CDN સ્ક્રિપ્ટ ટૅગ" icon="code" href="/gu/widget/cdn-script-tag">
    બંડલર વિનાની સાઇટ્સ માટે `ThunderPhone.mount({...})`.
  </Card>
</CardGroup>

ત્રણે એકસરખી `publishableKey` સ્વીકારે છે અને માઇક બટન તથા કૉલમાંનો ઑડિયો
એલિમેન્ટ રેન્ડર કરે છે.

વિજેટ `context` 12,000 અક્ષરો સુધી કાપવામાં આવે છે (સામાન્ય અંગ્રેજી ટેક્સ્ટના
લગભગ 3,400 ટોકન્સ) અને તે
[prompt-કદ સરચાર્જ](/gu/guides/billing-and-topups)માં ગણાય છે.

## વિજેટ-મોડ webhooks

જ્યારે `mode="webhook"` હોય, ત્યારે ThunderPhone દરેક સત્રની શરૂઆતમાં તમારા
`webhook_url` ને `web.incoming` પેલોડ સાથે કૉલ કરે છે. તે મુલાકાતી માટે તમે
ચલાવવા માગો છો તે એજન્ટ કન્ફિગરેશન પરત કરો — તે ફોન કૉલ્સ જેવી જ
[પ્રતિસાદ સ્કીમા](/gu/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="/gu/widget/overview">
    React / hook / CDN ઇન્ટિગ્રેશનની વિગતો.
  </Card>
  <Card title="ડાયનેમિક પ્રતિ-કૉલ કન્ફિગ" icon="bolt" href="/gu/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>