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

المنصة:

Umbraco

HTML/Custom WordPress Shopify WooCommerce BigCommerce Ecwid Wix Squarespace Webflow Weebly HubSpot Tilda Adobe Experience Manager Duda Google Sites Bludit Plesk Concrete CMS Craft CMS Contentful Docusaurus Strapi Joomla Kentico Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Hugo Statamic Umbraco Volusion Moodle SilverStripe Grav October CMS ProcessWire Sanity ExpressionEngine Sylius Backdrop CMS MODX Bagisto PayloadCMS e107 CrafterCMS Kirby MedusaCMS DatoCMS GoDaddy Framer Bubble Carrd Jimdo Strikingly Kajabi Teachable Thinkific ClickFunnels Hostinger Unbounce Leadpages Systeme.io Instapage

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

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

الخطوة 2: تعديل القالب الرئيسي (موصى به)

أسهل طريقة لإضافة روبوت الدردشة إلى جميع الصفحات هي تعديل القالب الرئيسي:

1. سجّل الدخول إلى لوحة تحكم Umbraco
2. انتقل إلى Settings في الشريط الجانبي الأيسر
3. وسّع القوالب
4. انقر على قالب Master (أو قالب التخطيط الرئيسي الذي يستخدمه موقعك)
5. ابحث عن وسم الإغلاق </body>
6. الصق كود تضمين Asyntai الخاص بك قبل وسم </body> مباشرة
7. انقر على "Save"

بديل: استخدام نوع مستند إعدادات الموقع

لمزيد من المرونة، يمكنك إضافة حقل مخصص لإدارة نصوص التذييل البرمجية:

1. انتقل إلى Settings → Document Types
2. عدّل نوع مستند إعدادات الموقع (أو أنشئ واحدًا إذا لم يكن موجودًا)
3. أضف خاصية جديدة باسم "Footer Scripts" بنوع بيانات Textarea
4. احفظ نوع المستند
5. انتقل إلى المحتوى وعدّل عقدة إعدادات الموقع
6. الصق كود Asyntai المضمّن في حقل Footer Scripts
7. في القالب الرئيسي، أضف هذا الكود قبل </body>:
   @Html.Raw(Model.Value("footerScripts"))
8. احفظ كلاً من المحتوى والقالب

بديل: استخدام مجلد النصوص البرمجية

يمكنك أيضًا إنشاء ملف JavaScript في لوحة تحكم Umbraco:

1. انتقل إلى Settings → Scripts
2. انقر بزر الماوس الأيمن على Scripts واختر "Create"
3. أنشئ ملفًا جديدًا باسم asyntai-chatbot.js
4. أضف الكود التالي:
   (function() {
  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  document.body.appendChild(script);
})();
5. استبدل YOUR_WIDGET_ID بمعرف الأداة الفعلي الخاص بك
6. احفظ الملف
7. قم بتضمين هذا النص البرمجي في القالب الرئيسي قبل </body>:
   <script src="/scripts/asyntai-chatbot.js"></script>

بديل: صفحة محددة باستخدام RenderSection

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

1. في القالب الرئيسي، أضف قبل </body>:
   @RenderSection("footerScripts", required: false)
2. في قالب الصفحة المحددة التي تريد روبوت الدردشة فيها، أضف:
   @section footerScripts {
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
}

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

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