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

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

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

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

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

1. Framer अकाउंट: ऐसा Framer प्रोजेक्ट, जिसमें कस्टम कोड जोड़ने की सुविधा हो (पेड प्लान में उपलब्ध)।
2. ElevenLabs अकाउंट: अपना कन्वर्सेशनल AI एजेंट कॉन्फ़िगर करें और उसका embed code कॉपी करें (जिसमें < script > और < div > snippets शामिल हों)।
3. Framer की जानकारी: Framer की Site Settings और Embed Elements की बुनियादी समझ

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

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

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

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

1. अपना Framer प्रोजेक्ट खोलें।
2. ऊपर दाएं कोने में Project Settings पर क्लिक करें।
3. General टैब में जाएं और नीचे स्क्रॉल करके Custom Code सेक्शन तक पहुंचें।
4. अपने ElevenLabs embed code का < script > snippet, End of < body > tag फ़ील्ड में पेस्ट करें।
5. अपने बदलाव सेव करें। इससे यह पक्का होता है कि आपकी साइट के लिए ज़रूरी script लोड हो जाए।

चरण 3: किसी खास पेज पर विजेट जोड़ें

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

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

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

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

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

समस्या 1: विजेट दिखाई नहीं दे रहा

• कारण: < script > या < div > snippet मौजूद नहीं है या गलत जगह रखा गया है।
• समाधान: पक्का करें कि < script > snippet को Site Settings के End of < body > tag फ़ील्ड में और < div > snippet को Embed Element में जोड़ा गया है।

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

• कारण: Embed Element का आकार या स्थान गलत है।
• समाधान: Framer Editor में Embed Element के आकार और अलाइनमेंट को समायोजित करें।

समस्या 3: Script errors

• कारण: आपस में टकराती scripts या ब्लॉक किए गए बाहरी संसाधन।
• समाधान: JavaScript errors देखने के लिए ब्राउज़र कंसोल खोलें। पक्का करें कि Framer को बाहरी scripts लोड करने की अनुमति है।

उन्नत सुझाव

ज़्यादा उन्नत कस्टमाइज़ेशन विकल्प चाहिए? ये सुझाव मदद करेंगे। 

• विजेट को कस्टमाइज़ करना: विजेट को स्टाइल करने और उसे अपनी वेबसाइट के डिज़ाइन के साथ सहज रूप से जोड़ने के लिए कस्टम CSS का इस्तेमाल करें।
• अलग-अलग डिवाइस पर टेस्ट करना: Framer के responsive design tools से विजेट को मोबाइल, टैबलेट और डेस्कटॉप व्यू में टेस्ट करना आसान है, ताकि सही scaling पक्की हो सके।
• खास पेजों पर विजेट जोड़ना: विजेट को सिर्फ़ खास पेजों पर शामिल करने के लिए, चुने गए पेजों पर एक Embed Element में < div > snippet जोड़ें और पक्का करें कि < script > snippet Site Settings में मौजूद है।

अंतिम बातें 

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

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