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

دليل خطوة بخطوة لنظام SilverStripe CMS

المنصة:

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

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

<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: الإضافة إلى قالب SilverStripe (موصى به)

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

افتح ملف قالب السمة الخاص بك (مثل themes/yourtheme/templates/Page.ss)
أضف كود التضمين مباشرة قبل وسم الإغلاق </body>:

    <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>
  </body>
</html>

احفظ الملف وامسح ذاكرة التخزين المؤقت لـ SilverStripe بإضافة ?flush=1 إلى عنوان URL لموقعك

نصيحة: يستخدم SilverStripe ملفات قوالب .ss مع نظام وراثة القوالب. وضع الكود في قالب Page.ss الأساسي يضمن ظهور روبوت الدردشة في كل صفحة من موقعك. إذا كان قالبك يستخدم مجلد Includes، يمكنك أيضاً وضع الكود في ملف تضمين مشترك.

الطريقة البديلة 1: استخدام فئة Requirements في المتحكم

يوفر SilverStripe فئة Requirements لإدارة تبعيات JavaScript وCSS برمجياً. هذا هو النهج الموصى به للمطورين:

افتح app/src/PageController.php (أو ملف متحكم الصفحة الخاص بك)
في طريقة init()، استخدم Requirements::customScript() لتحميل الأداة ديناميكياً:

use SilverStripe\View\Requirements;

class PageController extends \SilverStripe\CMS\Controllers\ContentController
{
    protected function init()
    {
        parent::init();
        Requirements::customScript(<<<JS
            var script = document.createElement('script');
            script.src = 'https://asyntai.com/static/js/chat-widget.js';
            script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
            script.async = true;
            document.head.appendChild(script);
        JS);
    }
}

احفظ الملف وامسح ذاكرة التخزين المؤقت بزيارة yourdomain.com?flush=1

ملاحظة: فئة Requirements هي الطريقة القياسية في SilverStripe لتضمين الأكواد وأوراق الأنماط. استخدام Requirements::customScript() يُخرج JavaScript مضمناً. تضمن هذه الطريقة تحميل الأداة في كل صفحة يتعامل معها PageController.

الطريقة البديلة 2: استخدام Requirements في القالب

يمكنك أيضاً استخدام صيغة قوالب SilverStripe لطلب ملفات JavaScript مباشرة في قالب .ss:

افتح ملف قالب السمة الخاص بك (مثل themes/yourtheme/templates/Page.ss)
أضف ما يلي بالقرب من أسفل القالب، قبل </body>:

<% require javascript("https://asyntai.com/static/js/chat-widget.js") %>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var scripts = document.querySelectorAll('script[src*="chat-widget.js"]');
        scripts.forEach(function(s) {
            s.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
        });
    });
</script>
</body>

نصيحة: صيغة <% require %> هي طريقة SilverStripe على مستوى القالب لتضمين الأصول. لاحظ أن هذه الطريقة لا تدعم أصلاً إضافة سمات بيانات مخصصة إلى وسم الكود، لذلك نضيف مقتطف تهيئة صغير لتعيين معرف الأداة.

الطريقة البديلة 3: استخدام إعدادات SilverStripe (YAML)

لنهج قائم على الإعدادات، يمكنك استخدام إعدادات YAML في SilverStripe لإضافة متطلبات عامة:

افتح أو أنشئ ملف app/_config/app.yml
أضف الإعدادات لتضمين الأداة عبر إضافة مخصصة أو إعداد متحكم:

# app/_config/app.yml
---
Name: asyntai-chatbot
After: '#rootroutes'
---
SilverStripe\Core\Injector\Injector:
  AsyntaiChatbotExtension:
    class: App\Extensions\AsyntaiChatbotExtension

أنشئ ملف الإضافة app/src/Extensions/AsyntaiChatbotExtension.php:

namespace App\Extensions;

use SilverStripe\Core\Extension;
use SilverStripe\View\Requirements;

class AsyntaiChatbotExtension extends Extension
{
    public function onAfterInit()
    {
        Requirements::customScript("
            var script = document.createElement('script');
            script.src = 'https://asyntai.com/static/js/chat-widget.js';
            script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
            script.async = true;
            document.head.appendChild(script);
        ");
    }
}

طبّق الإضافة على PageController في app/_config/app.yml:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

قم بتشغيل ?flush=1 لإعادة بناء ذاكرة التخزين المؤقت للإعدادات

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

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

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

لا ترى الأداة؟ تأكد من مسح ذاكرة التخزين المؤقت بإضافة ?flush=1 إلى عنوان URL لموقعك. تحقق من استبدال YOUR_WIDGET_ID بمعرف الأداة الفعلي من لوحة التحكم. امسح ذاكرة التخزين المؤقت للمتصفح أو اعرض في وضع التصفح الخاص. افتح وحدة تحكم المتصفح (F12) للتحقق من أي أخطاء JavaScript. إذا كنت تستخدم فئة Requirements، تحقق من استدعاء طريقة init() في PageController بشكل صحيح.