नेविगेशन पर जाएँ
डिप्लॉय करेंवेब

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

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

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

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

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

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

हमारे क्लाइंट SDKs में मल्टीमोडैलिटी पूरी तरह सपोर्टेड है, और जानें यहाँ।

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

उपलब्ध मोड:

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

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

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

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

विजेट के लिए फ़िलहाल ऑथेंटिकेशन बंद किए गए सार्वजनिक एजेंट चाहिए। सुनिश्चित करें कि आपके एजेंट सेटिंग्स के एडवांस्ड टैब में यह बंद है।

इस कोड स्निपेट को अपनी वेबसाइट के <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>

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

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

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

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

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

ओवरराइड्स

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

<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>

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

हमारी ओवरराइड्स गाइड में और जानें।

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

विजेट का रूप, टेक्स्ट कॉन्टेंट, भाषा चयन और अन्य चीज़ें कस्टमाइज़ करें।

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

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

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

विजेट का रूप

रिच कॉन्टेंट

रिच कॉन्टेंट एजेंट को अपने मैसेज के साथ इंटरैक्टिव कंपोनेंट्स में जवाब देने देता है। इसे डैशबोर्ड में चैनल्स → विजेट → रिच कॉन्टेंट के अंतर्गत कॉन्फ़िगर करें।

विजेट रिच कॉन्टेंट सेटिंग्स

रिच कॉन्टेंट टेक्स्ट बातचीत में दिखता है, और वॉइस बातचीत में तब दिखता है, जब बातचीत का रीयलटाइम ट्रांसक्रिप्ट इंटरफ़ेस के अंतर्गत सक्षम हो। यह सिर्फ़ एम्बेड किए गए विजेट में उपलब्ध है।

क्विक रिप्लाई ऐसे बटन हैं जिन पर यूज़र टाइप करने के बजाय टैप कर सकते हैं। यूज़र के टैप करने पर, उसका लेबल यूज़र के अगले मैसेज के रूप में भेजा जाता है।

क्विक रिप्लाई

एजेंट द्वारा सुझाए गए

एजेंट बातचीत के दौरान अधिकतम तीन जवाब सुझाता है, जैसे किसी विकल्प की पुष्टि करने या अगले कदम बताने के लिए।

पहले मैसेज के जवाब

एजेंट के पहले मैसेज के साथ दिखाने के लिए पहले मैसेज के जवाब के अंतर्गत अधिकतम तीन जवाब जोड़ें, ताकि यूज़र टैप से बातचीत शुरू कर सकें। क्रम बदलने के लिए उन्हें ड्रैग करें।

ये जवाब स्थिर होते हैं: हर पहले मैसेज के साथ दिखते हैं और एजेंट इन्हें नहीं चुनता। आपके अन्य भाषा प्रीसेट्स के साथ इनका भी अनुवाद हो जाता है।

एजेंट रिच कॉन्टेंट का उपयोग कैसे करता है

पहले मैसेज के जवाबों को छोड़कर, एजेंट हर टर्न में तय करता है कि क्विक रिप्लाई या कैरोसेल दिखाना है या नहीं। जिस जवाब के लिए किसी कंपोनेंट की ज़रूरत नहीं होती, वह सादे टेक्स्ट में रहता है। इनके दिखने का समय और तरीका तय करने के लिए, एजेंट के सिस्टम प्रॉम्प्ट में इसका विवरण दें।

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

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

अधिक उन्नत कस्टमाइज़ेशन के लिए, आपको Next.js, React या Python एप्लिकेशन के साथ टाइप-सेफ 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 इम्प्लीमेंटेशन के लिए हमारे टाइप-सेफ SDKs देखें।