Eleven v3 अल्फा का परिचय

v3 आजमाएं
कॉन्टेंट पर जाएं
ब्लॉग

अपने WordPress वेबसाइट में ElevenLabs कन्वर्सेशनल AI विजेट कैसे जोड़ें

जानें कि अपने WordPress वेबसाइट में कन्वर्सेशनल AI क्षमताएँ कैसे जोड़ें।

A speech bubble with a circuit board pattern inside.

ElevenLabs’ Conversational AI एक शक्तिशाली ग्राहक सहायता टूल है जो इंटरएक्टिव, AI-ड्रिवन अनुभव बनाता है जो संलग्नता बढ़ाता है। यदि आपके पास एक वर्डप्रेस वेबसाइट है तो आप आसानी से कस्टम HTML और JavaScript को इंटीग्रेट कर सकते हैं, जिसमें ElevenLabs का कन्वर्सेशनल AI जैसे डायनामिक फीचर्स शामिल हैं।

इस गाइड में, हम आपको दिखाएंगे कि कैसे कन्वर्सेशनल AI विजेट को अपने वर्डप्रेस साइट पर जोड़ें, विशेष पृष्ठों के लिए कस्टम HTML ब्लॉक्स का उपयोग करके और वैश्विक कार्यक्षमता के लिए कोड इंजेक्शन का उपयोग करके।

Conversational AI
कन्वर्सेशनल AI

Flowchart diagram with black and white nodes labeled "USER," "SPEECH TO TEXT," "TEXT TO SPEECH," "AGENT," "LLM," "MONITORING," and "FUNCTION CALLING" connected by curved lines on a blue gradient background.

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

शुरू करने से पहले

शुरू करने से पहले, सुनिश्चित करें कि आपके पास निम्नलिखित हैं:

  1. वर्डप्रेस प्लान: WordPress.com यूज़र्स के लिए, कस्टम JavaScript जोड़ने के लिए बिजनेस या कॉमर्स प्लान की आवश्यकता होती है। सेल्फ-होस्टेड वर्डप्रेस यूज़र्स बिना इन प्रतिबंधों के कोड जोड़ सकते हैं।
  2. ElevenLabs खाता: अपने कन्वर्सेशनल AI एजेंट को ElevenLabs में कॉन्फ़िगर करें और एम्बेड कोड कॉपी करें, जिसमें < script > और < div > स्निपेट्स शामिल हैं।
  3. बेसिक वर्डप्रेस ज्ञान: ब्लॉक्स जोड़ने, पेज एडिट करने या प्लगइन्स का उपयोग करने की जानकारी सहायक होती है।

स्टेप-बाय-स्टेप गाइड

स्टेप 1: अपने ElevenLabs विजेट को तैयार करें

  1. अपने ElevenLabs खाते में लॉग इन करें।
  2. कन्वर्सेशनल AI सेक्शन में जाएं।
  3. अपने AI एजेंट को कॉन्फ़िगर करें और एम्बेड कोड कॉपी करें, जिसमें शामिल हैं:
    • विजेट की कार्यक्षमता लोड करने के लिए एक < script > स्निपेट।
    • जहां विजेट दिखाई देगा उसे परिभाषित करने के लिए एक < div > स्निपेट।

स्टेप 2: कस्टम HTML ब्लॉक्स का उपयोग करके एक विशेष पृष्ठ पर विजेट जोड़ें

किसी विशेष पृष्ठ पर विजेट दिखाने के लिए, वर्डप्रेस के कस्टम HTML ब्लॉक का उपयोग करें।

  1. अपने वर्डप्रेस डैशबोर्ड में लॉग इन करें।
  2. पेजेस पर जाएं और या तो एक नया पेज बनाएं या एक मौजूदा पेज को एडिट करें।
  3. एक नया ब्लॉक जोड़ने के लिए + आइकन पर क्लिक करें।
  4. ब्लॉक विकल्पों से कस्टम HTML खोजें और चुनें।
  5. अपने ElevenLabs एम्बेड कोड से < div > स्निपेट को ब्लॉक में पेस्ट करें।
  6. प्रीव्यू पर क्लिक करें यह सुनिश्चित करने के लिए कि विजेट सही तरीके से रेंडर हो रहा है।
  7. पेज को प्रकाशित या अपडेट करें ताकि बदलाव लाइव हो सकें।

स्टेप 3: प्लगइन या थीम सेटिंग्स का उपयोग करके स्क्रिप्ट को वैश्विक रूप से जोड़ें

सुनिश्चित करने के लिए कि विजेट सही तरीके से काम करता है, आपको < script > स्निपेट को वैश्विक रूप से शामिल करना होगा।

विकल्प A: प्लगइन का उपयोग करना (गैर-डेवलपर्स के लिए अनुशंसित)

  1. Header Footer Code Manager जैसे प्लगइन को इंस्टॉल और सक्रिय करें।
  2. प्लगइन सेटिंग्स पर जाएं और एक नया कोड स्निपेट बनाएं।
  3. फुटर सेक्शन में < script > स्निपेट पेस्ट करें।
  4. स्निपेट को सभी पेजेस पर चलाने के लिए सेट करें।
  5. अपने बदलावों को सेव करें।

