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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

समस्या 3: स्क्रिप्ट एरर

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

उन्नत टिप्स

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

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

अंतिम बातें 

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

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