كيفية إضافة روبوت الدردشة Asyntai AI إلى أي موقع
دليل شامل لمواقع HTML والمواقع المخصصة ومولدات المواقع الثابتة
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". انسخ كود التضمين الفريد الخاص بك، والذي سيبدو هكذا:
<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: الإضافة إلى ملف HTML
أبسط طريقة لإضافة روبوت الدردشة هي لصق كود التضمين مباشرةً في ملف HTML:
- افتح ملف HTML في محرر نصوص
- ابحث عن وسم الإغلاق
</body> - الصق كود تضمين Asyntai الخاص بك قبل وسم
</body>مباشرة - احفظ الملف
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<!-- Your website content -->
<!-- Asyntai Chatbot - Add before closing body tag -->
<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>
نصيحة: تضمن إضافة السكريبت قبل وسم الإغلاق </body> تحميله بعد محتوى صفحتك، وهو أمثل للأداء ولن يبطئ صفحتك.
للمواقع متعددة الصفحات
إذا كان موقعك يحتوي على صفحات HTML متعددة، لديك عدة خيارات:
الخيار أ: الإضافة إلى كل صفحة
أضف كود التضمين إلى كل ملف HTML تريد ظهور روبوت الدردشة فيه.
الخيار ب: استخدام تضمين تذييل مشترك
إذا كنت تستخدم تضمينات من جانب الخادم (SSI) أو تضمينات PHP أو ما شابه:
- أنشئ ملف footer.html (أو footer.php)
- أضف كود Asyntai المضمّن إلى هذا الملف
- أدرج ملف التذييل هذا في جميع صفحاتك:
<!-- For PHP -->
<?php include 'footer.php'; ?>
<!-- For SSI -->
<!--#include virtual="/footer.html" -->
الخيار ج: التحميل الديناميكي بـ JavaScript
أنشئ ملف JavaScript واحد يحمّل روبوت الدردشة في جميع الصفحات:
- أنشئ ملفاً باسم asyntai-loader.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);
})(); - استبدل
YOUR_WIDGET_IDبمعرف الأداة الفعلي الخاص بك - أدرج هذا السكريبت في جميع صفحاتك:
<script src="/js/asyntai-loader.js"></script>
لمولدات المواقع الثابتة
إذا كنت تستخدم مولد مواقع ثابتة، أضف كود التضمين إلى التخطيط أو القالب الأساسي:
أضف إلى _includes/footer.html أو _layouts/default.html
أضف إلى layouts/partials/footer.html أو layouts/_default/baseof.html
أضف إلى gatsby-browser.js أو استخدم gatsby-ssr.js
أضف إلى pages/_document.js أو استخدم مكوّن next/script
أضف إلى nuxt.config.js تحت head.script
أضف إلى التخطيط الأساسي في _includes/
أضف إلى src/layouts/Layout.astro قبل </body>
أضف إلى .vuepress/config.js تحت head
لتطبيقات React / Vue / Angular
لتطبيقات الصفحة الواحدة (SPAs)، يمكنك إضافة السكريبت إلى index.html أو تحميله ديناميكياً:
React (طريقة index.html)
<!-- In public/index.html, before </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>
React (طريقة useEffect)
// In your App.js or a component
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://asyntai.com/static/js/chat-widget.js';
script.async = true;
script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
document.body.appendChild(script);
return () => document.body.removeChild(script);
}, []);
Vue (في main.js أو App.vue)
// In mounted() or onMounted()
const script = document.createElement('script');
script.src = 'https://asyntai.com/static/js/chat-widget.js';
script.async = true;
script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
document.body.appendChild(script);
Angular (في index.html)
<!-- In src/index.html, before </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>
الخطوة 3: التحقق من التثبيت
بعد إضافة الكود، افتح موقعك في علامة تبويب جديدة أو نافذة تصفح متخفي. يجب أن ترى زر أداة الدردشة في الزاوية السفلية اليمنى. انقر عليه للتأكد من أنه يفتح ويعمل بشكل صحيح.
لا ترى الأداة؟ تحقق من أن السكريبت موضوع بشكل صحيح قبل وسم </body>. تأكد من عدم وجود أخطاء JavaScript في وحدة تحكم المتصفح (اضغط F12 لفتح أدوات المطور). جرّب مسح ذاكرة التخزين المؤقت للمتصفح أو العرض في نافذة تصفح متخفي.
مهم: يتطلب روبوت الدردشة أن يُقدَّم موقعك عبر HTTP أو HTTPS (وليس مفتوحاً مباشرةً كملف). إذا كنت تختبر محلياً، استخدم خادم تطوير محلي.