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

دليل خطوة بخطوة لمواقع Kirby 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: الإضافة إلى مقتطف Kirby (مُوصى به)

Kirby هو نظام إدارة محتوى PHP قائم على الملفات يستخدم المقتطفات لأجزاء القالب القابلة لإعادة الاستخدام. النهج الموصى به هو إنشاء مقتطف مخصص لروبوت الدردشة:

أنشئ ملف مقتطف جديدًا في site/snippets/asyntai-widget.php
الصق كود التضمين في الملف:

<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>

ثم قم بتضمين المقتطف في القالب الرئيسي (مثل site/templates/default.php) أو التخطيط الخاص بك، قبل وسم الإغلاق </body> مباشرة:

<?php snippet('asyntai-widget') ?>
</body>
</html>

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

الطريقة البديلة 1: الإضافة إلى مقتطف التذييل

إذا كان موقع Kirby الخاص بك يستخدم مقتطف تذييل، يمكنك إضافة كود التضمين مباشرة هناك:

افتح site/snippets/footer.php (أنشئه إذا لم يكن موجودًا)
أضف كود التضمين قبل وسم الإغلاق </body>:

    <!-- Footer content -->
    <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>

تأكد من أن القوالب الخاصة بك تتضمن مقتطف التذييل:

<?php snippet('footer') ?>

ملاحظة: إذا كان مقتطف التذييل مُضمنًا بالفعل في جميع القوالب الخاصة بك، فإن إضافة روبوت الدردشة هنا تضمن ظهوره في كل صفحة دون تعديل ملفات القوالب الفردية.

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

يمكنك إنشاء إضافة Kirby لحقن نص روبوت الدردشة البرمجي تلقائيًا في كل صفحة دون تعديل أي قوالب:

أنشئ مجلد وملف الإضافة في site/plugins/asyntai/index.php
أضف الكود التالي لاستخدام خطافات Kirby لحقن النص البرمجي:

Kirby::plugin('custom/asyntai', [
    'hooks' => [
        'page.render:after' => function ($contentType, $body) {
            $script = '<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>';
            return str_replace('</body>', $script . '</body>', $body);
        }
    ]
]);

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

الطريقة البديلة 3: استخدام مساعد js() في Kirby

يوفر Kirby مساعد js() مدمجًا لتحميل ملفات JavaScript. يمكنك استخدامه في القالب أو المقتطف الخاص بك:

<?= js('https://asyntai.com/static/js/chat-widget.js', ['async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID']) ?>

أو أضف النص البرمجي مباشرة في ملف PHP الخاص بالقالب قبل </body>:

<?php // site/templates/default.php ?>
<html>
<head>
    <!-- head content -->
</head>
<body>
    <!-- page content -->
    <?php snippet('header') ?>
    <main>
        <?= $page->text()->kirbytext() ?>
    </main>
    <?php snippet('footer') ?>

    <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>

ملاحظة: إذا كنت تستخدم مساعد js()، تأكد من وضعه داخل قسم <body> في القالب الخاص بك لضمان تحميل روبوت الدردشة بشكل صحيح.

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

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

لا ترى الأداة؟ تأكد من استبدال YOUR_WIDGET_ID بمعرف الأداة الفعلي من لوحة التحكم. تحقق من أن ملف المقتطف أو الإضافة محفوظ في المجلد الصحيح. إذا كنت تستخدم طريقة الإضافة، تأكد من أن بنية مجلد الإضافة هي site/plugins/asyntai/index.php. امسح ذاكرة التخزين المؤقت للمتصفح أو اختبر في وضع التصفح الخاص. تحقق من وحدة تحكم المطور في المتصفح (F12) بحثًا عن أي أخطاء.