डिप्लॉय करेंवेब

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

जानें कि अपने ब्रांड के अनुसार विजेट का रूप कैसे कस्टमाइज़ करें और html से एजेंट के व्यवहार को कैसे पर्सनलाइज़ करें।

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

आप Claude या किसी अन्य MCP क्लाइंट के ज़रिए hosted MCP server से एजेंट का विजेट कॉन्फ़िगरेशन और शेयर करने योग्य लिंक भी प्राप्त कर सकते हैं।

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

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

हमारे client SDKs में मल्टीमॉडैलिटी पूरी तरह सपोर्टेड है। ज़्यादा जानकारी यहाँ देखें।

विजेट इंटरफ़ेस विकल्प

उपलब्ध मोड:

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

हमारे SDKs के ज़रिए चैट (सिर्फ़ टेक्स्ट) मोड इस्तेमाल करने की ज़्यादा जानकारी के लिए, हमारी चैट मोड गाइड देखें।

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

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

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

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

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

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

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

यह बुनियादी एम्बेड कोड एजेंट के डैशबोर्ड में तय डिफ़ॉल्ट कॉन्फ़िगरेशन के साथ विजेट दिखाएगा। विजेट को और कस्टमाइज़ करने के लिए कई 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>
<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>
<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 रेंडर करता है। फ़िशिंग रोकने के लिए लिंक डिफ़ॉल्ट रूप से सादे टेक्स्ट के रूप में दिखते हैं।

<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 एट्रिब्यूट्स इस्तेमाल किए जा सकते हैं। इन दोनों सुविधाओं को साथ में, अलग-अलग या बिल्कुल भी इस्तेमाल नहीं किया जा सकता है।

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

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

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

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

ज़्यादा जानकारी के लिए हमारी डायनामिक वेरिएबल्स गाइड देखें।

Overrides

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

<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 को खास फ़ील्ड्स के लिए चालू किया जा सकता है और ये पूरी तरह वैकल्पिक हैं।

ज़्यादा जानकारी के लिए हमारी overrides गाइड देखें।

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

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

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

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

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

विजेट का रूप

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

ज़्यादा उन्नत कस्टमाइज़ेशन के लिए, आपको Next.js, React या Python एप्लिकेशन के साथ type-safe ElevenAgents SDKs इस्तेमाल करने चाहिए।

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

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

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

इन टूल्स को काम करते देखने के लिए, इस पेज के निचले दाएँ कोने में एजेंट के साथ कॉल शुरू करें। संदर्भ के लिए सोर्स कोड GitHub पर उपलब्ध है।

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

अपना पहला क्लाइंट टूल बनाने के लिए, क्लाइंट टूल्स गाइड का पालन करें।

क्लाइंट टूल कॉन्फ़िगरेशन

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

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

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");
        },
      };
    });
  }
});

React, Next.js और Python इम्प्लीमेंटेशन के लिए हमारे type-safe SDKs देखें।