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

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

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

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

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

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

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

1. Webflow खाता: आपको Embed Element तक पहुँचने के लिए एक सक्रिय Core, Growth, Agency, या Freelancer Workspace, या एक Site Plan की आवश्यकता है।
2. ElevenLabs खाता: ElevenLabs में अपने कन्वर्सेशनल
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 का गलत स्थान या स्टाइलिंग।
• समाधान: Webflow के Style Panel का उपयोग करके Embed Element के आयाम और संरेखण को समायोजित करें।

3. त्रुटियाँ

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

उन्नत टिप्स

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

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

अंतिम विचार

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

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

यदि आपने अभी तक नहीं किया है, साइन अप करें ElevenLabs

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

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

FAQs