كيفية إضافة روبوت الدردشة Asyntai AI إلى DatoCMS
دليل خطوة بخطوة للمواقع المدعومة بـ DatoCMS
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
نظام إدارة محتوى بدون واجهة أمامية: DatoCMS هو نظام إدارة محتوى بدون واجهة أمامية يقدم المحتوى عبر واجهات برمجة التطبيقات. يجب إضافة كود روبوت الدردشة إلى تطبيقك الأمامي (Next.js أو Gatsby أو Nuxt وغيرها)، وليس إلى لوحة تحكم DatoCMS.
الخطوة 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: الإضافة إلى واجهة Next.js الأمامية (الأكثر شيوعاً)
Next.js هو إطار العمل الأمامي الأكثر شيوعاً المستخدم مع DatoCMS. أضف روبوت الدردشة باستخدام مكون Script:
App Router (app/layout.tsx):
- افتح ملف التخطيط الجذري:
app/layout.tsx - استورد مكون 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="afterInteractive"
/>
</body>
</html>
)
} - استبدل
YOUR_WIDGET_IDبمعرف الأداة الفعلي الخاص بك - احفظ الملف وأعد تشغيل خادم التطوير
Pages Router (pages/_app.tsx):
- افتح ملف
pages/_app.tsxالخاص بك - أضف مكون Script:
import Script from 'next/script'
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return (
<>
<Component {...pageProps} />
<Script
src="https://asyntai.com/static/js/chat-widget.js"
data-asyntai-id="YOUR_WIDGET_ID"
strategy="afterInteractive"
/>
</>
)
}
نصيحة: استخدام strategy="afterInteractive" يضمن تحميل روبوت الدردشة مباشرة بعد أن تصبح الصفحة تفاعلية، مما يوفر توازناً جيداً بين الأداء والتوفر.
الطريقة البديلة 1: واجهة Gatsby الأمامية
لمواقع Gatsby التي تسحب المحتوى من DatoCMS عبر gatsby-source-datocms:
- أنشئ أو عدّل
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
الطريقة البديلة 2: واجهة Nuxt.js الأمامية
لتطبيقات Nuxt.js التي تستهلك محتوى DatoCMS:
- أضف إلى
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'
}
]
}
}
}) - استبدل
YOUR_WIDGET_IDبمعرف الأداة الفعلي الخاص بك - أعد تشغيل خادم تطوير Nuxt
الطريقة البديلة 3: HTML عادي / موقع ثابت
إذا كنت تستخدم واجهة برمجة تطبيقات توصيل المحتوى من DatoCMS مع موقع 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> - استبدل
YOUR_WIDGET_IDبمعرف الأداة الفعلي الخاص بك - احفظ الملف وارفعه إلى استضافتك
الطريقة البديلة 4: React (Vite/CRA)
لتطبيقات React القياسية (Create React App وVite) التي تستهلك واجهة برمجة تطبيقات DatoCMS:
الخيار أ: الإضافة إلى public/index.html
- افتح ملف
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> - احفظ الملف
الخيار ب: useEffect في المكون الجذري
- أنشئ مكون روبوت الدردشة أو أضف إلى المكون الجذري:
// 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
} - استورد وعرض المكون في
App.jsxأو التخطيط الجذري
الخطوة 3: النشر والتحقق
بعد إضافة كود روبوت الدردشة إلى موقعك المدعوم بـ DatoCMS، انشر أو شغّل خادم التطوير. قم بزيارة موقعك الإلكتروني في علامة تبويب جديدة أو نافذة تصفح خاص. يجب أن ترى زر أداة الدردشة في الزاوية السفلية اليمنى. انقر عليه للتأكد من أنه يفتح ويعمل بشكل صحيح.
لا ترى الأداة؟ تأكد من إضافة البرنامج النصي إلى الملف الصحيح لإطار عملك. تحقق من وحدة تحكم المطور في متصفحك بحثاً عن أي أخطاء. إذا كنت تستخدم العرض من جانب الخادم، تأكد من تشغيل البرنامج النصي على جانب العميل. جرب مسح ذاكرة التخزين المؤقت للمتصفح أو العرض في نافذة تصفح خاص.
متغيرات البيئة: لأمان ومرونة أفضل، فكّر في تخزين معرف الأداة في متغير بيئة (مثل NEXT_PUBLIC_ASYNTAI_ID لـ Next.js أو VITE_ASYNTAI_ID لـ Vite) بدلاً من ترميزه مباشرة في الكود.