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

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

المنصة:

الخطوة 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: إضافة الكود عبر إعدادات الموقع (جميع الصفحات)

لإضافة روبوت الدردشة إلى جميع صفحات موقع Webflow الخاص بك دفعة واحدة:

سجّل الدخول إلى حساب Webflow الخاص بك واختر مشروعك
انقر على أيقونة الترس (إعدادات الموقع) في الشريط الجانبي الأيسر
انقر على "Custom Code" في قائمة الإعدادات
انتقل لأسفل إلى قسم "Footer Code" (قبل وسم </body>)
الصق كود تضمين Asyntai
انقر على "Save Changes"
قم بـنشر موقعك ليتم تفعيل التغييرات

نصيحة: تضع إضافة الكود إلى قسم التذييل الكود قبل وسم الإغلاق </body> مباشرة، وهو أمر موصى به لأدوات الدردشة لأنه لن يبطئ تحميل صفحتك.

بديل: كود مخصص لصفحة محددة

إذا كنت تريد روبوت الدردشة في صفحات محددة فقط:

افتح مشروعك في مصمم Webflow
انقر على لوحة الصفحات (أيقونة المجلد) في الشريط الجانبي الأيسر
مرر المؤشر فوق الصفحة التي تريد تعديلها وانقر على أيقونة الترس
انتقل لأسفل إلى "Custom Code"
الصق كود Asyntai المضمّن في قسم "Before </body> tag"
انقر على "Save"
قم بـنشر موقعك

بديل: استخدام عنصر التضمين

يمكنك أيضًا إضافة روبوت الدردشة باستخدام عنصر التضمين في أي مكان على صفحتك:

افتح مشروعك في مصمم Webflow
انقر على زر "+" لفتح لوحة الإضافة
ابحث عن "Embed" أو ابحث عنه ضمن المكونات
اسحب عنصر التضمين إلى صفحتك
الصق كود تضمين Asyntai في محرر الأكواد
انقر على "Save & Close"
قم بـنشر موقعك

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

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

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

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

إضافة شريط البحث بالذكاء الاصطناعي

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

أضف السمة data-replace إلى وسم السكربت وسيحل الشريط محل الشريط الموجود في قالبك. أضفه في Site Settings، Custom Code، Footer، وهو نفس مكان كود المحادثة، ما يضعه قبل وسم body الختامي مباشرة.

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

اقرأ دليل شريط البحث بالذكاء الاصطناعي كاملاً