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

المنصة:

Craft CMS

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. ادخل إلى ملفات مشروع Craft CMS عبر FTP أو SSH أو محرر الأكواد الخاص بك
2. انتقل إلى مجلد templates/
3. ابحث عن ملف التخطيط الرئيسي (المسمى عادة _layout.twig أو _layout.html أو الموجود في templates/_layouts/)
4. ابحث عن وسم الإغلاق </body>
5. الصق كود تضمين Asyntai الخاص بك قبل وسم </body> مباشرة
6. احفظ الملف

Alternative: Using Twig {% js %} Tag (Craft CMS 3.x+)

يوفر Craft CMS وسم Twig مدمجاً لتسجيل JavaScript:

1. افتح قالب التخطيط الرئيسي الخاص بك
2. أضف الكود التالي قبل وسم الإغلاق </body>:
   {% js %} (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); })(); {% endjs %}
3. استبدل YOUR_WIDGET_ID بمعرف الأداة الفعلي الخاص بك
4. احفظ الملف

البديل: إنشاء ملف تضمين منفصل

لتنظيم أفضل، أنشئ ملف تضمين مخصص:

1. أنشئ ملفاً جديداً: templates/_includes/chatbot.twig (أو .html)
2. أضف كود تضمين Asyntai الخاص بك إلى هذا الملف:
   <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>
3. في قالب التخطيط الرئيسي، أدرج هذا الملف قبل </body>:
   {% include '_includes/chatbot' %}
4. احفظ كلا الملفين

البديل: التحميل المشروط

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

1. في قالب التخطيط أو الصفحة الخاص بك، استخدم الشروط في Twig:
   {% if entry.showChatbot ?? true %} <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> {% endif %}
2. أو تحقق من أقسام محددة:
   {% if craft.app.request.segments[0] != 'admin' %} <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> {% endif %}

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

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