كيفية إضافة روبوت الدردشة Asyntai AI إلى BigCommerce

دليل خطوة بخطوة لمتاجر BigCommerce

المنصة:

الخطوة 1: احصل على كود التضمين

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

ملاحظة: الكود أعلاه مجرد مثال. يجب عليك نسخ كود التضمين الفريد الخاص بك من لوحة التحكم لأنه يحتوي على معرف الأداة الشخصي الخاص بك.

الخطوة 2: اختيار طريقة التثبيت

هناك عدة طرق لإضافة أداة الدردشة إلى BigCommerce. اختر الطريقة الأنسب لك:

الطريقة 1: استخدام مدير البرامج النصية (موصى بها)

مدير البرامج النصية هو الطريقة الأسهل والموصى بها لإضافة برامج نصية مخصصة إلى متجر BigCommerce الخاص بك. لا يتطلب أي معرفة برمجية ويستمر عبر تغييرات القوالب.

سجّل الدخول إلى لوحة تحكم BigCommerce الخاصة بك
انتقل إلى Storefront → Script Manager
انقر على زر "Create a Script"
قم بتكوين البرنامج النصي بهذه الإعدادات:
- الاسم: Asyntai AI Chatbot
- الوصف: أداة دردشة مدعومة بالذكاء الاصطناعي (اختياري)
- الموضع: Footer
- الموقع: All Pages
- فئة البرنامج النصي: Functional
- نوع البرنامج النصي: Script
في مربع "Script Contents"، الصق كود تضمين Asyntai الخاص بك
انقر على "Save"

لماذا تستخدم مدير البرامج النصية؟ تُدار البرامج النصية المضافة عبر مدير البرامج النصية بشكل منفصل عن القالب الخاص بك. لن تتأثر عند تحديث أو تغيير قالب متجرك.

الطريقة 2: استخدام أداة إنشاء الصفحات

يمكنك استخدام أداة إنشاء الصفحات في BigCommerce لإضافة أداة الدردشة باستخدام عنصر HTML. هذه الطريقة مفيدة إذا كنت تريد مزيداً من التحكم في مكان ظهور الأداة.

سجّل الدخول إلى لوحة تحكم BigCommerce الخاصة بك
انتقل إلى Storefront → My Themes
انقر على زر "Customize" في القالب النشط الخاص بك
في الشريط الجانبي الأيسر لأداة إنشاء الصفحات، ابحث عن عنصر "HTML"
اسحب وأفلت عنصر HTML إلى منطقة التذييل في قالب صفحتك
انقر على عنصر HTML واختر "Edit HTML"
الصق كود تضمين Asyntai
انقر على "Save HTML"
انقر على "Publish" لتطبيق التغييرات على متجرك المباشر

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

الطريقة 3: تحرير ملفات القالب (قوالب Stencil)

للمطورين الذين يستخدمون قوالب Stencil، يمكنكم إضافة الكود مباشرة إلى ملفات القالب. يتطلب هذا الوصول إلى ملفات المصدر الخاصة بقالبكم.

استخدام لوحة تحكم BigCommerce

انتقل إلى Storefront → My Themes
انقر على "Advanced" في القالب النشط الخاص بك
اختر "Edit Theme Files"
انتقل إلى templates → components → common
افتح footer.html
مرر إلى أسفل الملف
الصق كود تضمين Asyntai الخاص بك قبل وسم الإغلاق مباشرة
انقر على "Save & Apply File"

استخدام Stencil CLI (التطوير المحلي)

إذا كنت تطور محلياً باستخدام Stencil CLI:

افتح ملفات القالب المحلية الخاصة بك
انتقل إلى templates/components/common/footer.html
أضف كود تضمين Asyntai الخاص بك قبل وسوم الإغلاق
ادفع تغييراتك باستخدام stencil push

مهم: قد يتم الكتابة فوق تغييرات ملفات القالب عند تحديث القالب. للحصول على حل دائم يستمر عبر تحديثات القالب، استخدم طريقة مدير البرامج النصية.

الخطوة 3: التحقق من التثبيت

بعد إضافة الكود، قم بزيارة متجر BigCommerce الخاص بك في علامة تبويب جديدة أو نافذة تصفح خاص. يجب أن ترى زر أداة الدردشة في الزاوية السفلية اليمنى لمتجرك. انقر عليه للتأكد من أنه يفتح ويعمل بشكل صحيح.

لا ترى الأداة؟ امسح ذاكرة التخزين المؤقت للمتصفح وحاول مرة أخرى. إذا أجريت تغييرات من خلال محرر القوالب، تأكد من النقر على "Publish" لتطبيق التغييرات على متجرك المباشر.

التوثيق