كيفية استخدام الرابط العميق لفتح نافذة الدردشة (من دون تعديل كود القالب)

يمكنك فتح نافذة الدردشة باستخدام رابط عميق من دون تعديل كود القالب الخاص بك. في Shopify Theme Editor، ما عليك سوى إضافة الوسم #shoply-ai-chatbot إلى أي زر أو أيقونة أو عنصر نصي. عندما ينقر العملاء على هذه العناصر، ستُفتح نافذة الدردشة تلقائيًا.

مثال مباشر: demo.shoplyai.ai 

الخطوات:

1. عدّل الزر أو النص أو الأيقونة المطلوبة في محرر القالب.
2. اضبط الرابط أو URL على #shoply-ai-chatbot.

أمثلة:

استخدم زرًا لفتح نافذة الدردشة:

استخدم نصًا يحتوي على رابط لفتح نافذة الدردشة:

فتح الدردشة بأسئلة خاصة بمنتج معين

أضِف زر “هل لديك سؤال حول هذا المنتج؟” إلى صفحة المنتج لمساعدة المتسوقين على طرح أسئلة حول ذلك المنتج. اضبط رابطه على #shoply_product_questions. عند النقر عليه، تُفتح الدردشة مع اسم المنتج، ولمحة قصيرة عنه، وأسئلة مُولَّدة تلقائيًا ومرتبطة بهذا المنتج.

1. في Shopify Theme Editor، افتح قالب المنتج الخاص بك وأضِف أو عدّل زرًا أو نصًا مرتبطًا يدعم URL.
2. اضبط التسمية على “هل لديك سؤال حول هذا المنتج؟” والرابط على #shoply_product_questions.
3. احفظ التغييرات، ثم انتقل إلى صفحة منتج وانقر على الرابط للتحقق من أسئلة المنتج.

إذا كان القالب الخاص بك لا يوفّر إعداد زر أو رابط مناسب، فأضف هذا الرابط في HTML الخاص بقالب المنتج:

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

استخدم هذا الرابط على صفحة المنتج حتى يتمكن Shoply من الحصول على سياق المنتج. يمكنك أيضًا مشاركة URL كامل لمنتج ينتهي بـ #shoply_product_questions.

جرّب دردشة أسئلة المنتج الخاصة بـ Bent 85 Skis . تتضمن الاقتراحات أسئلة حول وزن الزلاجات، واللبّ الداخلي، ونمط rocker، ورسومات السطح العلوي. يمكن للمتسوقين اختيار اقتراح أو كتابة سؤالهم الخاص.

للاطلاع على أمثلة لأماكن استخدام هذه الروابط، راجع الأسئلة الخاصة بالمنتج المدعومة بالذكاء الاصطناعي في دليل استبدال صفحة الأسئلة الشائعة لدينا.

يتم إنشاء أسئلة المنتج هذه تلقائيًا. أما الأسئلة الافتتاحية التي تقوم بإعدادها في Customize AI Chat فتُطبَّق بدلًا من ذلك عند فتح الدردشة القياسية.

فتح الدردشة بسؤال مُعبّأ مسبقًا

هل تريد فتح نافذة الدردشة وأيضًا إرسال سؤال تلقائيًا؟ يمكنك القيام بذلك باستخدام جزء hash (موصى به) أو معامل استعلام URL.

هذا مثالي لإنشاء روابط مباشرة لمواضيع شائعة مثل سياسة الشحن أو سياسة الإرجاع أو الاستفسارات المتعلقة بالمنتجات.

الموصى به: جزء Hash (من دون إعادة تحميل الصفحة)

استخدم جزء الـ hash #shoply_question=. نظرًا لأن الـ hash تتم معالجته بالكامل داخل المتصفح، فإن النقر على هذا الرابط لن يؤدي إلى إعادة تحميل الصفحة، وسيتم الاحتفاظ بأي سجل دردشة موجود.

التنسيق:

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 الصحيح (على سبيل المثال، تتحول المسافات إلى %20).

عندما ينقر العميل على أي نوع من هذين الرابطين، ستُفتح نافذة الدردشة تلقائيًا وسيتم إرسال السؤال إلى الشات بوت المدعوم بالذكاء الاصطناعي لتقديم إجابة فورية.

حالات الاستخدام:

• أضِف رابط “اسأل عن الشحن” في التذييل
• أنشئ رموز QR تفتح الشات بوت بأسئلة محددة
• ضمّن روابط مفيدة في حملات البريد الإلكتروني أو رسائل تأكيد الطلب
• أضِف روابط مساعدة سياقية على صفحات المنتجات (مثل: “اسأل عن المقاس”)

كيفية استخدام الرابط العميق لفتح نافذة الدردشة (يتطلب تعديل الكود في قالب الثيم)

في القسم السابق، ناقشنا كيفية استخدام الوسم (الرابط العميق) لتشغيل نافذة الدردشة عن طريق إضافته إلى أي زر أو أيقونة أو نص مباشرة من Theme Editor، من دون تعديل كود القالب.

ومع ذلك، إذا كنت ترغب في مرونة كاملة لإضافة الرابط العميق في أي مكان داخل متجرك (مثل إنشاء أيقونة جديدة في الترويسة)، فستحتاج إلى تعديل كود القالب.

فيما يلي أمثلة بسيطة على كود HTML يمكنك استخدامها لإنشاء أيقونات جديدة في قالب الثيم الخاص بك:

أمثلة على الكود

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. طريقة استدعاء الدالة

إلى جانب استخدام الوسوم، يمكنك أيضًا وضع استدعاء الدالة openShoplyAIChatBot() داخل الخاصية onclick لأي زر/أيقونة، بحيث يرى العملاء نافذة الدردشة عند النقر على الزر/الأيقونة.

<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، لإضافة الرابط العميق للدردشة إلى ترويسة متجرك.

ومع ذلك، إذا لم تكن مرتاحًا تمامًا لتعديل الكود في قالب الثيم الخاص بك، فلا تقلق!

لا تتردد في حجز اجتماع معنا ، وسنساعدك بكل سرور في إعداد الأيقونة المثالية في المكان الأنسب بما يتوافق مع الطابع الفريد لمتجرك.

كيفية إخفاء الأيقونة العائمة؟

بمجرد إعداد الرابط العميق لفتح نافذة الدردشة، قد ترغب في إخفاء الأيقونة العائمة. كما يذكر أصحاب المتاجر كثيرًا أن وجود عدد كبير جدًا من الأيقونات العائمة على مواقعهم قد يكون مربكًا. نحن نتفهم مخاوفك! ولهذا السبب قدّمنا ميزة لإخفاء أيقونة الدردشة.

في قسم “Customize AI Chat” من لوحة تحكم المشرف في التطبيق، ضمن إعدادات Select a Chat Icon، يمكنك الآن تحديد خيار:

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

يتيح لك هذا إخفاء الأيقونة العائمة مع الاستمرار في تمكين فتح نافذة الدردشة عبر رابط عميق.