> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thunderphone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# הטמעת הווידג'ט לאתר

> הוסיפו סוכן קולי לאתר השיווק או התמיכה שלכם — אין צורך במספר טלפון.

רכיב האינטרנט מאפשר למבקרים באתר שלכם לנהל שיחה בלחיצה כדי לדבר
עם סוכן בינה מלאכותית, באמצעות המיקרופון של הדפדפן. זוהי ערכת SDK נפרדת
ל-JavaScript / React עם [תיעוד SDK](/he/widget/overview) משלה
— מדריך זה מתמקד בהגדרה בצד ThunderPhone שנדרשת עבור הרכיב.

<Note>
  תוכלו לבצע את כל הפעולות האלה ללא cURL: דף **רכיבי האינטרנט** בלוח הבקרה
  (`/dashboard/web-widgets`) יוצר את הרכיב, מגדיר את המצב ואת הסוכן שלו,
  מנהל דומיינים מורשים ומספק לכם את קטע ההטמעה.
</Note>

## דרישות מוקדמות

<Steps>
  <Step title="צרו סוכן">
    הסוכן שההנחיה והקול שלו יפעילו את הפעלת הרכיב. הגדירו את
    `widget_enabled: true` (ברירת המחדל).
  </Step>

  <Step title="החליטו על מצב הניתוב">
    * `mode="agent"` — סוכן סטטי אחד לכל מפתח. האפשרות הפשוטה ביותר.
    * `mode="webhook"` — השרת שלכם בוחר את הסוכן לכל מבקר באמצעות
      [וובהוק `web.incoming`](/he/webhooks/call-incoming). השתמשו בכך עבור
      משתמשים מחוברים, בדיקות A/B או ניתוב לפי עמוד.
  </Step>

  <Step title="פרטו את הדומיינים המורשים">
    מפתחות הניתנים לפרסום נעולים למקור. עליכם לציין כל שם מארח
    שיטמיע את הרכיב. `localhost` / `127.0.0.1` מורשים תמיד במהלך פיתוח מקומי.
  </Step>
</Steps>

## צרו מפתח ניתן לפרסום

<CodeGroup>
  ```bash Static agent theme={null}
  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 theme={null}
  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>

התגובה כוללת `key` שמתחיל ב-`pk_live_...`. **מפתחות הניתנים לפרסום
הם ציבוריים בכוונה תחילה** — בטוח לכלול אותם בחבילת החזית שלכם.
ראו את [תיעוד המפתחות הניתנים לפרסום](/api-reference/publishable-keys) עבור
כל השדות.

<Warning>
  `allowed_domains` חייב להכיל לפחות רשומה אחת. `*.example.com`
  תואם תת-דומיינים (לדוגמה, `api.example.com`) אך **לא** את
  הדומיין ללא תת-דומיין. תווים כלליים ללא דומיין כגון `*` או `*.*` נדחים.
</Warning>

## הטמיעו את הרכיב באתר שלכם

שלוש אפשרויות אינטגרציה מתוארות ב-
[תיעוד SDK של הרכיב](/he/widget/overview):

<CardGroup cols={3}>
  <Card title="רכיב React" icon="react" href="/he/widget/react">
    `<ThunderPhoneWidget publishableKey="pk_live_..." />`.
  </Card>

  <Card title="הוק ללא ממשק" icon="circle-nodes" href="/he/widget/headless-hook">
    `useThunderPhone()` עבור ממשקי משתמש מותאמים אישית.
  </Card>

  <Card title="תגית סקריפט CDN" icon="code" href="/he/widget/cdn-script-tag">
    `ThunderPhone.mount({...})` עבור אתרים שאינם משתמשים בכלי איגוד.
  </Card>
</CardGroup>

כל שלוש האפשרויות מקבלות את אותו `publishableKey` ומציגות את כפתור
המיקרופון ואת רכיב השמע במהלך השיחה.

ה-`context` של הרכיב נחתך ל-12,000 תווים (כ-3,400
טוקנים של טקסט אנגלי טיפוסי) ונכלל בחישוב
[תוספת התשלום עבור גודל ההנחיה](/he/guides/billing-and-topups).

## וובהוקים במצב רכיב

כאשר `mode="webhook"`, ThunderPhone פונה אל `webhook_url` שלכם בכל
תחילת הפעלה עם מטען `web.incoming`. החזירו את תצורת הסוכן
שברצונכם להפעיל עבור אותו מבקר — היא פועלת לפי אותה
[סכמת תגובה](/he/webhooks/call-incoming) כמו בשיחות
טלפון:

```json theme={null}
{
  "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="/he/widget/overview">
    פרטי אינטגרציה של React / hook / CDN.
  </Card>

  <Card title="תצורה דינמית לכל שיחה" icon="bolt" href="/he/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">
    דלגו על הווידג'ט; הפעילו את LiveKit ישירות עבור ממשקי משתמש מותאמים אישית.
  </Card>
</CardGroup>