---
title: "ਵੈੱਬ ਵਿਜਟ ਨੂੰ ਏਮਬੈਡ ਕਰੋ"
description: "ਇੱਕ ਹੀ ਸਕ੍ਰਿਪਟ ਟੈਗ ਨਾਲ ਆਪਣੇ ਮਾਰਕੀਟਿੰਗ ਜਾਂ ਸਹਾਇਤਾ ਸਾਈਟ ਉੱਤੇ ਵੌਇਸ ਏਜੰਟ ਜੋੜੋ — ਵਿਜ਼ਟਰ ਬ੍ਰਾਊਜ਼ਰ ਤੋਂ ਹੀ ਇਸ ਨਾਲ ਗੱਲ ਕਰਦੇ ਹਨ, ਫ਼ੋਨ ਨੰਬਰ ਦੀ ਲੋੜ ਨਹੀਂ।"
---

ਵੈੱਬ ਵਿਜੇਟ ਤੁਹਾਡੀ ਸਾਈਟ ਦੇ ਵਿਜ਼ਿਟਰਾਂ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਮਾਈਕ੍ਰੋਫ਼ੋਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ AI ਏਜੰਟ ਨਾਲ ਕਲਿੱਕ-ਟੂ-ਟਾਕ ਗੱਲਬਾਤ ਦਿੰਦਾ ਹੈ। ਇਹ ਆਪਣੀ [SDK ਰੈਫ਼ਰੈਂਸ](/pa/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` ਵੈੱਬਹੁੱਕ](/pa/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 ਡੌਕਸ](/pa/widget/overview) ਵਿੱਚ ਕਵਰ ਕੀਤਾ ਗਿਆ ਹੈ:

<CardGroup cols={3}>
  <Card title="React ਕੰਪੋਨੈਂਟ" icon="react" href="/pa/widget/react">
    `<ThunderPhoneWidget publishableKey="pk_live_..." />`.
  </Card>
  <Card title="ਹੈੱਡਲੈੱਸ ਹੁੱਕ" icon="circle-nodes" href="/pa/widget/headless-hook">
    ਕਸਟਮ UI ਲਈ `useThunderPhone()`।
  </Card>
  <Card title="CDN ਸਕ੍ਰਿਪਟ ਟੈਗ" icon="code" href="/pa/widget/cdn-script-tag">
    ਬੰਡਲਰ-ਰਹਿਤ ਸਾਈਟਾਂ ਲਈ `ThunderPhone.mount({...})`।
  </Card>
</CardGroup>

ਤਿੰਨੇ ਇੱਕੋ `publishableKey` ਸਵੀਕਾਰ ਕਰਦੇ ਹਨ ਅਤੇ ਮਾਈਕ ਬਟਨ
ਨਾਲ ਹੀ ਕਾਲ ਦੌਰਾਨ ਦਾ ਆਡੀਓ ਐਲੀਮੈਂਟ ਰੈਂਡਰ ਕਰਦੇ ਹਨ।

ਵਿਜੇਟ `context` ਨੂੰ 12,000 ਅੱਖਰਾਂ ਤੱਕ ਸੀਮਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ (ਆਮ ਅੰਗਰੇਜ਼ੀ ਲਿਖਤ ਦੇ ਲਗਭਗ 3,400
ਟੋਕਨ) ਅਤੇ ਇਹ
[prompt-ਆਕਾਰ ਸਰਚਾਰਜ](/pa/guides/billing-and-topups) ਵਿੱਚ ਗਿਣਿਆ ਜਾਂਦਾ ਹੈ।

## ਵਿਜੇਟ-ਮੋਡ ਵੈੱਬਹੁੱਕਸ

ਜਦੋਂ `mode="webhook"` ਹੁੰਦਾ ਹੈ, ThunderPhone ਹਰ
ਸੈਸ਼ਨ ਸ਼ੁਰੂ ਹੋਣ ਤੇ `web.incoming` ਪੇਲੋਡ ਨਾਲ ਤੁਹਾਡੇ `webhook_url` ਨੂੰ ਕਾਲ ਕਰਦਾ ਹੈ। ਉਸ ਵਿਜ਼ਿਟਰ ਲਈ ਚਲਾਉਣ ਲਈ
ਏਜੰਟ ਸੰਰਚਨਾ ਵਾਪਸ ਭੇਜੋ — ਇਹ ਫ਼ੋਨ
ਕਾਲਾਂ ਵਾਲੀ ਹੀ [ਰਿਸਪਾਂਸ ਸਕੀਮਾ](/pa/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="/pa/widget/overview">
    React / hook / CDN ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਦੇ ਵੇਰਵੇ।
  </Card>
  <Card title="ਹਰ ਕਾਲ ਲਈ ਡਾਇਨਾਮਿਕ ਕਨਫਿਗ" icon="bolt" href="/pa/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>