> This is a page from the ElevenLabs documentation. For a complete page index, fetch https://elevenlabs.io/docs/llms.txt. For the full documentation in a single file, fetch https://elevenlabs.io/docs/llms-full.txt.

# विजेट कस्टमाइज़ेशन

**विजेट्स** ElevenAgents को किसी भी वेबसाइट में तुरंत इंटीग्रेट करने देते हैं। आप अपने विजेट को UI के ज़रिए या स्टाइलिंग और व्यवहार पर पूरा नियंत्रण पाने के लिए हमारे type-safe [ElevenAgents SDKs](/docs/hi/eleven-api/resources/libraries) के ज़रिए कस्टमाइज़ कर सकते हैं। SDK overrides को UI कस्टमाइज़ेशन पर प्राथमिकता मिलती है।
हमारा विजेट मल्टीमॉडल है और टेक्स्ट व ऑडियो, दोनों को प्रोसेस कर सकता है।

> **Note**
>
> आप Claude या किसी अन्य MCP क्लाइंट के ज़रिए [hosted MCP server](/docs/hi/eleven-agents/operate/hosted-mcp) से
> एजेंट का विजेट कॉन्फ़िगरेशन और शेयर करने योग्य लिंक भी प्राप्त कर सकते हैं।

## मोडैलिटी कॉन्फ़िगरेशन

विजेट आपके उपयोग के अनुसार लचीले इनपुट मोड सपोर्ट करता है। इन विकल्पों को डैशबोर्ड में **Channels** → **Widget** → **Interface** के तहत कॉन्फ़िगर करें।

> **Note**
>
> हमारे client SDKs में मल्टीमॉडैलिटी पूरी तरह सपोर्टेड है। ज़्यादा जानकारी
> [यहाँ](/docs/hi/eleven-api/resources/libraries) देखें।

![विजेट इंटरफ़ेस विकल्प](/docs/_fern-img/cf851dd7a29b4bd23f7d36097ebf57c0bfe1b6a7a3b35687ddea20d9920a93c0.webp)

**उपलब्ध मोड:**

* **केवल वॉइस** (डिफ़ॉल्ट): यूज़र सिर्फ़ बोलकर इंटरैक्ट करते हैं।
* **वॉइस + टेक्स्ट**: यूज़र बातचीत के दौरान वॉइस और टेक्स्ट इनपुट के बीच स्विच कर सकते हैं।
* **चैट मोड**: टेक्स्ट मैसेज से शुरू होने पर बातचीत बिना वॉइस क्षमताओं के चैट (सिर्फ़ टेक्स्ट) मोड में शुरू होती है।

हमारे SDKs के ज़रिए चैट (सिर्फ़ टेक्स्ट) मोड इस्तेमाल करने की ज़्यादा जानकारी के लिए, हमारी [चैट मोड गाइड](/docs/hi/eleven-agents/guides/chat-mode) देखें।

> **Note**
>
> विजेट डिफ़ॉल्ट रूप से केवल वॉइस मोड में होता है। मल्टीमॉडल इंटरैक्शन के लिए टेक्स्ट इनपुट टॉगल चालू करें,
> या टेक्स्ट से शुरू की गई पूरी तरह टेक्स्ट-आधारित बातचीत के लिए केवल टेक्स्ट मोड सपोर्ट चालू करें।

## विजेट एम्बेड करना

> **Note**
>
> विजेट के लिए फ़िलहाल authentication बंद होने वाले पब्लिक एजेंट ज़रूरी हैं। सुनिश्चित करें कि आपके एजेंट सेटिंग्स के
> **Advanced** टैब में यह बंद है।

इस कोड स्निपेट को अपनी वेबसाइट के `<body>` सेक्शन में जोड़ें। साइट-व्यापी उपलब्धता के लिए इसे अपनी मुख्य `index.html` फ़ाइल में रखें:

**`विजेट एम्बेड कोड`**

