---
read_when:
    - คุณต้องการให้เอเจนต์แสดงผลลัพธ์แบบโต้ตอบภายในเว็บแชต
    - คุณต้องมีข้อกำหนดของอินพุต `show_widget` ความปลอดภัย หรือการเก็บรักษาข้อมูล
sidebarTitle: Show widget
summary: แสดงวิดเจ็ต SVG หรือ HTML แบบสมบูรณ์ในตัวแบบอินไลน์ในเว็บแชต
title: แสดงวิดเจ็ต
x-i18n:
    generated_at: "2026-07-12T16:50:31Z"
    model: gpt-5.6
    postprocess_version: locale-links-v1
    provider: openai
    source_hash: 2de3760ec3aba9e6551eb31129c32f74fc69a8a158f9d6bde5a823136e5eae87
    source_path: tools/show-widget.md
    workflow: 16
---

`show_widget` แสดงผลส่วนย่อย SVG หรือ HTML ที่ทำงานได้ในตัวเองแบบอินไลน์ในบันทึกบทสนทนาของ Control UI โดย Canvas plugin ที่รวมมาให้เป็นเจ้าของเครื่องมือนี้และโฮสต์ผลลัพธ์แต่ละรายการเป็นเอกสาร Canvas ที่มีต้นทางเดียวกัน

เครื่องมือนี้พร้อมใช้งานเฉพาะเมื่อไคลเอนต์ Gateway ต้นทางประกาศความสามารถ `inline-widgets` เท่านั้น Control UI จะประกาศความสามารถนี้โดยอัตโนมัติ การทำงานผ่านช่องทางต่าง ๆ เช่น Telegram และ WhatsApp จะไม่ได้รับ `show_widget`

การส่งผ่านความสามารถครอบคลุมแบ็กเอนด์โมเดลแบบฝังตัว, Codex app-server และที่ทำงานผ่าน CLI ส่วนผู้เรียก MCP ที่ยืนยันตัวตนด้วยสิทธิ์อนุญาตและผู้เรียกใช้เครื่องมือโดยตรงผ่าน HTTP จะยังคงปฏิเสธการทำงานโดยปริยาย เนื่องจากไม่ได้ประกาศความสามารถของไคลเอนต์

## ใช้เครื่องมือ

เอเจนต์ระบุสตริงที่จำเป็นสองรายการ:

<ParamField path="title" type="string" required>
  ชื่อเรื่องสั้นที่แสดงพร้อมตัวอย่างแบบอินไลน์และในชื่อเรื่องของเอกสารที่โฮสต์
</ParamField>

<ParamField path="widget_code" type="string" required>
  ส่วนย่อย SVG หรือ HTML ที่ทำงานได้ในตัวเอง อินพุตที่ขึ้นต้นด้วย `<svg` หลังจากตัดช่องว่างจะถูกแสดงผลในโหมด SVG ส่วนอินพุตอื่นทั้งหมดจะถือเป็นส่วนย่อย HTML ความยาวสูงสุด: 262,144 อักขระ
</ParamField>

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

## ความปลอดภัยและพื้นที่จัดเก็บ

เอกสารวิดเจ็ตใช้นโยบายความปลอดภัยของเนื้อหาที่เข้มงวด: อนุญาตสไตล์และสคริปต์แบบอินไลน์ รูปภาพสามารถใช้ URL แบบ `data:` และบล็อกการดึงข้อมูลและการโหลดทรัพยากรจากภายนอก ให้เก็บมาร์กอัป สไตล์ สคริปต์ และข้อมูลรูปภาพทั้งหมดไว้ภายใน `widget_code`

iframe จะไม่ระบุ `allow-same-origin` เสมอ แม้ว่าโหมดฝังตัวส่วนกลางของ Control UI จะเป็น `trusted` ดังนั้นสคริปต์ของวิดเจ็ตจึงไม่สามารถอ่านต้นทางของแอปพลิเคชันแม่ได้ โฮสต์ Canvas ยังให้บริการเอกสารวิดเจ็ตพร้อมส่วนหัวการตอบกลับ `Content-Security-Policy: sandbox allow-scripts` ดังนั้นแม้เปิด URL ที่โฮสต์โดยตรง วิดเจ็ตก็ยังทำงานในต้นทางแบบทึบแทนต้นทางของ Control UI การแซนด์บ็อกซ์ของเบราว์เซอร์ไม่ได้ป้องกันสคริปต์จากการนำทาง iframe ของตัวเอง โปรดแสดงผลเฉพาะโค้ดวิดเจ็ตที่คุณยินดีให้ทำงานในเฟรมแยกนั้น

iframe ยังเป็นไปตาม [`gateway.controlUi.embedSandbox`](/th/web/control-ui#hosted-embeds) ระดับ `scripts` เริ่มต้นรองรับวิดเจ็ตแบบโต้ตอบพร้อมคงการแยกต้นทางไว้

Canvas เก็บวิดเจ็ตไว้สูงสุด 32 รายการต่อเซสชัน (หรือต่อเอเจนต์เมื่อไม่มีเซสชัน) การสร้างวิดเจ็ตเพิ่มเติมจะลบเอกสารที่เก่าที่สุดภายในขอบเขตนั้น

## ที่เกี่ยวข้อง

- [การฝังเนื้อหาที่โฮสต์ใน Control UI](/th/web/control-ui#hosted-embeds)
- [Canvas plugin](/th/plugins/reference/canvas)
- [ความสามารถของไคลเอนต์ในโปรโตคอล Gateway](/th/gateway/protocol#client-capabilities)