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

المنصة:

TYPO3

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: احصل على كود التضمين

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

الخطوة 2: استخدام TypoScript footerData (موصى به)

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

1. سجّل الدخول إلى واجهة TYPO3 الخلفية
2. انتقل إلى Web → Template
3. حدد صفحتك الجذرية في شجرة الصفحات
4. انقر على "Edit the whole template record" (أو اختر "Info/Modify" ثم "Setup")
5. في حقل Setup، أضف كود TypoScript التالي:
   page.footerData.99 = TEXT
page.footerData.99.value = <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>
6. استبدل YOUR_WIDGET_ID بمعرّف الأداة الفعلي من لوحة التحكم
7. انقر على "Save"
8. امسح ذاكرة التخزين المؤقت لـ TYPO3: Admin Tools → Maintenance → Flush TYPO3 and PHP Cache

بديل: استخدام حزمة الموقع (لحزم المواقع)

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

1. انتقل إلى مجلد حزمة موقعك: packages/your_sitepackage/Configuration/TypoScript/
2. افتح أو أنشئ setup.typoscript
3. أضف الكود التالي:
   page.footerData {
  99 = TEXT
  99.value = <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>
}
4. استبدل YOUR_WIDGET_ID بمعرف الأداة الفعلي الخاص بك
5. امسح ذاكرة التخزين المؤقت في واجهة TYPO3 الخلفية

بديل: استخدام قالب Fluid (FooterAssets)

للمواقع التي تستخدم قوالب Fluid، يمكنك استخدام قسم FooterAssets:

1. انتقل إلى ملف قالب Fluid الخاص بك (عادةً في Resources/Private/Templates/)
2. أضف قسم FooterAssets في تخطيطك أو قالبك:
   <f:section name="FooterAssets">
  <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>
</f:section>
3. تأكد من أن تخطيط صفحتك يعرض قسم FooterAssets:
   <f:render section="FooterAssets" optional="true" />
4. امسح ذاكرة التخزين المؤقت لـ TYPO3

بديل: استخدام AssetCollector (للمطورين)

لمطوري الإضافات، يوفر TYPO3 v10.3+ واجهة برمجة تطبيقات AssetCollector:

1. في كود PHP الخاص بك (مثل وحدة تحكم أو برنامج وسيط)، قم بحقن AssetCollector
2. أضف النص البرمجي مع السمات المخصصة:
   use TYPO3\CMS\Core\Page\AssetCollector;

$this->assetCollector->addJavaScript(
  'asyntai_chatbot',
  'https://asyntai.com/static/js/chat-widget.js',
  ['async' => 'async', 'data-asyntai-id' => 'YOUR_WIDGET_ID']
);

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

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