كيفية فتح نافذة الدردشة باستخدام رابط

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

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

الخطوات:

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

أمثلة:

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

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

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

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

1. في Shopify Theme Editor، افتح قالب المنتج وأضف أو حرّر زرًا أو نصًا مرتبطًا يدعم عنوان URL.
2. اضبط التسمية على “Question About This Product?” واضبط الرابط على #shoply_product_questions.
3. احفظ التغييرات، ثم انتقل إلى صفحة منتج وانقر على الرابط للتحقق من أسئلة المنتج.

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

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

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

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

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

يتم إنشاء أسئلة المنتج هذه تلقائيًا. أما الأسئلة الافتتاحية التي تقوم بإعدادها في 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).

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

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

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

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

في القسم السابق، ناقشنا كيفية استخدام الوسم (الرابط العميق) لتشغيل نافذة الدردشة عبر إضافته إلى أي زر أو أيقونة أو نص مباشرة من 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”

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