विकल्प B: स्क्रिप्ट को सीधे अपनी थीम में जोड़ना

  1. अपने वर्डप्रेस डैशबोर्ड में Appearance > Theme Editor पर जाएं।
  2. अपनी सक्रिय थीम की footer.php फ़ाइल खोलें।
  3. बंद होने वाले < /body > टैग से ठीक पहले < script > स्निपेट पेस्ट करें।
  4. फ़ाइल को सेव करें।

स्टेप 4: प्रकाशित करें और परीक्षण करें

  1. उस पेज पर जाएं जहां आपने विजेट जोड़ा है यह सुनिश्चित करने के लिए कि यह सही तरीके से दिखाई दे रहा है और काम कर रहा है।
  2. विजेट को कई डिवाइस और ब्राउज़र्स पर टेस्ट करें ताकि यह सुनिश्चित हो सके कि यह बिना किसी रुकावट के काम कर रहा है।

सामान्य समस्याएं और समाधान

विजेट को चालू करने में परेशानी हो रही है? ये टिप्स मदद कर सकते हैं।

समस्या 1: विजेट प्रदर्शित नहीं हो रहा

  • कारण: < script > या < div > स्निपेट्स गायब या गलत जगह पर हैं।
  • समाधान: सुनिश्चित करें कि < script > को वैश्विक रूप से जोड़ा गया है और < div > पेज पर सही जगह पर है।

समस्या 2: विजेट गलत संरेखित है

  • कारण: ब्लॉक संरेखण या स्टाइलिंग की कमी।
  • समाधान: वर्डप्रेस के ब्लॉक संरेखण टूल्स का उपयोग करें या विजेट को सही तरीके से पोजिशन करने के लिए कस्टम CSS जोड़ें।

समस्या 3: प्लगइन संघर्ष

  • कारण: अन्य प्लगइन्स JavaScript निष्पादन में हस्तक्षेप कर रहे हैं।
  • समाधान: संघर्ष की पहचान करने के लिए एक-एक करके प्लगइन्स को निष्क्रिय करें।

उन्नत टिप्स

विजेट को अपनी इच्छानुसार ऑपरेट करने में मदद के लिए इन टिप्स को देखें। 

  • विजेट को कस्टमाइज़ करना: वर्डप्रेस के Customize > Additional CSS सेक्शन का उपयोग करके विजेट को स्टाइल करें, यह सुनिश्चित करते हुए कि यह आपकी साइट के डिज़ाइन से मेल खाता है।
  • डिवाइसों पर परीक्षण: डेस्कटॉप, टैबलेट, और मोबाइल डिवाइसों पर विजेट का परीक्षण करें ताकि एक समान यूज़र अनुभव सुनिश्चित हो सके।
  • पेज-विशिष्ट विजेट्स: यदि आप चाहते हैं कि विजेट केवल विशेष पृष्ठों पर दिखाई दे, तो < script > स्निपेट को वैश्विक रूप से जोड़ने से बचें। इसके बजाय, इसे उन पृष्ठों को लक्षित करने वाले प्लगइन या ब्लॉक के भीतर शामिल करें।

अंतिम विचार

अपने वर्डप्रेस वेबसाइट पर ElevenLabs कन्वर्सेशनल AI विजेट जोड़ना AI-ड्रिवन इंटरैक्शन के साथ विज़िटर्स को संलग्न करने का एक प्रभावी तरीका है। चाहे आप इसे एकल पृष्ठ पर एम्बेड कर रहे हों या अपनी पूरी साइट पर, वर्डप्रेस आपको सहज इंटीग्रेशन के लिए आवश्यक टूल्स प्रदान करता है।

यहां बताए गए चरणों का पालन करें, अपनी इम्प्लीमेंटेशन को अच्छी तरह से टेस्ट करें, और आवश्यकतानुसार समायोजन करें। यदि आपको समस्याएं आती हैं, तो ElevenLabs सपोर्ट से सहायता प्राप्त करने में संकोच न करें।

या, यदि आपने अभी तक नहीं किया है, आज ही ElevenLabs के लिए साइन अप करें और प्रक्रिया शुरू करें।

नहीं, HTML ब्लॉक्स जोड़ने या प्लगइन्स का उपयोग करने की बुनियादी जानकारी पर्याप्त है। उन्नत संपादन के लिए न्यूनतम कोडिंग ज्ञान की आवश्यकता हो सकती है।

नहीं, मुफ्त WordPress.com प्लान JavaScript या कस्टम कोड का समर्थन नहीं करते। बिजनेस या कॉमर्स प्लान में अपग्रेड करें या सेल्फ-होस्टेड वर्डप्रेस का उपयोग करें।

सुनिश्चित करें कि