```html title="विजेट एम्बेड कोड"
<elevenlabs-convai agent-id="<replace-with-agent_7101k5zvyjhmfg983brhmhkd98n6>"></elevenlabs-convai>
<script
  src="https://unpkg.com/@elevenlabs/convai-widget-embed"
  async
  type="text/javascript"
></script>
```

> **Info**
>
> बेहतर सुरक्षा के लिए, अपने एजेंट की **Allowlist** में अनुमत डोमेन तय करें (यह **Security** टैब में है)।
> इससे केवल तय किए गए होस्ट को एक्सेस मिलता है।

## विजेट एट्रिब्यूट्स

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

#### मुख्य कॉन्फ़िगरेशन

```html
<elevenlabs-convai
  agent-id="agent_id"              // Required: Your agent ID
  signed-url="signed_url"          // Alternative to agent-id
  server-location="us"             // Optional: "us" or default
  variant="expanded"               // Optional: Widget display mode
  dismissible="true"               // Optional: Allow the user to minimize the widget
></elevenlabs-convai>
```

#### विज़ुअल कस्टमाइज़ेशन

```html
<elevenlabs-convai
  avatar-image-url="https://..." // Optional: Custom avatar image
  avatar-orb-color-1="#6DB035" // Optional: Orb gradient color 1
  avatar-orb-color-2="#F5CABB" // Optional: Orb gradient color 2
></elevenlabs-convai>
```

#### टेक्स्ट कस्टमाइज़ेशन

```html
<elevenlabs-convai
  action-text="Need assistance?" // Optional: CTA button text
  start-call-text="Begin conversation" // Optional: Start call button
  end-call-text="End call" // Optional: End call button
  expand-text="Open chat" // Optional: Expand widget text
  listening-text="Listening..." // Optional: Listening state
  speaking-text="Assistant speaking" // Optional: Speaking state
></elevenlabs-convai>
```

#### Markdown रेंडरिंग

विजेट एजेंट के जवाबों में markdown रेंडर करता है। फ़िशिंग रोकने के लिए लिंक डिफ़ॉल्ट रूप से सादे टेक्स्ट के रूप में दिखते हैं।

```html
<elevenlabs-convai
  markdown-link-allowed-hosts="example.com"  // Domains where links are clickable (use "*" for all)
  markdown-link-include-www="true"           // Also allow www variants (default: true)
  markdown-link-allow-http="true"            // Allow http:// links (default: true)
  syntax-highlight-theme="dark"              // Code block theme: "dark", "light", or "auto"
></elevenlabs-convai>
```

## रनटाइम कॉन्फ़िगरेशन

रनटाइम पर एजेंट के व्यवहार को कस्टमाइज़ करने के लिए दो और html एट्रिब्यूट्स इस्तेमाल किए जा सकते हैं। इन दोनों सुविधाओं को साथ में, अलग-अलग या बिल्कुल भी इस्तेमाल नहीं किया जा सकता है।

### डायनामिक वेरिएबल्स

डायनामिक वेरिएबल्स से आप अपने एजेंट के मैसेज, सिस्टम प्रॉम्प्ट और टूल्स में रनटाइम वैल्यू इंजेक्ट कर सकते हैं।

```html
<elevenlabs-convai
  agent-id="agent_7101k5zvyjhmfg983brhmhkd98n6"
  dynamic-variables='{"user_name": "John", "account_type": "premium"}'
></elevenlabs-convai>
```

एजेंट के लिए ज़रूरी सभी डायनामिक वेरिएबल्स विजेट में पास करने होंगे।

> **Info**
>
> ज़्यादा जानकारी के लिए हमारी [डायनामिक वेरिएबल्स गाइड](/docs/hi/eleven-agents/customization/personalization/dynamic-variables) देखें।

### Overrides

Overrides से आप रनटाइम पर अपने एजेंट के व्यवहार को पूरी तरह कस्टमाइज़ कर सकते हैं:

```html
<elevenlabs-convai
  agent-id="agent_7101k5zvyjhmfg983brhmhkd98n6"
  override-language="es"
  override-prompt="Custom system prompt for this user"
  override-first-message="Hi! How can I help you today?"
  override-voice-id="axXgspJ2msm3clMCkdW3"
></elevenlabs-convai>
```

