---
read_when:
    - आप चाहते हैं कि कोई एजेंट वेब चैट, किसी नेटिव ऐप या Discord में एक इंटरैक्टिव परिणाम रेंडर करे
    - आप चाहते हैं कि विजेट बटन चैट में फ़ॉलो-अप प्रॉम्प्ट भेजें
    - आप साझा डिज़ाइन टोकन के साथ विजेट की थीम निर्धारित करना चाहते हैं
    - आपको show_widget इनपुट, सुरक्षा या अवधारण अनुबंध की आवश्यकता है
sidebarTitle: Show widget
summary: समर्थित चैट सतहों पर स्व-निहित HTML विजेट दिखाएँ
title: विजेट दिखाएँ
x-i18n:
    generated_at: "2026-07-20T07:34:14Z"
    model: gpt-5.6
    postprocess_version: locale-links-v1
    prompt_version: 32
    provider: openai
    source_hash: bcb149984840fdbb84d91da98c488b0a8ca2300f8a1984a8b0b144b0a8d6cd28
    source_path: tools/show-widget.md
    workflow: 16
---

`show_widget` एक मुख्य टूल है जो उपयोगकर्ता की वर्तमान सतह पर एक स्व-निहित HTML विजेट दिखाता है। OpenClaw इसे Control UI, iOS, Android और macOS चैट ट्रांसक्रिप्ट में इनलाइन रेंडर करता है; Linux ब्राउज़र Control UI का उपयोग करता है। [Activities](/hi/channels/discord-activities) सक्षम वाले Discord सत्र में, Discord Plugin एक **विजेट खोलें** बटन पोस्ट करता है, जो इसे Activity के रूप में लॉन्च करता है।

## विजेट कैसे काम करते हैं

जब एजेंट `show_widget` को कॉल करता है, तो OpenClaw कोर `widget_code` को एक न्यूनतम HTML दस्तावेज़ में लपेटता है, उसे Canvas दस्तावेज़ के रूप में संग्रहीत करता है और एक पूर्वावलोकन हैंडल लौटाता है। Control UI उस हैंडल को टूल कॉल के ठीक नीचे सैंडबॉक्स किए गए iframe के रूप में रेंडर करता है, जबकि नेटिव ऐप एक पृथक वेब व्यू का उपयोग करते हैं। इतिहास दोबारा लोड होने के बाद दोनों विजेट को पुनर्स्थापित करते हैं।

Control UI सत्रों में, Canvas विजेट को सत्र डैशबोर्ड पर पिन भी किया जा सकता है। टूल कॉल में `pin: true` सेट करें या किसी मौजूदा ट्रांसक्रिप्ट विजेट पर **डैशबोर्ड पर पिन करें** का उपयोग करें। पिन करने पर ठीक उसी होस्ट किए गए दस्तावेज़ का पुनः उपयोग होता है; यह ब्राउज़र के माध्यम से विजेट HTML प्राप्त नहीं करता।

ब्राउज़र में एम्बेड करने के लिए, रैपर दस्तावेज़ विजेट कोड के आसपास चार छोटे होस्ट ब्रिज इंजेक्ट करता है:

- एक आकार रिपोर्टर रेंडर की गई सामग्री की ऊँचाई एम्बेड करने वाली चैट को पोस्ट करता है, जो उसे सीमित करके iframe में फ़िट करती है (160 से 1200 पिक्सेल)।
- एक प्रॉम्प्ट ब्रिज वैश्विक `sendPrompt(text)` फ़ंक्शन परिभाषित करता है, जिसे विजेट स्क्रिप्ट चैट में अनुवर्ती संदेश सबमिट करने के लिए कॉल कर सकती हैं। किसी भी विजेट कोड के चलने से पहले ब्रिज एक निजी संदेश चैनल बनाता है और चैट को एक एंडपॉइंट प्रदान करता है; चैट केवल उसी पहले प्रस्ताव को स्वीकार करती है। [इंटरैक्टिव विजेट](#interactive-widgets) देखें।
- एक थीम ब्रिज Control UI के वर्तमान डिज़ाइन टोकन सुनता है और उन्हें लोड होने पर तथा हर थीम परिवर्तन पर CSS वेरिएबल के रूप में लागू करता है।
- जब एम्बेड करने वाली चैट निर्यात का अनुरोध करती है, तो एक स्नैपशॉट ब्रिज वर्तमान विजेट दस्तावेज़ को PNG के रूप में रेंडर करता है।

बाकी सब कुछ फ़्रेम के भीतर रहता है: दस्तावेज़ सख्त Content Security Policy के साथ अपारदर्शी ओरिजिन में चलता है, इसलिए विजेट स्क्रिप्ट Control UI, Gateway या नेटवर्क तक नहीं पहुँच सकतीं।

मुख्य कार्यान्वयन केवल तभी उपलब्ध होता है जब मूल Gateway क्लाइंट `inline-widgets` क्षमता घोषित करता है। Control UI और समर्थित नेटिव ऐप यह क्षमता स्वतः घोषित करते हैं। Discord कार्यान्वयन केवल कॉन्फ़िगर की गई Activities वाले Discord सत्रों में उपलब्ध होता है। अन्य चैनल रन को `show_widget` प्राप्त नहीं होता।

क्षमता परिवहन एम्बेड किए गए, Codex ऐप-सर्वर और CLI-समर्थित मॉडल बैकएंड को कवर करता है। अनुदान-प्रमाणित MCP कॉलर और सीधे HTTP टूल-इनवोक कॉलर फ़ेल-क्लोज़ रहते हैं, क्योंकि वे क्लाइंट क्षमताएँ घोषित नहीं करते।

## डिज़ाइन सिस्टम

प्रत्येक Canvas विजेट में क्लास-रहित आधार स्टाइलशीट और एक छोटा टोकन सेट शामिल होता है:

| टोकन                                                                                 | उद्देश्य                               |
| ------------------------------------------------------------------------------------- | ------------------------------------- |
| `--surface`                                                                           | पृष्ठ-स्तरीय सतह का रंग              |
| `--card`                                                                              | कार्ड, बटन और कोड की पृष्ठभूमि     |
| `--elevated`                                                                          | उभरे हुए फ़ॉर्म नियंत्रण की पृष्ठभूमि      |
| `--text`                                                                              | डिफ़ॉल्ट मुख्य भाग और नियंत्रण टेक्स्ट         |
| `--text-strong`                                                                       | शीर्षक और प्रमुख मान         |
| `--muted`                                                                             | द्वितीयक टेक्स्ट और हल्के बॉर्डर     |
| `--border`                                                                            | मानक विभाजक और कार्ड बॉर्डर  |
| `--border-strong`                                                                     | मज़बूत नियंत्रण बॉर्डर                |
| `--accent`                                                                            | लिंक और फ़ोकस रिंग                 |
| `--accent-fill`                                                                       | प्राथमिक कार्रवाई का भरण                   |
| `--accent-fg`                                                                         | प्राथमिक कार्रवाई पर टेक्स्ट              |
| `--ok`                                                                                | सफलता की स्थिति                         |
| `--warn`                                                                              | चेतावनी की स्थिति                         |
| `--danger`                                                                            | त्रुटि या विनाशकारी स्थिति            |
| `--info`                                                                              | सूचनात्मक स्थिति                   |
| `--radius`                                                                            | साझा नियंत्रण और कार्ड कोने की त्रिज्या |
| `--font-body`                                                                         | होस्ट मुख्य भाग का फ़ॉन्ट स्टैक                  |
| `--font-mono`                                                                         | होस्ट मोनोस्पेस फ़ॉन्ट स्टैक             |
| `--accent-subtle`, `--ok-subtle`, `--warn-subtle`, `--danger-subtle`, `--info-subtle` | व्युत्पन्न पारभासी स्थिति पृष्ठभूमियाँ |

सादे शीर्षक, अनुच्छेद, लिंक, बटन, इनपुट, चयन-सूचियाँ, टेक्स्ट क्षेत्र, तालिकाएँ और कोड ब्लॉक आधार शैलियाँ प्राप्त करते हैं। सहायक क्लास सामान्य पैटर्न प्रदान करती हैं:

- बॉर्डर वाली सामग्री सतह के लिए `.card`
- संक्षिप्त स्थिति लेबल के लिए `.badge`, साथ में `.ok`, `.warn`, `.danger` या `.info`
- प्रमुख संख्यात्मक मान के लिए `.metric`
- द्वितीयक टेक्स्ट के लिए `.muted`
- रैप होने वाले क्षैतिज लेआउट के लिए `.row`
- प्राथमिक कार्रवाई के लिए `button.primary`

किसी विजेट के लोड होने और थीम बदलने पर Control UI सक्रिय थीम मानों वाला `openclaw:widget-theme` संदेश पोस्ट करता है। इसलिए विजेट दोबारा लोड हुए बिना Claw, Knot, Dash और कस्टम थीम सहित हर थीम परिवार को अपनाते हैं। नेटिव ऐप और सीधे खोले जाने सहित Control UI के बाहर, विजेट `prefers-color-scheme` द्वारा चुने गए अंतर्निहित हल्के या गहरे पैलेट का उपयोग करते हैं।

विजेट बनाते समय तीन नियमों का पालन करें:

1. प्रत्येक रंग और पृष्ठभूमि के लिए डिज़ाइन वेरिएबल का उपयोग करें। रंग मान हार्डकोड न करें।
2. पृष्ठ की पृष्ठभूमि पारदर्शी रखें, ताकि विजेट अपनी होस्ट सतह का हिस्सा लगे।
3. अधिकतम एक प्राथमिक कार्रवाई के लिए `--accent-fill` आरक्षित रखें।

**निर्यात:** वेब चैट में, रेंडर किए गए विजेट को क्लिपबोर्ड पर कॉपी करने या PNG के रूप में डाउनलोड करने के लिए विजेट कार्ड मेन्यू खोलें। स्नैपशॉट ब्रिज के बिना पुराने विजेट दस्तावेज़ विकल्प के रूप में HTML फ़ाइल डाउनलोड करते हैं।

## टूल का उपयोग करें

दोनों कार्यान्वयन समान आवश्यक फ़ील्ड का उपयोग करते हैं:

<ParamField path="title" type="string" required>
  इनलाइन पूर्वावलोकन और होस्ट किए गए दस्तावेज़ के शीर्षक में दिखाया जाने वाला छोटा शीर्षक।
</ParamField>

<ParamField path="widget_code" type="string" required>
  स्व-निहित HTML या SVG। इनलाइन-विजेट क्लाइंट के लिए, ट्रिम करने के बाद `<svg` से शुरू होने वाला इनपुट SVG मोड में रेंडर किया जाता है; अधिकतम लंबाई 262,144 वर्ण है। Discord 48 KiB तक का पूरा HTML दस्तावेज़ या मुख्य भाग फ़्रैगमेंट स्वीकार करता है।
</ParamField>

Discord Activity लॉन्च बटन के लिए वैकल्पिक `button_label` टेक्स्ट भी स्वीकार करता है। Canvas स्कीमा जानबूझकर इस केवल-Discord फ़ील्ड को शामिल नहीं करता।

मुख्य Canvas टूल ये वैकल्पिक डैशबोर्ड प्लेसमेंट फ़ील्ड स्वीकार करता है:

- `pin`: विजेट को सत्र डैशबोर्ड पर भी रखें।
- `name`: स्थिर विजेट नाम; डिफ़ॉल्ट रूप से `title` का स्लग।
- `tab`: गंतव्य टैब स्लग।
- `size`: `sm`, `md`, `lg`, `xl` या `full` में से एक।
- `after`: उस सहोदर विजेट का नाम जिसके बाद विजेट को रखना है।

मुख्य परिणाम में Canvas पूर्वावलोकन हैंडल शामिल होता है, इसलिए Control UI और समर्थित नेटिव ऐप विजेट को सीधे टूल कॉल से रेंडर करते हैं और इतिहास दोबारा लोड होने के बाद उसे पुनर्स्थापित करते हैं। पिन किए गए परिणाम बोर्ड विजेट का नाम भी बनाए रखते हैं, ताकि ट्रांसक्रिप्ट दोबारा लोड होने के बाद Control UI डुप्लिकेट पिन का विकल्प न दे। Discord संग्रहीत विजेट और पोस्ट किए गए संदेश के पहचानकर्ता लौटाता है।

`discord_widget` एक रिलीज़ के लिए अप्रचलित उपनाम के रूप में पंजीकृत रहता है। नए एजेंट कॉल को `show_widget` का उपयोग करना चाहिए।

## इंटरैक्टिव विजेट

Control UI में, विजेट स्क्रिप्ट वार्तालाप को संचालित कर सकती हैं। रैपर दस्तावेज़ वैश्विक `sendPrompt(text)` फ़ंक्शन परिभाषित करता है; इसे कॉल करने पर `text` चैट में ऐसे सबमिट होता है, मानो उपयोगकर्ता ने संदेश टाइप करके भेजा हो। चयनक, प्रश्नोत्तरी या ड्रिल-डाउन डैशबोर्ड जैसे इंटरैक्टिव प्रवाह बनाने के लिए इसे बटन या अन्य नियंत्रणों से जोड़ें। नेटिव ऐप इंटरैक्टिव विजेट कोड रेंडर करते हैं, लेकिन इस चैट प्रॉम्प्ट ब्रिज को उपलब्ध नहीं कराते।

```html
<button onclick="sendPrompt('विफल परीक्षणों को विस्तार से दिखाएँ')">विफल परीक्षण</button>
```

प्रत्येक प्रॉम्प्ट फ़्रेम सीमा के दोनों ओर सत्यापित किया जाता है:

- `sendPrompt` को विजेट के भीतर [क्षणिक उपयोगकर्ता सक्रियण](https://developer.mozilla.org/en-US/docs/Web/Security/User_activation) की आवश्यकता होती है: यह उपयोगकर्ता के विजेट में क्लिक करने या कोई कुंजी दबाने के बाद केवल कुछ सेकंड तक काम करता है, इसलिए इसे बटन और अन्य क्लिक लक्ष्यों से जोड़ें — लोड होने पर इसे स्वचालित रूप से कॉल करने से कुछ नहीं होता। ब्रिज भेजने वाले एंडपॉइंट को अपने तक निजी रखता है और उन ब्राउज़र में फ़ेल-क्लोज़ होता है जो उपयोगकर्ता सक्रियण उपलब्ध नहीं कराते, इसलिए विजेट कोड जाँच को बायपास नहीं कर सकता।
- प्रॉम्प्ट का अधिकार केवल मूल विजेट दस्तावेज़ के पास होता है। विजेट कोड के चलने या फ़्रेम को नेविगेट करने से पहले विश्वसनीय ब्रिज चैट को अपना चैनल एंडपॉइंट प्रदान करता है, चैट केवल उसी पहले प्रस्ताव को स्वीकार करती है और नेविगेशन पर दस्तावेज़ के साथ चैनल समाप्त हो जाता है। बाहरी रूप से अनुमत एम्बेड URL कभी स्वीकार नहीं किए जाते।
- विजेट फ़्रेम चैट ट्रांसक्रिप्ट में दिखाई देना चाहिए और फ़ोकस में होना चाहिए — यह होस्ट द्वारा देखा गया एक अतिरिक्त संकेत है कि उपयोगकर्ता वास्तव में इसी विजेट के साथ इंटरैक्ट कर रहा है।
- ट्रिम करने के बाद टेक्स्ट खाली नहीं होना चाहिए और अधिकतम 4,000 वर्ण का होना चाहिए।
- `/` से शुरू होने वाले प्रॉम्प्ट अस्वीकार कर दिए जाते हैं, इसलिए विजेट कोड `/approve` या `/stop` जैसे चैट कमांड ट्रिगर नहीं कर सकता।
- प्रत्येक विजेट दस्तावेज़ प्रति रोलिंग मिनट अधिकतम 10 प्रॉम्प्ट भेज सकता है; अतिरिक्त प्रॉम्प्ट बिना सूचना के हटा दिए जाते हैं।

स्वीकृत प्रॉम्प्ट ट्रांसक्रिप्ट में सामान्य उपयोगकर्ता संदेशों के रूप में दिखाई देते हैं और विजेट के स्वामी सत्र में सामान्य एजेंट टर्न शुरू करते हैं। विजेट में वापस कोई फ़ीडबैक चैनल नहीं होता: हटाया गया प्रॉम्प्ट बिना सूचना के विफल होता है और विजेट एजेंट का उत्तर नहीं पढ़ सकता।

## सुरक्षा और संग्रहण

विजेट दस्तावेज़ प्रतिबंधात्मक Content Security Policies का उपयोग करते हैं। इनलाइन शैली और स्क्रिप्ट की अनुमति होती है, जबकि बाहरी फ़ेच और संसाधन लोड अवरुद्ध रहते हैं। सभी मार्कअप, शैलियाँ, स्क्रिप्ट और छवि डेटा `widget_code` के भीतर रखें।

Control UI iframe हमेशा `allow-same-origin` को छोड़ देता है, भले ही वैश्विक एम्बेड मोड `trusted` हो, इसलिए विजेट स्क्रिप्ट पैरेंट एप्लिकेशन का ओरिजिन नहीं पढ़ सकतीं। नेटिव क्लाइंट पृथक, अस्थायी वेब व्यू का उपयोग करते हैं और होस्ट किए गए विजेट से बाहर नेविगेशन को अवरुद्ध करते हैं। मुख्य दस्तावेज़ होस्ट भी विजेट को `Content-Security-Policy: sandbox allow-scripts` रिस्पॉन्स हेडर के साथ प्रस्तुत करता है, इसलिए सीधे रेंडरिंग में भी विजेट एप्लिकेशन ओरिजिन के बजाय एक अपारदर्शी ओरिजिन में चलता है। केवल वही विजेट कोड रेंडर करें जिसे आप उस पृथक फ़्रेम में निष्पादित करने के लिए तैयार हैं।

iframe [`gateway.controlUi.embedSandbox`](/hi/web/control-ui#hosted-embeds) का भी पालन करता है। डिफ़ॉल्ट `scripts` स्तर ओरिजिन पृथक्करण बनाए रखते हुए इंटरैक्टिव विजेट का समर्थन करता है।

Canvas प्रत्येक सत्र में अधिकतम 32 विजेट बनाए रखता है (या सत्र उपलब्ध न होने पर प्रत्येक एजेंट के लिए)। कोई अन्य विजेट बनाने पर उस दायरे का सबसे पुराना दस्तावेज़ हटा दिया जाता है।

## संबंधित

- [Control UI के होस्ट किए गए एम्बेड](/hi/web/control-ui#hosted-embeds)
- [Discord Activities](/hi/channels/discord-activities)
- [Canvas Node नियंत्रण](/hi/plugins/reference/canvas)
- [Gateway प्रोटोकॉल क्लाइंट क्षमताएँ](/hi/gateway/protocol#client-capabilities)