كيفية إضافة روبوت الدردشة Asyntai AI إلى Strapi
دليل خطوة بخطوة للمواقع المبنية على Strapi
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
نظام إدارة محتوى بدون واجهة أمامية: Strapi هو نظام إدارة محتوى بدون واجهة أمامية يقدم المحتوى عبر واجهة برمجة التطبيقات لكنه لا يتضمن واجهة أمامية مدمجة. يعتمد تثبيت روبوت الدردشة على إطار العمل الأمامي الذي تستخدمه لعرض محتوى Strapi. اختر الطريقة أدناه التي تتوافق مع إعدادك.
الخطوة 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:
<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>
ملاحظة: الكود أعلاه مجرد مثال. يجب عليك نسخ كود التضمين الفريد الخاص بك من لوحة التحكم لأنه يحتوي على معرف الأداة الشخصي الخاص بك.
الطريقة 1: Next.js مع Strapi (موصى به)
إذا كنت تستخدم Next.js كواجهة أمامية لـ Strapi (الإعداد الأكثر شيوعاً)، أضف روبوت الدردشة باستخدام مكون Script:
- افتح ملف التخطيط الرئيسي:
app/layout.tsx(App Router) أوpages/_app.tsx(Pages Router) - استورد مكون Script وأضف روبوت الدردشة:
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Script
src="https://asyntai.com/static/js/chat-widget.js"
data-asyntai-id="YOUR_WIDGET_ID"
strategy="lazyOnload"
/>
</body>
</html>
)
} - استبدل
YOUR_WIDGET_IDبمعرف الأداة الفعلي الخاص بك - احفظ الملف وأعد تشغيل خادم التطوير
نصيحة: استخدام strategy="lazyOnload" يضمن تحميل روبوت الدردشة بعد أن تصبح الصفحة تفاعلية بالكامل، مما يوفر أفضل أداء لموقعك المدعوم بـ Strapi.
الطريقة 2: Gatsby مع Strapi
لمواقع Gatsby التي تستخدم gatsby-source-strapi:
- أنشئ أو عدّل
gatsby-ssr.jsفي جذر مشروعك:import React from 'react'
export const onRenderBody = ({ setPostBodyComponents }) => {
setPostBodyComponents([
<script
key="asyntai-chatbot"
async
src="https://asyntai.com/static/js/chat-widget.js"
data-asyntai-id="YOUR_WIDGET_ID"
/>
])
} - استبدل
YOUR_WIDGET_IDبمعرف الأداة الفعلي الخاص بك - أعد تشغيل خادم تطوير Gatsby
الطريقة 3: Nuxt.js مع Strapi
لتطبيقات Nuxt.js التي تستخدم @nuxtjs/strapi:
Nuxt 3:
- أضف إلى
nuxt.config.tsالخاص بك:export default defineNuxtConfig({
app: {
head: {
script: [
{
src: 'https://asyntai.com/static/js/chat-widget.js',
async: true,
'data-asyntai-id': 'YOUR_WIDGET_ID'
}
]
}
}
})
Nuxt 2:
- أضف إلى
nuxt.config.js:export default {
head: {
script: [
{
src: 'https://asyntai.com/static/js/chat-widget.js',
async: true,
'data-asyntai-id': 'YOUR_WIDGET_ID'
}
]
}
}
الطريقة 4: React مع Strapi
لتطبيقات React القياسية (Create React App وVite) التي تستهلك واجهة برمجة تطبيقات Strapi:
- افتح ملف
public/index.html(CRA) أوindex.html(Vite) - أضف كود التضمين قبل وسم الإغلاق
</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:
// components/Chatbot.jsx
import { useEffect } from 'react'
export default function Chatbot() {
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)
}, [])
return null
}
الطريقة 5: SvelteKit مع Strapi
لتطبيقات SvelteKit التي تستهلك محتوى Strapi:
- عدّل ملف
src/app.html - أضف كود التضمين قبل وسم الإغلاق
</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> - احفظ الملف
الطريقة 6: موقع ثابت مع واجهة برمجة Strapi
إذا كنت تستخدم واجهة برمجة تطبيقات REST أو GraphQL من Strapi مع موقع HTML ثابت:
- أضف كود التضمين إلى ملف HTML الخاص بك قبل وسم الإغلاق
</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> - احفظ الملف وارفعه إلى استضافتك
الخطوة 2: التحقق من التثبيت
بعد إضافة كود روبوت الدردشة إلى موقعك المبني على Strapi، انشر أو شغّل خادم التطوير. قم بزيارة موقعك في علامة تبويب جديدة أو نافذة تصفح خاص. يجب أن ترى زر أداة الدردشة في الزاوية السفلية اليمنى. انقر عليه للتأكد من أنه يفتح ويعمل بشكل صحيح.
لا ترى الأداة؟ تأكد من إضافة البرنامج النصي إلى الملف الصحيح لإطار عملك. تحقق من وحدة تحكم المطور في متصفحك بحثاً عن أي أخطاء. إذا كنت تستخدم العرض من جانب الخادم، تأكد من تشغيل البرنامج النصي على جانب العميل. جرب مسح ذاكرة التخزين المؤقت للمتصفح أو العرض في نافذة تصفح خاص.
متغيرات البيئة: لأمان ومرونة أفضل، فكّر في تخزين معرف الأداة في متغير بيئة (مثل NEXT_PUBLIC_ASYNTAI_ID لـ Next.js أو VITE_ASYNTAI_ID لـ Vite) بدلاً من ترميزه مباشرة في الكود.