كيفية إضافة روبوت الدردشة Asyntai AI إلى Grav
دليل خطوة بخطوة لنظام Grav CMS
HTML/Custom
WordPress
Shopify
WooCommerce
BigCommerce
Ecwid
Wix
Squarespace
Webflow
Weebly
HubSpot
Tilda
Adobe Experience Manager
Duda
Google Sites
Bludit
Plesk
Concrete CMS
Docusaurus
Hugo
Kentico
Volusion
Craft CMS
Contentful
Strapi
Joomla
Drupal
Magento
Blogger
Bitrix
TYPO3
PrestaShop
OpenCart
Ghost
Statamic
Umbraco
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". انسخ كود التضمين الفريد الذي سيبدو هكذا:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
ملاحظة: الكود أعلاه مجرد مثال. يجب عليك نسخ كود التضمين الفريد الخاص بك من لوحة التحكم لأنه يحتوي على معرف الأداة الشخصي الخاص بك.
الخطوة 2: الإضافة إلى قالب Grav (موصى بها)
أفضل طريقة لإضافة روبوت الدردشة إلى جميع صفحات موقع Grav هي تعديل قالب Twig الأساسي للقالب:
- انتقل إلى مجلد user/themes/yourtheme/templates/ في مشروع Grav وافتح default.html.twig (أو القالب الأساسي المستخدم بواسطة القالب)
- أضف كود Asyntai المضمّن قبل وسم الإغلاق </body>:
<!-- user/themes/yourtheme/templates/default.html.twig -->
...
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>
- احفظ الملف
نصيحة: يستخدم Grav محرك Twig للقوالب. القالب الأساسي عادةً هو default.html.twig أو partials/base.html.twig حسب القالب. تحقق من بنية القالب للعثور على الملف الصحيح الذي يحتوي على وسم الإغلاق </body>.
الطريقة البديلة 1: استخدام مدير أصول Grav
يوفر مدير الأصول المدمج في Grav طريقة نظيفة لإضافة أصول JavaScript عبر Twig:
- افتح قالب Twig الأساسي للقالب (مثلاً user/themes/yourtheme/templates/partials/base.html.twig)
- استخدم مدير الأصول لإضافة JavaScript:
{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}
أو أضف JavaScript مضمّناً لإنشاء عنصر السكريبت ديناميكياً في القالب الأساسي:
<!-- user/themes/yourtheme/templates/partials/base.html.twig -->
...
{% block bottom %}
{{ assets.js('bottom') }}
{% endblock %}
<script>
(function() {
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.body.appendChild(script);
})();
</script>
</body>
</html>
ملاحظة: طريقة مدير الأصول هي النهج الموصى به من Grav لإدارة أصول JavaScript. يوفر دعماً مدمجاً لتسلسل الأصول وترتيبها وتجميعها.
الطريقة البديلة 2: استخدام إضافة Custom JS
إذا كنت تفضل نهجاً قائماً على الإضافات بدون تعديل ملفات القالب:
- ثبّت إضافة "Custom JS" من لوحة إدارة Grav أو عبر سطر الأوامر:
bin/gpm install custom-js
- انتقل إلى Admin > Plugins > Custom JS
- أضف كود السكريبت المضمّن:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
- احفظ إعدادات الإضافة
نصيحة: استخدام إضافة لحقن السكريبتات يعني أنك لا تحتاج إلى تعديل أي ملفات قالب. يسهّل هذا تبديل القوالب أو تحديثها دون فقدان تكامل روبوت الدردشة.
الطريقة البديلة 3: استخدام تجاوز الكتلة في القالب الفرعي
إذا كان قالب Grav يستخدم وراثة كتل Twig، يمكنك تجاوز الكتلة السفلية في قالب فرعي:
{% block bottom %}
{{ parent() }}
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{% endblock %}
- أنشئ أو افتح قالباً فرعياً يمتد من القالب الأساسي للسمة
- أضف تجاوز الكتلة الموضح أعلاه
- يضمن استدعاء parent() الحفاظ على كل المحتوى الموجود في الكتلة
ملاحظة: تستخدم هذه الطريقة نظام وراثة القوالب في Twig. تأكد من أن اسم الكتلة (مثلاً bottom) يتطابق مع الكتلة المعرّفة في القالب الأساسي. أسماء الكتل الشائعة تشمل bottom وjavascripts وfooter.
الطريقة البديلة 4: استخدام إضافة Custom Head في Grav
خيار آخر قائم على الإضافات هو إضافة Custom Head:
- ثبّت إضافة custom-head عبر سطر الأوامر أو لوحة الإدارة:
bin/gpm install custom-head
- انتقل إلى Admin > Plugins > Custom Head
- أضف كود سكريبت Asyntai المضمّن في إعدادات الإضافة:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
- احفظ الإعدادات
نصيحة: تتيح لك إضافة Custom Head حقن الكود في أقسام الرأس أو الجسم في موقعك بدون لمس ملفات القالب. تحقق من وثائق الإضافة لخيار الموضع الصحيح لإدراج السكريبت قبل وسم الإغلاق </body>.
الخطوة 3: مسح ذاكرة التخزين المؤقت والتحقق
بعد إضافة الكود، امسح ذاكرة التخزين المؤقت لـ Grav وتحقق من التثبيت:
# Clear cache via CLI
bin/grav clearcache
# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache
افتح موقع Grav في علامة تبويب جديدة. يجب أن ترى زر أداة الدردشة في الزاوية السفلية اليمنى. انقر عليه للتأكد من أنه يفتح ويعمل بشكل صحيح.
لا ترى الأداة؟ تأكد من مسح ذاكرة التخزين المؤقت لـ Grav بأمر bin/grav clearcache أو من لوحة الإدارة. تحقق من استبدال YOUR_WIDGET_ID بمعرّف الأداة الفعلي من لوحة التحكم. امسح ذاكرة التخزين المؤقت للمتصفح أو اعرض في وضع التصفح المتخفي. افتح وحدة تحكم المتصفح (F12) للتحقق من أي أخطاء JavaScript. تحقق من وجود السكريبت في مصدر الصفحة بالنقر بزر الماوس الأيمن واختيار "View Page Source".