थीम कोड में बदलाव किए बिना चैट विंडो खोलने के लिए डीप लिंक का उपयोग कैसे करें

आप अपनी थीम के कोड में बदलाव किए बिना डीप लिंक का उपयोग करके चैट विंडो खोल सकते हैं। Shopify Theme Editor में किसी भी बटन, आइकन या टेक्स्ट एलिमेंट में हैशटैग #shoply-ai-chatbot जोड़ दें। ग्राहक जब इन एलिमेंट्स पर क्लिक करेंगे, तो चैट विंडो अपने-आप खुल जाएगी।

लाइव उदाहरण: demo.shoplyai.ai 

चरण:

1. Theme Editor में इच्छित बटन, टेक्स्ट या आइकन को संपादित करें।
2. लिंक या URL को #shoply-ai-chatbot पर सेट करें।

उदाहरण:

चैट विंडो खोलने के लिए बटन का उपयोग करें:

चैट विंडो खोलने के लिए लिंक किए गए टेक्स्ट का उपयोग करें:

पहले से भरे सवाल के साथ चैट खोलें

क्या आप चैट विंडो खोलने के साथ ही कोई सवाल अपने-आप भेजना चाहते हैं? आप इसके लिए हैश फ़्रैगमेंट (अनुशंसित) या URL क्वेरी पैरामीटर में से किसी का उपयोग कर सकते हैं।

शिपिंग नीति, रिटर्न नीति या प्रोडक्ट संबंधी सवालों जैसे आम विषयों के सीधे लिंक बनाने के लिए यह बहुत उपयोगी है।

अनुशंसित: हैश फ़्रैगमेंट (पेज री-लोड नहीं होगा)

#shoply_question= हैश फ़्रैगमेंट का उपयोग करें। हैश को पूरी तरह ब्राउज़र में प्रोसेस किया जाता है, इसलिए इस लिंक पर क्लिक करने से पेज री-लोड नहीं होगा और पहले से मौजूद चैट हिस्ट्री सुरक्षित रहेगी।

फ़ॉर्मैट:

https://your-store.com#shoply_question=your question here

उदाहरण:

• शिपिंग नीति: https://your-store.com#shoply_question=What is your shipping policy?
• रिटर्न: https://your-store.com#shoply_question=How do I return an item?
• ऑर्डर की स्थिति: https://your-store.com#shoply_question=Where is my order?
• प्रोडक्ट खोज: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

आप इसे अपने स्टोर के किसी भी पेज के साथ जोड़ सकते हैं। उदाहरण के लिए, किसी खास प्रोडक्ट पेज पर सवाल के साथ चैटबॉट खोलने के लिए:

https://your-store.com/products/blue-jacket#shoply_question=What sizes are available?

पुराना तरीका: URL क्वेरी पैरामीटर

पिछली संगतता के लिए ?shoply_question= क्वेरी पैरामीटर अब भी समर्थित है। ध्यान दें कि ग्राहक जिस URL पर पहले से है उसमें क्वेरी पैरामीटर जोड़ने पर पेज री-लोड होगा।

फ़ॉर्मैट:

https://your-store.com?shoply_question=your question here

ध्यान दें: विशेष वर्णों या स्पेस का उपयोग करते समय अपने सवाल को URL encode करना याद रखें। ज़्यादातर ब्राउज़र इसे अपने-आप संभाल लेंगे, लेकिन अगर आप प्रोग्राम के ज़रिए लिंक जोड़ रहे हैं, तो सही URL encoding का उपयोग करें (जैसे, स्पेस %20 में बदल जाते हैं)।

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

उपयोग के तरीके:

• अपने फ़ुटर में “शिपिंग के बारे में पूछें” लिंक जोड़ें
• ऐसे QR कोड बनाएँ जो खास सवालों के साथ चैटबॉट खोलें
• अपने ईमेल कैंपेन या ऑर्डर कन्फ़र्मेशन में उपयोगी लिंक शामिल करें
• प्रोडक्ट पेज पर संदर्भ के अनुसार मदद के लिंक जोड़ें (जैसे, “साइज़ के बारे में पूछें”)

थीम टेम्पलेट में कोड संपादित करके चैट विंडो खोलने के लिए डीप लिंक का उपयोग कैसे करें

पिछले सेक्शन में हमने बताया था कि थीम के कोड में बदलाव किए बिना Theme Editor से सीधे किसी भी बटन, आइकन या टेक्स्ट में हैशटैग (डीप लिंक) जोड़कर चैट विंडो कैसे खोली जा सकती है।

हालाँकि, अगर आप अपने स्टोर में कहीं भी डीप लिंक जोड़ने की पूरी सुविधा चाहते हैं (जैसे हेडर में नया आइकन बनाना), तो आपको टेम्पलेट कोड संपादित करना होगा।

नीचे सरल HTML कोड के उदाहरण दिए गए हैं जिनका उपयोग आप अपने Theme template में नए आइकन बनाने के लिए कर सकते हैं:

कोड के उदाहरण

1. चैट आइकन

