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

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

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

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

शुरू करने से पहले, पक्का करें कि आपके पास ये चीज़ें हैं:

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

चरण-दर-चरण गाइड

चरण 1: अपना ElevenLabs विजेट तैयार करें

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

चरण 2: Webflow पेज में विजेट जोड़ें

किसी खास पेज पर विजेट दिखाने के लिए Embed Element का इस्तेमाल करें।

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

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

चरण 3: स्क्रिप्ट को पूरी साइट पर जोड़ें

विजेट सही तरह से काम करे, इसके लिए आपको अपनी साइट पर < script > snippet को सभी पेजों के लिए जोड़ना होगा।

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

चरण 4: पब्लिश करें और टेस्ट करें

1. अपनी साइट को Webflow के staging domain या अपने custom domain पर पब्लिश करें।
2. विजेट के दिखने और उम्मीद के मुताबिक काम करने की पुष्टि करने के लिए अपनी साइट को ब्राउज़र में खोलें।

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

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

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

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

• कारण: < script > या < div > snippets मौजूद नहीं हैं या गलत जगह पर हैं।
• समाधान: पक्का करें कि < script > snippet Footer Code सेक्शन में हो और < div > snippet सही तरीके से Embed Element में रखा गया हो।

2. विजेट सही जगह पर नहीं है

• कारण: Embed Element की जगह या स्टाइलिंग गलत है।
• समाधान: Embed Element के dimensions और alignment को एडजस्ट करने के लिए Webflow का Style Panel इस्तेमाल करें।

3. त्रुटियां

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

उन्नत टिप्स

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

• विजेट को कस्टमाइज़ करना: विजेट का लुक, जैसे साइज़, alignment या रंग, एडजस्ट करने के लिए Webflow का Style Panel या कस्टम CSS इस्तेमाल करें।
• अलग-अलग डिवाइस पर टेस्ट करना: यह पक्का करने के लिए कि विजेट डेस्कटॉप, टैबलेट और मोबाइल डिवाइस पर आसानी से काम करे, Webflow के responsive design tools इस्तेमाल करें।
• विजेट का दोबारा इस्तेमाल: अगर आप विजेट को कई पेजों पर इस्तेमाल करना चाहते हैं, तो Embed Element को Component के रूप में सेव करें। इससे स्टाइलिंग एक जैसी रहती है और मैनेज करना आसान होता है।

अंतिम बातें

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

और मदद के लिए, बेझिझक ElevenLabs सहायता से संपर्क करें या अतिरिक्त मार्गदर्शन के लिए Webflow के कम्युनिटी फ़ोरम देखें। 

अगर आपने अभी तक नहीं किया है, तो आज ही ElevenLabs साइन अप करें और AI Agents Platform के साथ शुरुआत करें। 

अक्सर पूछे जाने वाले सवाल