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

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

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

الخطوات:

1. عدّل الزر أو النص أو الأيقونة المطلوبة في محرّر القالب لديك.
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 عند استخدام أحرف خاصة أو مسافات. ستتولى معظم المتصفحات ذلك تلقائيًا، لكن إذا كنت تضيف الروابط برمجيًا، فاستخدم ترميزًا مناسبًا لعناوين URL (مثلًا، تتحول المسافات إلى %20).

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

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

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

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

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

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

فيما يلي أمثلة بسيطة على شيفرة 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. أيقونة نجمة الذكاء الاصطناعي

تضيف الشيفرة أدناه نجمة للذكاء الاصطناعي:

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

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