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

क्या आप अपने ग्राहक अनुभव को बेहतर बनाना चाहते हैं? Conversational AI मदद कर सकता है। अपने Webflow वेबसाइट में ElevenLabs के कन्वर्सेशनल AI को जोड़कर, विज़िटर्स ऐसे प्राकृतिक बातचीत कर सकते हैं जैसे वे आपकी टीम के सदस्य से बात कर रहे हों।

इस गाइड में, हम आपको ElevenLabs कन्वर्सेशनल AI विजेट को आपके Webflow वेबसाइट में जोड़ने की प्रक्रिया से परिचित कराएंगे, कस्टम HTML और JavaScript का उपयोग करके विजेट को इंटीग्रेट करेंगे।

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

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

1. Webflow खाता: आपको Embed Element का उपयोग करने के लिए एक सक्रिय Core, Growth, Agency, या Freelancer Workspace, या एक Site Plan की आवश्यकता है।
2. ElevenLabs खाता: ElevenLabs में अपने कन्वर्सेशनल AI एजेंट को कॉन्फ़िगर करें और प्रदान किया गया एम्बेड कोड कॉपी करें (जिसमें < script > और < div > स्निपेट्स शामिल हैं)।
3. Webflow के Designer से परिचितता: Webflow में Embed Elements जोड़ने और संपादित करने की बुनियादी समझ सहायक है।

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

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

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

स्टेप 2: विजेट को Webflow पेज में जोड़ें

किसी विशेष पेज पर विजेट दिखाने के लिए, Embed Element का उपयोग करें।

1. Designer में अपना Webflow प्रोजेक्ट खोलें।
2. उस पेज पर जाएं जहाँ आप विजेट को दिखाना चाहते हैं।
3. Elements Panel से, Embed Element को पेज पर अपनी इच्छित जगह पर खींचें।
4. Embed Element के कोड एडिटर में, ElevenLabs एम्बेड कोड से < div > स्निपेट पेस्ट करें।
5. परिवर्तनों को लागू करने के लिए Save & Close पर क्लिक करें।

नोट: Embed Element Designer में आपके विजेट के लिए एक प्लेसहोल्डर के रूप में कार्य करता है। वास्तविक विजेट केवल तब रेंडर होगा जब साइट प्रकाशित होगी।

स्टेप 3: स्क्रिप्ट को ग्लोबली जोड़ें

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

1. अपने Webflow डैशबोर्ड पर जाएं और प्रोजेक्ट सेटिंग्स खोलें।
2. Custom Code टैब पर जाएं।
3. Footer Code सेक्शन में < script > स्निपेट पेस्ट करें। यह सुनिश्चित करता है कि स्क्रिप्ट उन सभी पेजों पर लोड हो जहां विजेट का उपयोग किया गया है।
4. Save Changes पर क्लिक करें।

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

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

महत्वपूर्ण: कस्टम कोड Webflow के Designer में रेंडर नहीं होता। विजेट को लाइव देखने के लिए आपको अपनी साइट प्रकाशित करनी होगी।

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

क्या आपको इंटीग्रेशन सेटअप करने में परेशानी हो रही है? चिंता न करें—नीचे दिए गए सुझाव मदद कर सकते हैं।

1. विजेट नहीं दिख रहा

• कारण: < script > या < div > स्निपेट्स गायब या गलत जगह पर हैं।
• समाधान: सुनिश्चित करें कि < script > स्निपेट Footer Code सेक्शन में है, और < div > स्निपेट सही तरीके से Embed Element में रखा गया है।

2. विजेट का गलत संरेखण

• कारण: Embed Element का गलत प्लेसमेंट या स्टाइलिंग।
• समाधान: Embed Element के आयाम और संरेखण को समायोजित करने के लिए Webflow के Style Panel का उपयोग करें।

3. त्रुटियाँ

• कारण: अन्य स्क्रिप्ट्स के साथ संघर्ष या ब्राउज़र प्रतिबंध।
• समाधान: JavaScript त्रुटियों की पहचान और सुधार के लिए ब्राउज़र के डेवलपर कंसोल का उपयोग करें।

उन्नत सुझाव

यदि आप विजेट को कस्टमाइज़ करना चाहते हैं, विभिन्न डिवाइसों पर परीक्षण करना चाहते हैं, या विजेट को कई पेजों पर पुनः उपयोग करना चाहते हैं, तो यहाँ आपको क्या जानना चाहिए।

• विजेट को कस्टमाइज़ करना: विजेट के आकार, संरेखण, या रंगों को समायोजित करने के लिए Webflow के Style Panel या कस्टम CSS का उपयोग करें।
• विभिन्न डिवाइसों पर परीक्षण: सुनिश्चित करने के लिए Webflow के रिस्पॉन्सिव डिज़ाइन टूल्स का उपयोग करें कि विजेट डेस्कटॉप, टैबलेट, और मोबाइल डिवाइसों पर सहजता से काम करता है।
• विजेट का पुनः उपयोग: यदि आप विजेट को कई पेजों पर उपयोग करने की योजना बना रहे हैं, तो Embed Element को एक Component के रूप में सहेजें। यह लगातार स्टाइलिंग और आसान प्रबंधन की अनुमति देता है।

अंतिम विचार

Webflow में ElevenLabs कन्वर्सेशनल AI विजेट को इंटीग्रेट करना सीधा है, प्लेटफ़ॉर्म के Embed Element और Custom Code फीचर्स के लिए धन्यवाद। चाहे आप एक पेज पर संलग्नता बढ़ाना चाहते हों या अपनी पूरी साइट पर, शुरू करने के लिए ऊपर दिए गए चरणों का पालन करें।

अधिक सहायता के लिए, ElevenLabs सपोर्ट से संपर्क करने में संकोच न करें या अतिरिक्त मार्गदर्शन के लिए Webflow के समुदाय फोरम का अन्वेषण करें।

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

FAQs