AI चैट विजेट कोड: किसी भी वेबसाइट पर सपोर्ट असिस्टेंट जोड़ें
एक script टैग कॉपी करें और अपनी साइट पर लाइव जवाब देने वाला AI चैट असिस्टेंट लगाएं। यह गाइड एम्बेड कोड, उसके विकल्प और लाइव होने से पहले की जांच समझाती है।
प्रकाशित:
AI चैट विजेट आपके आगंतुकों को उसी पेज पर जवाब देता है जिसे वे पढ़ रहे हैं। api14 के साथ पूरा इंटीग्रेशन बस एक script टैग है: आप डैशबोर्ड में विजेट डिज़ाइन करते हैं, कोड कॉपी करते हैं और उसे अपने HTML में चिपका देते हैं। न कोई SDK इंस्टॉल करना है, न सर्वर पर कोई कोड लिखना है।
चैट विजेट क्या करता है
चैट विजेट एक छोटी बातचीत विंडो है जो आपके चुने हुए मॉडल के जवाब लाइव स्ट्रीम करती है। यह आपके लिखे निजी निर्देशों का पालन करता है, जिन्हें आगंतुक कभी नहीं देखते, इसलिए यह सपोर्ट एजेंट, सेल्स असिस्टेंट या आपके डॉक्यूमेंटेशन के गाइड की तरह काम कर सकता है। जवाबों में बुनियादी फ़ॉर्मेटिंग (पैराग्राफ़, सूचियां, बोल्ड, कोड और लिंक) काम करती है, रोकें बटन लंबे जवाब को बीच में रोक देता है, और जब आगंतुक उसी टैब में एक पेज से दूसरे पेज पर जाता है तब भी बातचीत बनी रहती है।
विजेट कोड
विजेट में विजेट सेव करने के बाद, एडिटर उसका एम्बेड कोड दिखाता है:
<script src="https://api14.com/widget.js" data-widget="YOUR_WIDGET_ID" async></script>
टैग को <body> के भीतर वहां रखें जहां चैट दिखनी चाहिए। दो वैकल्पिक एट्रिब्यूट तय करते हैं कि विजेट कहां और कैसे दिखे:
| एट्रिब्यूट | यह क्या करता है |
|---|---|
data-target | उस एलिमेंट का CSS सिलेक्टर जिसके भीतर विजेट दिखे, जैसे #support। |
data-height | पेज के भीतर लगे विजेट की ऊंचाई, जैसे 520px। चैट की डिफ़ॉल्ट ऊंचाई 480px है। |
अगर आप स्क्रीन के कोने में खुलने वाला बटन पसंद करते हैं, तो एडिटर में तैरता बटन स्थान चुनें। कोड वही रहता है।
लाइव चैट असिस्टेंट तक चार कदम
- मॉडल चुनें। कैटलॉग का कोई भी चैट मॉडल चलेगा। पिकर हर मॉडल की कीमत दिखाता है, इसलिए आप किसी तेज़ और सस्ते मॉडल से शुरू करके बाद में अपनी साइट को छुए बिना उसे बदल सकते हैं।
- API key चुनें। हर विजेट आपकी किसी एक API key के तहत चलता है। कोई मौजूदा key चुनें या सूची का आखिरी विकल्प, नई API key बनाएं, इस्तेमाल करके सिर्फ़ इस विजेट के लिए key बनाएं। key की सीमाएं विजेट पर लागू होती हैं, और key खुद कभी ब्राउज़र तक नहीं पहुंचती।
- निर्देश और टेक्स्ट लिखें। शीर्षक, स्वागत संदेश, इनपुट संकेत पाठ और बटन का पाठ तय करें। निजी निर्देश जोड़ें जो आपके प्रोडक्ट और आपकी चाही गई शैली का वर्णन करें।
- अपने डोमेन की अनुमति दें। सेटिंग्स, विजेट साइटें में वे साइटें दर्ज करें जहां विजेट चल सकता है। किसी भी दूसरी साइट से आने वाले अनुरोध अस्वीकार कर दिए जाते हैं।
यह आपका पेज क्यों नहीं बिगाड़ता
विजेट एक अलग Shadow DOM के भीतर रेंडर होता है। आपकी CSS चैट विंडो में नहीं जाती और विजेट आपके पेज की स्टाइल नहीं बदलता। यह असिंक्रोनस तरीके से लोड होता है, इसलिए आपके बाकी कंटेंट को दिखने से नहीं रोकता।
लाइव होने से पहले
- एडिटर में पूर्वावलोकन खोलें और वही सवाल पूछें जो आपके ग्राहक सच में पूछते हैं। पूर्वावलोकन आपकी बिना सेव की गई सेटिंग्स के साथ असली अनुरोध चलाता है।
- विजेट के लिए दैनिक खर्च सीमा तय करें ताकि कोई व्यस्त दिन आपको चौंका न दे।
- जांच लें कि आपका बैलेंस अनुमानित ट्रैफ़िक के लिए काफ़ी है। आगंतुकों के अनुरोध मॉडल की सामान्य कीमत पर आपके USD बैलेंस से कटते हैं।
आज़माने के लिए तैयार हैं? विजेट पेज पर बिना अकाउंट के चैट विजेट डिज़ाइन करें, फिर विजेट डॉक्स में पूरा रेफ़रेंस पढ़ें।