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

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

इस गाइड में, हम आपको आपके Framer वेबसाइट में विजेट जोड़ने के चरणों के बारे में बताएंगे। आप साइट-वाइड या पेज-विशिष्ट विजेट्स को कॉन्फ़िगर करना और सामान्य समस्याओं का समाधान करना सीखेंगे।

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

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

1. Framer खाता: कस्टम कोड जोड़ने की क्षमता के साथ Framer प्रोजेक्ट तक पहुंच (पेड प्लान्स पर उपलब्ध)।
2. ElevenLabs खाता: अपने कन्वर्सेशनल AI एजेंट को कॉन्फ़िगर करें और उसका एम्बेड कोड कॉपी करें (< script > और < div > स्निपेट्स सहित)।
3. Framer की जानकारी: Framer के साइट सेटिंग्स और एम्बेड एलिमेंट्स की बुनियादी समझ

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

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

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

चरण 2: Framer की साइट सेटिंग्स में स्क्रिप्ट जोड़ें

1. अपना Framer प्रोजेक्ट खोलें।
2. ऊपरी-दाएं कोने में, प्रोजेक्ट सेटिंग्स पर क्लिक करें।
3. जनरल टैब पर जाएं और कस्टम कोड सेक्शन तक स्क्रॉल करें।
4. अपने ElevenLabs एम्बेड कोड से < script > स्निपेट को < body > टैग के अंत में पेस्ट करें।
5. अपने परिवर्तनों को सहेजें। यह चरण सुनिश्चित करता है कि आपकी साइट के लिए आवश्यक स्क्रिप्ट लोड हो।

चरण 3: किसी विशिष्ट पेज पर विजेट जोड़ें

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

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

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

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

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

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

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

समस्या 2: विजेट केवल आंशिक रूप से दिखाई दे रहा है

• कारण: एम्बेड एलिमेंट का आकार या स्थिति गलत है।
• समाधान: Framer एडिटर में एम्बेड एलिमेंट के आयाम और संरेखण को समायोजित करें।

समस्या 3: स्क्रिप्ट त्रुटियां

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

उन्नत सुझाव

अधिक उन्नत कस्टमाइजेशन विकल्पों की तलाश कर रहे हैं? ये सुझाव मदद कर सकते हैं।

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

अंतिम विचार

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

साइन अप करें आज ही कन्वर्सेशनल AI के लिए शुरू करने के लिए।