Overrides को खास फ़ील्ड्स के लिए चालू किया जा सकता है और ये पूरी तरह वैकल्पिक हैं।

> **Info**
>
> ज़्यादा जानकारी के लिए हमारी [overrides गाइड](/docs/hi/eleven-agents/customization/personalization/overrides) देखें।

## विज़ुअल कस्टमाइज़ेशन

विजेट का रूप, टेक्स्ट कॉन्टेंट, भाषा चयन और बहुत कुछ कस्टमाइज़ करें।

#### डैशबोर्ड से अपडेट करें

डैशबोर्ड में अपना एजेंट खोलें और रूप, अवतार, टेक्स्ट, शर्तें, भाषा सपोर्ट और बहुत कुछ कस्टमाइज़ करने के लिए **Widget** टैब पर जाएँ।

![विजेट कस्टमाइज़ेशन](/docs/_fern-img/1f773d01a3c0925a47f11cf57153db23bc8bc03b93efe5d7085919886ae392cf.webp)

#### CLI से अपडेट करें

#### एजेंट कॉन्फ़िगरेशन पुल करें

```bash
elevenlabs agents pull --agent "<agent-name>"
```

#### \`agent_configs/\<agent-name>.json\` संपादित करें

`platform_settings.widget` के तहत फ़ील्ड्स सेट करें। उदाहरण के लिए, orb के रंग और फ़ीडबैक मोड बदलने के लिए:

```json
{
  "platform_settings": {
    "widget": {
      "variant": "full",
      "placement": "bottom-right",
      "avatar": {
        "type": "orb",
        "color_1": "#6DB035",
        "color_2": "#F5CABB"
      },
      "feedback_mode": "during",
      "bg_color": "#ffffff",
      "text_color": "#000000",
      "btn_color": "#000000",
      "btn_text_color": "#ffffff"
    }
  }
}
```

#### अपने बदलाव पुश करें

```bash
elevenlabs agents push --agent "<agent-name>"
```

#### API से अपडेट करें

```python
from elevenlabs import ElevenLabs

elevenlabs = ElevenLabs()

elevenlabs.conversational_ai.agents.update(
    agent_id="agent_7101k5zvyjhmfg983brhmhkd98n6",
    platform_settings={
        "widget": {
            "variant": "full",
            "placement": "bottom-right",
            "avatar": {
                "type": "orb",
                "color_1": "#6DB035",
                "color_2": "#F5CABB",
            },
            "feedback_mode": "during",
        },
    },
)
```

```typescript
import { ElevenLabsClient } from "@elevenlabs/elevenlabs-js";

const elevenlabs = new ElevenLabsClient();

await elevenlabs.conversationalAi.agents.update("agent_7101k5zvyjhmfg983brhmhkd98n6", {
  platformSettings: {
    widget: {
      variant: "full",
      placement: "bottom-right",
      avatar: {
        type: "orb",
        color1: "#6DB035",
        color2: "#F5CABB",
      },
      feedbackMode: "during",
    },
  },
});
```

#### रूप

अपने ब्रांड की पहचान के अनुसार विजेट के रंग और आकार कस्टमाइज़ करें।

![विजेट का रूप](/docs/_fern-files/elevenlabs.docs.buildwithfern.com/0c07c4569f8c5ad3b93933711c268601af411085aa7df1bb8e8ec547a01f2d8e/assets/images/conversational-ai/appearance.gif)

#### फ़ीडबैक

एजेंट के प्रदर्शन को बेहतर बनाने के लिए यूज़र इनसाइट्स जुटाएँ। इसका इस्तेमाल आपके एजेंट के नॉलेज-बेस और सिस्टम प्रॉम्प्ट को फाइन-ट्यून करने के लिए किया जा सकता है।

![विजेट फ़ीडबैक](/docs/_fern-img/d7117399e23f06522b3112ff5c5ead23f66d3ea4700c011ff75e5dcd6cce875c.webp)

**कलेक्शन मोड्स**

