---
title: "วิดเจ็ตเสียงแบบฝัง"
description: "เพิ่ม AI เอเจนต์เสียงลงในเว็บไซต์ใดก็ได้ด้วยโค้ดเพียงไม่กี่บรรทัด"
---

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

วิดเจ็ตจะแสดงเป็นแถบสไตล์กระจกโปร่งใสที่ปรับให้เข้ากับธีมสว่างและมืด พร้อมสีเน้นและตำแหน่งที่ปรับแต่งได้ โดยเผยแพร่เป็นแพ็กเกจ npm `@thunderphone/widget` และพร้อมใช้งานผ่าน CDN สำหรับสภาพแวดล้อมที่ไม่ใช้บันเดิลเลอร์

<Frame>
  <img src="/images/widget-showcase.png" alt="วิดเจ็ต ThunderPhone ในธีมสว่างและมืดพร้อมสีเน้นหลากหลายสี" />
</Frame>

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

ก่อนฝังวิดเจ็ต ให้ดำเนินการสามขั้นตอนต่อไปนี้ใน [แดชบอร์ด ThunderPhone](https://app.thunderphone.com):

<Steps>
<Step title="สร้างคีย์ API ที่เผยแพร่ได้">
  ไปที่ **นักพัฒนา** ในการตั้งค่าแดชบอร์ด แล้วสร้างคีย์ที่เผยแพร่ได้ คีย์ที่เผยแพร่ได้จะขึ้นต้นด้วย `pk_live_` และปลอดภัยสำหรับการใส่ในโค้ดฝั่งไคลเอนต์
</Step>

<Step title="กำหนดค่าโดเมนที่อนุญาต">
  ในการตั้งค่านักพัฒนาเดียวกัน ให้เพิ่มโดเมนที่จะฝังวิดเจ็ต `localhost` ได้รับอนุญาตเสมอสำหรับการพัฒนา รองรับไวลด์การ์ด เช่น `*.example.com`
</Step>

<Step title="สร้างวิดเจ็ตเว็บ">
  ไปที่ **วิดเจ็ตเว็บ** ในแดชบอร์ดแล้วสร้างวิดเจ็ต เลือกเอเจนต์ที่ต้องการเปิดให้ใช้งานและคีย์ที่เผยแพร่ได้ที่จะใช้ ระบบจะระบุเอเจนต์โดยอัตโนมัติจากการกำหนดค่าคีย์ที่เผยแพร่ได้ของคุณ
</Step>
</Steps>

<Warning>
  คีย์ที่เผยแพร่ได้ (`pk_live_...`) **ไม่ใช่** โทเค็น API ลับของคุณ คีย์ที่เผยแพร่ได้ออกแบบมาสำหรับการใช้งานฝั่งไคลเอนต์ และจำกัดขอบเขตไว้สำหรับเซสชันวิดเจ็ตบนโดเมนที่อนุญาตของคุณ ห้ามใช้โทเค็น API ลับในโค้ดฝั่งไคลเอนต์
</Warning>

---

## เริ่มต้นอย่างรวดเร็ว

ติดตั้งแพ็กเกจ:

```bash
npm install @thunderphone/widget
```

เพิ่มวิดเจ็ตลงในแอปของคุณ:

```tsx
import { ThunderPhoneWidget } from '@thunderphone/widget'
import '@thunderphone/widget/style.css'

function App() {
  return (
    <ThunderPhoneWidget
      publishableKey="pk_live_your_publishable_key"
      theme="dark"
      primaryColor="#8b5cf6"
    />
  )
}
```

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

---

## การปรับแต่ง

วิดเจ็ตมีพร็อพสำหรับลักษณะที่ปรากฏสี่รายการ:

| พร็อพ | ค่าเริ่มต้น | คำอธิบาย |
|------|---------|-------------|
| `theme` | `'light'` | `'light'` สำหรับกระจกสีขาว `'dark'` สำหรับกระจกสีเข้ม |
| `primaryColor` | `'#000000'` (สว่าง) / `'#ffffff'` (มืด) | สีเน้นสำหรับปุ่มเริ่ม รูปคลื่น และตัวบ่งชี้การเชื่อมต่อ |
| `title` | `'Voice assistant'` | ข้อความที่แสดงในวิดเจ็ต |
| `position` | `'bottom-right'` | มุมของวิวพอร์ต: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'` |

<CodeGroup>
```tsx Light theme (default)
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
/>
```

```tsx Dark theme with custom color
<ThunderPhoneWidget
  publishableKey="pk_live_your_publishable_key"
  theme="dark"
  primaryColor="#8b5cf6"
  title="Ask our AI"
/>
```
</CodeGroup>

พร็อพอีกสามรายการใช้ปรับแต่งเซสชันแทนลักษณะที่ปรากฏ โดยทั้งหมดจะถูกส่งต่อไปยังคำขอเซสชันเมื่อเริ่มการโทร:

| พร็อพ | คำอธิบาย |
|------|-------------|
| `language` | การแทนที่ภาษารายเซสชัน — รหัสหรือโลแคล เช่น `en`, `es` หรือ `fr-FR` |
| `voice` | การแทนที่เสียงรายเซสชัน — ชื่อเสียง เช่น `maria` |
| `context` | บริบทข้อเท็จจริงของหน้าหรือเว็บไซต์ที่ส่งให้เอเจนต์ (เซิร์ฟเวอร์จะตัดทอนให้เหลือ 12,000 อักขระ) |

ดูตารางพร็อพทั้งหมดได้ที่[เอกสารอ้างอิงคอมโพเนนต์ React](/th/widget/react)

สำหรับ UI ที่ปรับแต่งได้ทั้งหมด ให้ใช้[ฮุกแบบ headless](/th/widget/headless-hook)เพื่อจัดการเซสชันเสียงขณะที่คุณสร้างอินเทอร์เฟซของตนเอง ฮุกนี้แสดงระดับเสียงแบบเรียลไทม์สำหรับสร้างภาพแสดงผลที่ตอบสนองต่อเสียง

---

## ตัวเลือกการผสานรวม

เลือกวิธีการผสานรวมที่เหมาะกับสแต็กของคุณ:

<CardGroup cols={3}>
  <Card title="คอมโพเนนต์ React" icon="react" href="/th/widget/react">
    คอมโพเนนต์ UI ที่สร้างไว้ล่วงหน้าพร้อมตัวควบคุมการโทรและการแสดงสถานะในตัว นำเข้า ส่ง props แล้วใช้งานได้ทันที
  </Card>
  <Card title="Hook แบบ Headless" icon="code" href="/th/widget/headless-hook">
    ควบคุม UI ได้อย่างเต็มที่ Hook `useThunderPhone` จัดการเซสชันเสียง ขณะที่คุณสร้างอินเทอร์เฟซของคุณเอง
  </Card>
  <Card title="CDN / แท็ก Script" icon="globe" href="/th/widget/cdn-script-tag">
    ไม่ต้องใช้ bundler โหลดวิดเจ็ตผ่านแท็ก script สำหรับเว็บไซต์แบบสแตติก WordPress และสภาพแวดล้อมอื่นที่ไม่ใช่ React
  </Card>
</CardGroup>

---

## การปรับสไตล์

วิดเจ็ตมาพร้อมธีมสว่างและมืดในตัวที่ควบคุมด้วย prop `theme` และสีเน้นที่ควบคุมด้วย prop `primaryColor` สำหรับการปรับแต่งเชิงลึก คุณสามารถแทนที่ CSS custom properties และคลาสได้ ดูรายละเอียดใน[คู่มือการปรับสไตล์](/th/widget/styling)

<Note>
  ต้องการความช่วยเหลือ? ติดต่อเราได้ที่[support@thunderphone.com](mailto:support@thunderphone.com)
</Note>