लिंक के साथ चैट विंडो कैसे खोलें

आप अपनी theme के code को बदले बिना deep link का उपयोग करके chat window खोल सकते हैं। Shopify Theme Editor में, किसी भी button, icon, या text element में बस hashtag #shoply-ai-chatbot जोड़ दें। जब ग्राहक इन elements पर क्लिक करेंगे, तो chat window अपने आप खुल जाएगी।

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

चरण:

1. अपने theme editor में इच्छित button, text, या icon को edit करें।
2. Link या URL को #shoply-ai-chatbot पर सेट करें।

उदाहरण:

Chat window खोलने के लिए button का उपयोग करें:

Chat window खोलने के लिए linked text का उपयोग करें:

उत्पाद-विशिष्ट प्रश्नों के साथ चैट खोलें

किसी product page पर “Question About This Product?” button जोड़ें ताकि खरीदार उस item के बारे में सवाल पूछ सकें। इसका link #shoply_product_questions पर सेट करें। इस पर क्लिक करने से product name, product का एक छोटा highlight, और उस product से संबंधित अपने आप जनरेट किए गए प्रश्नों के साथ chat खुलती है।

1. Shopify Theme Editor में, अपना product template खोलें और ऐसा button या linked text जोड़ें या edit करें जो URL support करता हो।
2. Label को “Question About This Product?” और link को #shoply_product_questions पर सेट करें।
3. Save करें, किसी product page पर जाएँ, और product questions जांचने के लिए link पर क्लिक करें।

यदि आपकी theme कोई उपयुक्त button या link setting नहीं देती है, तो product template के HTML में यह link जोड़ें:

<a href="#shoply_product_questions">Question About This Product?</a>

इस link का उपयोग product page पर करें ताकि Shoply को product context मिल सके। आप #shoply_product_questions पर समाप्त होने वाला पूरा product URL भी साझा कर सकते हैं।

Bent 85 Skis के लिए product-question chat आज़माएँ । सुझावों में ski weight, core, rocker profile, और topsheet art के बारे में प्रश्न शामिल हैं। खरीदार किसी सुझाव को चुन सकते हैं या अपना प्रश्न टाइप कर सकते हैं।

इन links का उपयोग कहाँ करना है, इसके उदाहरणों के लिए हमारे FAQ replacement guide में AI-powered product questions देखें।

ये product questions अपने आप जनरेट होते हैं। Customize AI Chat में आपके द्वारा configure किए गए starting questions इसके बजाय standard chat opening पर लागू होते हैं।

पहले से भरे हुए प्रश्न के साथ चैट खोलें

क्या आप chat window खोलना और अपने आप कोई प्रश्न भेजना चाहते हैं? आप यह hash fragment (recommended) या URL query parameter में से किसी एक का उपयोग करके कर सकते हैं।

यह shipping policy, return policy, या product inquiries जैसे सामान्य topics के लिए direct links बनाने के लिए बेहतरीन है।

Recommended: Hash Fragment (page reload नहीं)

#shoply_question= hash fragment का उपयोग करें। क्योंकि hash पूरी तरह browser में process होता है, इस link पर क्लिक करने से page reload नहीं होगा, और मौजूदा chat history सुरक्षित रहती है।

Format:

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

उदाहरण:

• Shipping Policy: https://your-store.com#shoply_question=What is your shipping policy?
• Returns: https://your-store.com#shoply_question=How do I return an item?
• Order Status: https://your-store.com#shoply_question=Where is my order?
• Product Discovery: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

आप इसे अपने store के किसी भी page के साथ जोड़ सकते हैं। उदाहरण के लिए, किसी specific product page पर किसी प्रश्न के साथ chatbot खोलने के लिए:

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

Legacy: URL Query Parameter

Backward compatibility के लिए ?shoply_question= query parameter अभी भी supported है। ध्यान दें कि ग्राहक जिस URL पर पहले से है, उसमें query parameter जोड़ने से page reload होगा।

Format:

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

नोट: Special characters या spaces का उपयोग करते समय अपने प्रश्न को URL encode करना याद रखें। ज़्यादातर browsers इसे अपने आप संभाल लेते हैं, लेकिन यदि आप links को programmatically जोड़ रहे हैं, तो proper URL encoding का उपयोग करें (जैसे, spaces %20 बन जाते हैं)।

जब कोई ग्राहक किसी भी प्रकार के link पर क्लिक करता है, तो chat window अपने आप खुल जाती है और प्रश्न AI chatbot को भेज दिया जाता है, जिससे तुरंत उत्तर मिलता है।

उपयोग के मामले:

• अपने footer में “Ask about shipping” link जोड़ें
• ऐसे QR codes बनाएँ जो specific questions के साथ chatbot खोलें
• अपनी email campaigns या order confirmations में उपयोगी links शामिल करें
• Product pages पर contextual help links जोड़ें (उदा., “Ask about sizing”)

Chat Window खोलने के लिए Deep Link का उपयोग कैसे करें (Theme template में code edit करना होगा)

पिछले section में, हमने चर्चा की थी कि कैसे Theme Editor से सीधे किसी भी button, icon, या text में hashtag (deep link) जोड़कर, अपनी theme का code edit किए बिना chat window trigger की जा सकती है।

हालाँकि, यदि आप अपने store में कहीं भी deep link जोड़ने के लिए पूरी flexibility चाहते हैं (उदा., header में एक नया icon बनाना), तो आपको template code edit करना होगा।

नीचे कुछ सरल HTML code examples दिए गए हैं, जिनका उपयोग आप अपने Theme template में नए icons बनाने के लिए कर सकते हैं:

Code Examples

1. Chat Icon

नीचे दिया गया code एक chat icon जोड़ता है:

<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 Star Icon

नीचे दिया गया code एक AI star जोड़ता है:

<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. Function Call Method

Hashtags का उपयोग करने के अलावा, आप openShoplyAIChatBot() function call को किसी भी button/icon के onclick attribute में भी डाल सकते हैं, ताकि ग्राहक button/icon पर क्लिक करते ही chat window देख सकें।

<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>

सहायता चाहिए?

आप ऊपर दिए गए किसी भी example का उपयोग कर सकते हैं, और अपने store के header में chat deep link जोड़ने के लिए sections/header.liquid file में search icon के पास code inject कर सकते हैं।

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

बेझिझक हमारे साथ meeting book करें , और हम आपके store के unique vibe से मेल खाने के लिए सही जगह पर perfect icon सेट करने में खुशी से मदद करेंगे।

Floating Icon को कैसे छिपाएँ?

जब आप chat window खोलने के लिए deep link configure कर लेते हैं, तो हो सकता है आप floating icon को छिपाना चाहें। इसके अलावा, store owners अक्सर बताते हैं कि उनकी websites पर बहुत सारे floating icons होना भारी लग सकता है। हम आपकी चिंताओं को समझते हैं! यही वजह है कि हमने chat icon को छिपाने का feature पेश किया है।

App की admin console के “Customize AI Chat” section में, Select a Chat Icon settings के अंतर्गत, अब आप यह चुन सकते हैं:

“Hide floating icon and use deep link to open chat” option.

इससे आप floating icon को छिपा सकते हैं, जबकि फिर bhi deep link के जरिए chat window खोलना सक्षम रहेगा.