---
title: "ฝังวิดเจ็ตบนเว็บ"
description: "เพิ่มเอเจนต์เสียงลงในเว็บไซต์การตลาดหรือเว็บไซต์สนับสนุนของคุณด้วยแท็กสคริปต์เพียงแท็กเดียว ผู้เข้าชมสามารถพูดคุยกับเอเจนต์ได้โดยตรงจากเบราว์เซอร์ โดยไม่ต้องใช้หมายเลขโทรศัพท์"
---

วิดเจ็ตเว็บช่วยให้ผู้เข้าชมเว็บไซต์ของคุณเริ่มการสนทนาแบบคลิกเพื่อพูดคุย
กับ AI เอเจนต์ โดยใช้ไมโครโฟนของเบราว์เซอร์ เป็น JavaScript / React SDK
แยกต่างหากพร้อม[ข้อมูลอ้างอิง SDK](/th/widget/overview)ของตนเอง
— คู่มือนี้เน้นการตั้งค่าฝั่ง ThunderPhone ที่วิดเจ็ตต้องใช้

<Note>
  คุณดำเนินการทั้งหมดนี้ได้โดยไม่ต้องใช้ cURL: หน้าควบคุม **วิดเจ็ตเว็บ**
  (`/dashboard/web-widgets`) ใช้สร้างวิดเจ็ต กำหนดโหมดและเอเจนต์
  จัดการโดเมนที่อนุญาต และมอบสไนปเพ็ตสำหรับฝังให้คุณ
</Note>

## ข้อกำหนดเบื้องต้น

<Steps>
  <Step title="สร้างเอเจนต์">
    เอเจนต์ที่พรอมป์ต์และเสียงจะทำงานในเซสชันของวิดเจ็ต ตั้งค่า
    `widget_enabled: true` (ค่าเริ่มต้น)
  </Step>
  <Step title="เลือกโหมดการกำหนดเส้นทาง">
    - `mode="agent"` — เอเจนต์แบบคงที่หนึ่งรายต่อคีย์ ง่ายที่สุด
    - `mode="webhook"` — เซิร์ฟเวอร์ของคุณเลือกเอเจนต์ต่อผู้เข้าชมผ่าน
      [`web.incoming` webhook](/th/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>

การตอบกลับมี `key` ที่ขึ้นต้นด้วย `pk_live_...` **คีย์แบบเผยแพร่ได้
เป็นข้อมูลสาธารณะโดยการออกแบบ** — ปลอดภัยที่จะรวมไว้ในบันเดิลฟรอนต์เอนด์ของคุณ
ดู[ข้อมูลอ้างอิงคีย์แบบเผยแพร่ได้](/api-reference/publishable-keys)สำหรับ
ทุกฟิลด์

<Warning>
  `allowed_domains` ต้องมีอย่างน้อยหนึ่งรายการ `*.example.com`
  ตรงกับโดเมนย่อย (เช่น `api.example.com`) แต่**ไม่**ตรงกับ
  โดเมนหลัก Wildcard เปล่า เช่น `*` หรือ `*.*` จะถูกปฏิเสธ
</Warning>

## เพิ่มวิดเจ็ตลงในเว็บไซต์

มีตัวเลือกการผสานรวมสามแบบใน
[เอกสาร SDK ของวิดเจ็ต](/th/widget/overview):

<CardGroup cols={3}>
  <Card title="คอมโพเนนต์ React" icon="react" href="/th/widget/react">
    `<ThunderPhoneWidget publishableKey="pk_live_..." />`
  </Card>
  <Card title="Hook แบบ Headless" icon="circle-nodes" href="/th/widget/headless-hook">
    `useThunderPhone()` สำหรับ UI แบบกำหนดเอง
  </Card>
  <Card title="แท็กสคริปต์ CDN" icon="code" href="/th/widget/cdn-script-tag">
    `ThunderPhone.mount({...})` สำหรับเว็บไซต์ที่ไม่ใช้บันเดิลเลอร์
  </Card>
</CardGroup>

ทั้งสามแบบรับ `publishableKey` เดียวกัน และแสดงปุ่มไมโครโฟน
พร้อมองค์ประกอบเสียงระหว่างการโทร

`context` ของวิดเจ็ตจะถูกตัดให้เหลือ 12,000 อักขระ (ประมาณ 3,400
โทเค็นของข้อความภาษาอังกฤษทั่วไป) และนับรวมใน
[ค่าบริการเพิ่มเติมตามขนาดพรอมป์ต์](/th/guides/billing-and-topups)

## Webhook โหมดวิดเจ็ต

เมื่อ `mode="webhook"` ThunderPhone จะเรียก `webhook_url` ของคุณทุกครั้ง
ที่เริ่มเซสชัน พร้อมเพย์โหลด `web.incoming` ส่งคืนการกำหนดค่าเอเจนต์
ที่คุณต้องการให้ทำงานสำหรับผู้เข้าชมรายนั้น — โดยใช้
[สคีมาการตอบกลับ](/th/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="ข้อมูลอ้างอิง Widget SDK" icon="window-maximize" href="/th/widget/overview">
    รายละเอียดการผสานรวม React / hook / CDN
  </Card>
  <Card title="การกำหนดค่าต่อการโทรแบบไดนามิก" icon="bolt" href="/th/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 โดยตรงสำหรับ UI แบบกำหนดเอง
  </Card>
</CardGroup>