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

دليل خطوة بخطوة لمواقع AEM

المنصة:

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

أولاً، انتقل إلى لوحة تحكم Asyntai وانتقل لأسفل إلى قسم "Embed Code". انسخ كود التضمين الفريد الذي سيبدو هكذا:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

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

الخطوة 2: إضافة الكود باستخدام مكون الصفحة (موصى به)

الطريقة الموصى بها هي إضافة كود روبوت الدردشة إلى قسم head في مكون صفحة AEM للتثبيت على مستوى الموقع:

سجّل الدخول إلى مثيل AEM Author
انتقل إلى CRXDE Lite (عادةً على http://your-aem-instance:4502/crx/de)
حدد قالب مكون الصفحة (عادةً تحت /apps/your-project/components/page)
ابحث عن أو أنشئ ملف head.html أو headerlibs.html
أضف كود تضمين Asyntai إلى هذا الملف
انقر على "Save All" في القائمة العلوية
قم بنسخ التغييرات إلى مثيل النشر

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

الطريقة البديلة 1: مكتبات العميل (ClientLibs)

لنهج أكثر تنظيماً، يمكنك استخدام نظام مكتبات العميل في AEM:

أنشئ مجلد مكتبة عميل جديد تحت /apps/your-project/clientlibs
عيّن نوع العقدة cq:clientLibraryFolder
أنشئ ملف js.txt يسرد ملفات JavaScript الخاصة بك
أضف كود تضمين Asyntai إلى ملف JavaScript في هذا المجلد
قم بتضمين مكتبة العميل في مكون صفحتك باستخدام:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.js @ categories='your-category-name'}" />

ملاحظة: هذه الطريقة موصى بها للمشاريع ذات بنية ClientLib الحالية وتوفر تنظيماً أفضل للتطبيقات الأكبر.

الطريقة البديلة 2: إدارة العلامات (Adobe Launch)

إذا كنت تستخدم Adobe Launch (DTM سابقاً) أو مدير علامات آخر:

سجّل الدخول إلى Adobe Experience Platform Launch
انتقل إلى خاصيتك
انتقل إلى Rules وأنشئ قاعدة جديدة
عيّن الحدث إلى "Page Bottom" أو "DOM Ready"
أضف إجراءً: Custom Code
الصق كود تضمين Asyntai
احفظ وانشر المكتبة

نصيحة: استخدام Adobe Launch هو النهج الموصى به من Adobe لإضافة سكريبتات الطرف الثالث. يوفر تحكماً أفضل وقدرات اختبار ولا يتطلب نشر الكود.

الطريقة البديلة 3: Experience Fragment

لتطبيق مرن وسهل الاستخدام للمؤلفين:

انتقل إلى Experience Fragments في AEM
أنشئ Experience Fragment جديد
أضف Text component أو HTML component
انتقل إلى وضع مصدر HTML
الصق كود تضمين Asyntai
قم بتضمين هذا الـ Experience Fragment في تذييل قالب صفحتك

مهم: تأكد من أن لديك أذونات AEM المناسبة لتعديل القوالب والمكونات. بالنسبة لـ AEM as a Cloud Service، قد تحتاج التغييرات إلى المرور عبر خط أنابيب CI/CD.

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

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

لا ترى الأداة؟ تحقق من وحدة تحكم المتصفح (F12) بحثاً عن أخطاء JavaScript. تأكد من أن الكود تم نشره بشكل صحيح إلى مثيل النشر. بالنسبة لـ AEM as a Cloud Service، تأكد من أن تغييراتك مرت عبر خط أنابيب النشر بنجاح.