नीचे दिया गया कोड चैट आइकन जोड़ता है:

<a href="#shoply-ai-chatbot"
   style="display:inline-flex;align-items:center;margin-right:13px">
    <svg viewBox="64 64 896 896" style="height:28px;width:28px;fill:orange">
        <path
            d="M868.2 377.4c-18.9-45.1-46.3-85.6-81.2-120.6a377.26 377.26 0 00-120.5-81.2A375.65 375.65 0 00519 145.8c-41.9 0-82.9 6.7-121.9 20C306 123.3 200.8 120 170.6 120c-2.2 0-7.4 0-9.4.2-11.9.4-22.8 6.5-29.2 16.4-6.5 9.9-7.7 22.4-3.4 33.5l64.3 161.6a378.59 378.59 0 00-52.8 193.2c0 51.4 10 101 29.8 147.6 18.9 45 46.2 85.6 81.2 120.5 34.7 34.8 75.4 62.1 120.5 81.2C418.3 894 467.9 904 519 904c51.3 0 100.9-10.1 147.7-29.8 44.9-18.9 85.5-46.3 120.4-81.2 34.7-34.8 62.1-75.4 81.2-120.6a376.5 376.5 0 0029.8-147.6c-.2-51.2-10.1-100.8-29.9-147.4zm-66.4 266.5a307.08 307.08 0 01-65.9 98c-28.4 28.5-61.3 50.7-97.7 65.9h-.1c-38 16-78.3 24.2-119.9 24.2a306.51 306.51 0 01-217.5-90.2c-28.4-28.5-50.6-61.4-65.8-97.8v-.1c-16-37.8-24.1-78.2-24.1-119.9 0-55.4 14.8-109.7 42.8-157l13.2-22.1-9.5-23.9L206 192c14.9.6 35.9 2.1 59.7 5.6 43.8 6.5 82.5 17.5 114.9 32.6l19 8.9 19.9-6.8c31.5-10.8 64.8-16.2 98.9-16.2a306.51 306.51 0 01217.5 90.2c28.4 28.5 50.6 61.4 65.8 97.8l.1.1.1.1c16 37.6 24.1 78 24.2 119.8-.1 41.7-8.3 82-24.3 119.8zM681.1 364.2c-20.4 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.6 37.1 37.1 37.1s37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1zm-175.2 0c-20.5 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.7 37.1 37.1 37.1 20.5 0 37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1z" />
    </svg>
</a>

2. AI स्टार आइकन

नीचे दिया गया कोड AI स्टार जोड़ता है:

<a href="#shoply-ai-chatbot" style="display:inline-flex;align-items:center">
    <img style="height:28px;width:28px" src="https://[CFN_PRODUCTION_ASSET]/AIStar.svg" alt="Shoply Chatbot"  />
</a>

3. फ़ंक्शन कॉल विधि

हैशटैग का उपयोग करने के अलावा, आप किसी भी बटन/आइकन के onclick एट्रिब्यूट में openShoplyAIChatBot() फ़ंक्शन कॉल भी डाल सकते हैं, ताकि ग्राहक बटन/आइकन पर क्लिक करने पर चैट विंडो देख सकें।

<button onclick="openShoplyAIChatBot()" style="border-radius:20px;margin:10px;cursor:pointer;background:black">
    <span style="font-size:13px;color:white;margin:5px">Click to Chat</span>
</button>

मदद चाहिए?

आप ऊपर दिए गए किसी भी उदाहरण का उपयोग करके, अपने स्टोर के हेडर में चैट डीप लिंक जोड़ने के लिए कोड को sections/header.liquid फ़ाइल में सर्च आइकन के पास डाल सकते हैं।

हालाँकि, अगर आप अपने Theme template का कोड संपादित करने में पूरी तरह सहज नहीं हैं, तो चिंता न करें!

बेझिझक हमारे साथ मीटिंग बुक करें , और हम आपके स्टोर के अनोखे अंदाज़ से मेल खाने वाली सही जगह पर सही आइकन सेट करने में खुशी से मदद करेंगे।

फ़्लोटिंग आइकन कैसे छिपाएँ?

डीप लिंक से चैट विंडो खोलने की सेटिंग करने के बाद, आप फ़्लोटिंग आइकन छिपाना चाह सकते हैं। स्टोर मालिक अक्सर यह भी बताते हैं कि उनकी वेबसाइटों पर बहुत सारे फ़्लोटिंग आइकन परेशान करने वाले लग सकते हैं। हम आपकी चिंता समझते हैं! इसी वजह से हमने चैट आइकन छिपाने की सुविधा शुरू की है।

ऐप के एडमिन कंसोल के “Customize AI Chat” सेक्शन में, Select a Chat Icon सेटिंग के अंतर्गत अब आप यह विकल्प चुन सकते हैं:

“Hide floating icon and use deep link to open chat” विकल्प।

इससे आप फ़्लोटिंग आइकन छिपा सकते हैं और फिर भी डीप लिंक के ज़रिए चैट विंडो खोलने की सुविधा बनाए रख सकते हैं।