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

หน้า **วิดเจ็ตเว็บ** (`/dashboard/web-widgets`) ใช้สร้างและจัดการ
คีย์ที่เผยแพร่ได้ซึ่งขับเคลื่อนวิดเจ็ตเสียงแบบฝังของ ThunderPhone
ทุกสิ่งที่[คู่มือเวอร์ชัน API](/th/guides/embed-web-widget)นี้ทำด้วย cURL
หน้านี้ทำด้วยแบบฟอร์ม — และยังสร้างโค้ดสำหรับฝังให้คุณด้วย

## สร้างวิดเจ็ต

<Steps>
  <Step title="คลิก วิดเจ็ตใหม่ และเลือกโหมด">
    - **โหมดเอเจนต์** — วิดเจ็ตจะเรียกใช้เอเจนต์หนึ่งรายที่คุณเลือกจาก
      เมนูแบบเลื่อนลงเสมอ เป็นการตั้งค่าที่ง่ายที่สุด
    - **โหมด Webhook** — ในทุกเซสชันวิดเจ็ต ThunderPhone จะเรียก
      URL Webhook ของคุณ และเซิร์ฟเวอร์ของคุณจะส่งคืนการกำหนดค่าเอเจนต์
      สำหรับผู้เข้าชมรายนั้น (การกำหนดเส้นทางตามหน้า ผู้ใช้ที่เข้าสู่ระบบ การทยอยเปิดใช้)
      ปล่อย URL ว่างไว้เพื่อใช้ Webhook เริ่มต้นขององค์กรคุณ
      เมื่อคุณป้อน URL ใหม่ คุณยังสามารถตั้งให้เป็นค่าเริ่มต้นขององค์กรได้
  </Step>
  <Step title="ระบุโดเมนที่อนุญาต">
    คีย์ที่เผยแพร่ได้ถูกล็อกตาม origin: ต้องมีอย่างน้อยหนึ่งโดเมน
    และวิดเจ็ตจะทำงานเฉพาะบน hostname ที่คุณระบุเท่านั้น
    อนุญาตให้ใช้ wildcard ของโดเมนย่อย เช่น `*.example.com`
    (ตรงกับโดเมนย่อย ไม่ใช่โดเมนหลัก) แต่ wildcard เปล่า เช่น `*` จะถูกปฏิเสธ
    อนุญาต `localhost` และ `127.0.0.1` เสมอ ดังนั้นการพัฒนาในเครื่อง
    จึงทำงานได้โดยไม่ต้องระบุค่าเหล่านี้
  </Step>
  <Step title="ตั้งชื่อ เปิดใช้ และสร้าง">
    สวิตช์ **เปิดใช้วิดเจ็ต** ควบคุมว่าคีย์จะยอมรับ
    เซสชันหรือไม่ — คุณสามารถสร้างวิดเจ็ตแบบปิดใช้ แล้วเปิดใช้งานเมื่อเปิดตัวได้
  </Step>
</Steps>

## รับโค้ดสำหรับฝัง

ทันทีหลังสร้าง (หรือผ่านปุ่ม **ฝัง** ของแต่ละแถว) กล่องโต้ตอบสำหรับฝัง
จะสร้างโค้ดที่พร้อมวาง โดยกรอกคีย์ที่เผยแพร่ได้ของคุณ
ไว้ให้แล้ว:

- **React** — โค้ดตัวอย่าง `<ThunderPhoneWidget />` สำหรับแอปที่ใช้ bundler
- **แท็ก Script** — คู่ `<script>` + stylesheet จาก CDN สำหรับทุกเว็บไซต์

กล่องโต้ตอบยังแสดงตัวอย่างตัวเลือกการแสดงผลพื้นฐาน — ชื่อ สีหลัก
ตำแหน่งมุม และธีมสว่าง/มืด — และรวมตัวเลือกของคุณไว้ใน
โค้ดตัวอย่าง สำหรับข้อมูลอ้างอิง prop ฉบับเต็ม hook สำหรับปรับสไตล์
และตัวเลือก headless โปรดดู[เอกสาร SDK วิดเจ็ต](/th/widget/overview)

<Note>
  คีย์ที่เผยแพร่ได้ (`pk_live_…`) เป็นข้อมูลสาธารณะโดยการออกแบบ — ปลอดภัยสำหรับใช้ใน
  โค้ด front-end คัดลอกได้ทุกเมื่อด้วยปุ่มคัดลอกในแถวนั้น
</Note>

## จัดการวิดเจ็ตจากรายการ

แต่ละแถวแก้ไขได้ในตำแหน่งเดิม:

- **โหมด / เอเจนต์** — สลับระหว่างโหมดเอเจนต์และ Webhook หรือเปลี่ยน
  เอเจนต์ ด้วยเมนูเลือกแบบอินไลน์
- **โดเมน** — เพิ่มหรือลบโดเมนที่อนุญาตในรูปแบบชิป
- **เปิดใช้/ปิดใช้** — มีสวิตช์สำหรับแต่ละวิดเจ็ต วิดเจ็ตที่ปิดใช้จะหยุด
  รับเซสชันทันที
- **โอนไปยังองค์กร** — คัดลอกหรือย้ายวิดเจ็ตไปยังองค์กรอื่น
  ที่คุณเป็นสมาชิก (การย้ายจะลบวิดเจ็ตออกจากที่นี่)
- **ลบ** — เพิกถอนคีย์ที่เผยแพร่ได้ วิดเจ็ตจะหยุดทำงาน
  ทันทีบนทุกโดเมน ไม่สามารถย้อนกลับได้

เซสชันวิดเจ็ตจะแสดงใน[ประวัติการโทร](/th/guides/review-calls) พร้อม
ข้อความถอดเสียง การบันทึก และการประเมินเช่นเดียวกับการโทรศัพท์

## ขั้นตอนถัดไป

<CardGroup cols={2}>
  <Card title="ข้อมูลอ้างอิง SDK วิดเจ็ต" icon="window-maximize" href="/th/widget/overview">
    รายละเอียดคอมโพเนนต์ React, hook แบบ headless และสคริปต์ CDN
  </Card>
  <Card title="การกำหนดเส้นทางโหมด Webhook" icon="bolt" href="/th/guides/dynamic-call-config">
    ส่งคืนการกำหนดค่าเอเจนต์สำหรับผู้เข้าชมแต่ละรายจากเซิร์ฟเวอร์ของคุณ
  </Card>
</CardGroup>