> ## Documentation Index
> Fetch the complete documentation index at: https://docs2.openclaw.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# विजेट दिखाएँ

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

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

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

Control UI सत्रों में, Canvas विजेट को सत्र डैशबोर्ड पर पिन भी किया जा सकता है। टूल कॉल में `pin: true` सेट करें या मौजूदा ट्रांसक्रिप्ट विजेट पर **डैशबोर्ड पर पिन करें** का उपयोग करें। पिन किया गया HTML उसी समर्पित-ओरिजिन, दोहरे-iframe सैंडबॉक्स होस्ट के पीछे चलता है जिसका उपयोग MCP Apps करते हैं; ब्राउज़र अविश्वसनीय फ़्रेम के भीतर विजेट डेटा बाइंडिंग को कभी रिज़ॉल्व नहीं करता।

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

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

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

मुख्य कार्यान्वयन केवल तभी उपलब्ध होता है जब आरंभ करने वाला Gateway क्लाइंट `inline-widgets` क्षमता घोषित करता है। Control UI और समर्थित नेटिव ऐप यह क्षमता स्वचालित रूप से घोषित करते हैं। कस्टम TLS लीफ़ पिन की आवश्यकता वाले Gateway कनेक्शन के लिए Linux Quick Chat केवल-पाठ बना रहता है, क्योंकि उसका प्लेटफ़ॉर्म WebView उस पिन को बाइंड नहीं कर सकता। 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`: उस सहोदर विजेट का नाम जिसके बाद विजेट रखा जाना है।
* `capabilities`: पिन किए गए विजेट द्वारा अनुरोधित पहुँच। `netOrigins` में सटीक HTTPS ओरिजिन होते हैं; `tools` में `prompt`, अनुमति-सूचीबद्ध रीड बाइंडिंग या सटीक `cron.trigger:<jobId>` कार्रवाई होती है।

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

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

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

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

```html theme={"theme":{"light":"min-light","dark":"min-dark"}}
<button onclick="sendPrompt('विफल परीक्षणों को विस्तार से दिखाएँ')">विफल परीक्षण</button>
```

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

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

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

## डैशबोर्ड क्षमताएँ

ऑपरेटर द्वारा लंबित कार्ड पर दिखाई गई घोषणा की समीक्षा करने के बाद, पिन किए गए विजेट एक टिकट-बाउंड होस्ट API का उपयोग कर सकते हैं:

* `openclaw.prompt.send(text)` के लिए क्षणिक उपयोगकर्ता सक्रियण आवश्यक है और यह कंपोज़र में एक दृश्यमान संदेश पोस्ट करता है। `prompt` टूल अनुदान को घोषित और प्राप्त करने से प्रत्येक क्लिक पर होने वाली अतिरिक्त पुष्टि छोड़ दी जाती है; सत्यापन, फ़ोकस जाँच और दर सीमाएँ फिर भी लागू रहती हैं।
* `openclaw.state.emit(payload)` एक सत्र सूचना जोड़ता है। पेलोड अधिकतम 8 KiB तक सीमित हैं और पाँच सेकंड के भीतर क्लाइंट से होने वाले समान उत्सर्जनों को एक में समेकित किया जाता है।
* `openclaw.data.read(bindingId, params?)` केवल Gateway पर रिज़ॉल्व होता है। अनुदान योग्य बाइंडिंग `sessions.list`, `usage.status`, `usage.cost`, `cron.list`, `cron.status`, `agents.list`, और `health` हैं।
* `openclaw.cron.trigger(jobId)` किसी मौजूदा जॉब को अभी केवल तभी चलाता है, जब सटीक `cron.trigger:<jobId>` क्षमता प्रदान की गई हो।

नेटवर्क एक्सेस होस्ट टूल से अलग है। सटीक HTTPS ओरिजिन को `capabilities.netOrigins` में रखें; स्वीकृति के बाद केवल वे ओरिजिन विजेट के `connect-src` में प्रवेश करते हैं। वाइल्डकार्ड, क्रेडेंशियल, पाथ, क्वेरी स्ट्रिंग और अघोषित ओरिजिन अवरुद्ध रहते हैं। कोई शाब्दिक पोर्ट केवल तभी अनुमत है, जब वह घोषित ओरिजिन का हिस्सा हो।

## सुरक्षा और स्टोरेज

विजेट दस्तावेज़ प्रतिबंधात्मक Content Security Policies का उपयोग करते हैं। इनलाइन स्टाइल और स्क्रिप्ट की अनुमति है, जबकि बाहरी संसाधनों का लोड होना अवरुद्ध रहता है। इनलाइन ट्रांसक्रिप्ट विजेट नेटवर्क से डेटा फ़ेच नहीं कर सकते। पिन किया गया डैशबोर्ड विजेट केवल उन्हीं सटीक HTTPS ओरिजिन से डेटा फ़ेच कर सकता है जिन्हें एजेंट ने घोषित किया और ऑपरेटर ने अनुमति दी।

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

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

स्वीकृत WebRTC डेटा-चैनल इग्रेस अवशिष्ट का दस्तावेज़ीकरण [डैशबोर्ड आर्किटेक्चर](/hi/web/dashboard-architecture#modeled-residual-webrtc-data-channels) में किया गया है।

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

## संबंधित

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