* **कोई नहीं**: फ़ीडबैक कलेक्शन पूरी तरह बंद करें।
* **बातचीत के दौरान**: बातचीत के दौरान रीयल-टाइम फ़ीडबैक सपोर्ट करें। कमियों की बेहतर पहचान के लिए फ़ीडबैक ट्रिगर करने वाला एजेंट रिस्पॉन्स जैसे अतिरिक्त मेटाडेटा भी इकट्ठा किया जाएगा।
* **बातचीत के बाद**: बातचीत के बाद एक ही फ़ीडबैक प्रॉम्प्ट दिखाएँ।

> **Note**
>
> कस्टम SDK इम्प्लीमेंटेशन का उपयोग करते समय [API](/docs/hi/eleven-agents/api-reference/conversations/create) से प्रोग्रामेटिक रूप से फ़ीडबैक भेजें।

#### अवतार

वॉइस orb कॉन्फ़िगर करें या अपना अवतार दें।

![विजेट orb कस्टमाइज़ेशन](/docs/_fern-files/elevenlabs.docs.buildwithfern.com/7530f28ad124fc4533911eca4a2269ac1df19dffd2b6dab1e8b56d95cc1eb53c/assets/images/conversational-ai/avatar.gif)

**उपलब्ध विकल्प**

* **Orb**: दो ग्रेडिएंट रंग चुनें (जैसे, #6DB035 & #F5CABB)।
* **लिंक/इमेज**: कस्टम अवतार इमेज इस्तेमाल करें।

#### डिस्प्ले टेक्स्ट

दिखाए जाने वाले सभी विजेट टेक्स्ट एलिमेंट्स कस्टमाइज़ करें, जैसे बटन लेबल बदलने के लिए।

![विजेट टेक्स्ट कॉन्टेंट](/docs/_fern-files/elevenlabs.docs.buildwithfern.com/4ad66ecae5df29e587afcf6e1898ccb41ca197abdaa2fde3ada4b10d256f8b7c/assets/images/conversational-ai/textcontents.gif)

#### शर्तें

बातचीत से पहले कस्टम नियम और शर्तें दिखाएँ।

![शर्तें सेटअप](/docs/_fern-img/58dfd0abf92615f85c7314e8baec1bf4dd401cc88a04f1096baf817f05edb39d.webp)

**उपलब्ध विकल्प**

* **शर्तों का कॉन्टेंट**: अपनी पॉलिसी का टेक्स्ट फ़ॉर्मैट करने के लिए Markdown इस्तेमाल करें।
* **लोकल स्टोरेज की**: लौटकर आने वाले यूज़र्स को फिर से प्रॉम्प्ट करने से बचने के लिए एक की (जैसे, "terms_accepted")।

**उपयोग**

कॉल शुरू करने से पहले यूज़र्स को मोडल में शर्तें दिखाई जाती हैं:

![शर्तों का डिस्प्ले](/docs/_fern-img/ca7511c60f1f6a29ee8bdd5c40083c73ef701f6cfd7ce1672161d73559a0c9b0.webp)

शर्तें Markdown में लिखी जा सकती हैं, जिससे आप:

* बाहरी पॉलिसी के लिंक जोड़ सकते हैं
* हेडर और सूचियों के साथ टेक्स्ट फ़ॉर्मैट कर सकते हैं
* ज़ोर और स्टाइलिंग शामिल कर सकते हैं

Markdown के बारे में ज़्यादा मदद के लिए [CommonMark सहायता गाइड](https://commonmark.org/help/) देखें।

> **Info**
>
> स्वीकार किए जाने के बाद, स्टेटस लोकली स्टोर होता है और यूज़र को अगली विज़िट पर फिर से प्रॉम्प्ट नहीं किया जाएगा।

#### भाषा

विजेट में बहुभाषी सपोर्ट चालू करें।

![विजेट भाषा](/docs/_fern-files/elevenlabs.docs.buildwithfern.com/049e871eb0f609b071599e405c3da76351ee4ea38e52400fc416194930c42327/assets/images/conversational-ai/language.gif)

> **Note**
>
> भाषा चयन चालू करने के लिए, आपको पहले अपने एजेंट में [अतिरिक्त भाषाएँ](/docs/hi/eleven-agents/customization/voice/customization/language) जोड़नी होंगी।

#### म्यूटिंग

यूज़र्स को विजेट में अपना ऑडियो म्यूट करने दें।

![विजेट का म्यूट बटन](/docs/_fern-img/e6968e4ba057d98857fb41125bb57f92570ed7c49711ce423add1ea558de5919.webp)

म्यूट बटन जोड़ने के लिए, एजेंट की `widget`
सेटिंग्स के `interface` कार्ड में इसे चालू करें।

![विजेट का म्यूट बटन](/docs/_fern-img/7db9df78926f3f3b3db7c286d4efc033356ec9b79cabe20670f65a52a624fae8.webp)

#### शेयर करने योग्य पेज

अपने पब्लिक विजेट लैंडिंग पेज (शेयर करने योग्य लिंक) को कस्टमाइज़ करें।

![विजेट का शेयर करने योग्य पेज](/docs/_fern-img/9d8b23aa816f4b7d727b3c0511ef91d046796bb57b8299382c53b6bcff746c50.webp)

**उपलब्ध विकल्प**

* **विवरण**: कॉल के उद्देश्य को समझाने वाला एक छोटा पैराग्राफ दें।

---

## उन्नत इम्प्लीमेंटेशन

> **Note**
>
> ज़्यादा उन्नत कस्टमाइज़ेशन के लिए, आपको Next.js, React या Python एप्लिकेशन के साथ type-safe [ElevenAgents SDKs](/docs/hi/eleven-api/resources/libraries) इस्तेमाल करने चाहिए।

### क्लाइंट टूल्स

क्लाइंट टूल्स आपको इवेंट लिसनर्स जोड़कर विजेट की फ़ंक्शनैलिटी बढ़ाने देते हैं। इससे विजेट ऐसे काम कर सकता है:

* यूज़र को किसी खास पेज पर रीडायरेक्ट करना
* अपनी सपोर्ट टीम को ईमेल भेजना
* यूज़र को किसी बाहरी URL पर रीडायरेक्ट करना

इन टूल्स को काम करते देखने के लिए, इस पेज के निचले दाएँ कोने में एजेंट के साथ कॉल शुरू करें। संदर्भ के लिए [सोर्स कोड GitHub पर उपलब्ध है](https://github.com/elevenlabs/elevenlabs-dx/blob/main/fern/assets/scripts/widget.js)।

#### क्लाइंट टूल बनाना

अपना पहला क्लाइंट टूल बनाने के लिए, [क्लाइंट टूल्स गाइड](/docs/hi/eleven-agents/customization/tools/client-tools) का पालन करें।

#### उदाहरण: \`redirectToExternalURL\` टूल बनाना

![क्लाइंट टूल कॉन्फ़िगरेशन](/docs/_fern-img/d800b8c60cba2ab0a1d0aaaecc0652a678998a4161adaf10d83df51b928a7734.webp)

#### इम्प्लीमेंटेशन का उदाहरण

नीचे आपके JavaScript कोड में विजेट द्वारा ट्रिगर किए गए `redirectToExternalURL` टूल को हैंडल करने का उदाहरण है:

**`index.js`**

```javascript title="index.js"
document.addEventListener("DOMContentLoaded", () => {
  const widget = document.querySelector("elevenlabs-convai");

  if (widget) {
    // Listen for the widget's "call" event to trigger client-side tools
    widget.addEventListener("elevenlabs-convai:call", (event) => {
      event.detail.config.clientTools = {
        // Note: To use this example, the client tool called "redirectToExternalURL" (case-sensitive) must have been created with the configuration defined above.
        redirectToExternalURL: ({ url }) => {
          window.open(url, "_blank", "noopener,noreferrer");
        },
      };
    });
  }
});
```

> **Info**
>
> React, Next.js और Python इम्प्लीमेंटेशन के लिए हमारे type-safe [SDKs](/docs/hi/eleven-api/resources/libraries) देखें।