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

دليل خطوة بخطوة للمواقع المبنية على PayloadCMS

المنصة:

مهم: PayloadCMS هو نظام إدارة محتوى بدون واجهة أمامية. يجب إضافة كود روبوت الدردشة إلى تطبيقك الأمامي، وليس إلى لوحة إدارة Payload.

الخطوة 1: احصل على كود التضمين

أولاً، انتقل إلى لوحة تحكم Asyntai وانتقل لأسفل إلى قسم "Embed Code". انسخ كود التضمين الفريد الذي سيبدو هكذا:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

ملاحظة: الكود أعلاه مجرد مثال. يجب عليك نسخ كود التضمين الفريد الخاص بك من لوحة التحكم لأنه يحتوي على معرف الأداة الشخصي الخاص بك.

الخطوة 2: الإضافة إلى واجهة Next.js الأمامية (الأكثر شيوعاً)

يستخدم PayloadCMS عادةً Next.js كإطار عمل للواجهة الأمامية. أضف روبوت الدردشة إلى تخطيطك الجذري:

App Router (Next.js 13+)

افتح app/layout.tsx وأضف مكون Script:

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://asyntai.com/static/js/chat-widget.js"
          data-asyntai-id="YOUR_WIDGET_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Pages Router

إذا كنت تستخدم Pages Router، افتح pages/_app.tsx:

import Script from 'next/script'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://asyntai.com/static/js/chat-widget.js"
        data-asyntai-id="YOUR_WIDGET_ID"
        strategy="afterInteractive"
      />
    </>
  )
}

نصيحة: يضمن خيار strategy="afterInteractive" تحميل روبوت الدردشة بعد أن تصبح الصفحة تفاعلية، مما يوفر أفضل تجربة مستخدم دون التأثير على أداء تحميل الصفحة.

الطريقة البديلة 1: واجهة React أمامية مخصصة

إذا كان مشروع PayloadCMS الخاص بك يستخدم واجهة React أمامية مخصصة بدلاً من Next.js، يمكنك تحميل روبوت الدردشة ديناميكياً باستخدام خطاف useEffect:

// App.tsx or App.jsx
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const 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);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    // ... your app content
  );
}

ملاحظة: استبدل YOUR_WIDGET_ID بمعرف الأداة الفعلي من لوحة التحكم. تضمن دالة التنظيف في عبارة return إزالة الكود عند إلغاء تحميل المكون.

الطريقة البديلة 2: استخدام مكونات Payload المخصصة (لوحة الإدارة فقط)

إذا كنت تريد ظهور روبوت الدردشة داخل لوحة إدارة Payload نفسها (للدعم الداخلي)، يمكنك تسجيل مكون مخصص في payload.config.ts:

// payload.config.ts
import { buildConfig } from 'payload/config';

export default buildConfig({
  admin: {
    components: {
      afterDashboard: ['/components/AsyntaiChatbot'],
    },
  },
  // ... rest of your config
})

ثم أنشئ ملف المكون:

// components/AsyntaiChatbot.tsx
'use client'
import { useEffect } from 'react';

const AsyntaiChatbot = () => {
  useEffect(() => {
    const 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);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return null;
};

export default AsyntaiChatbot;

نصيحة: هذه الطريقة مخصصة فقط لإضافة روبوت الدردشة إلى لوحة إدارة Payload. لموقعك العام، استخدم الخطوة 2 أو الطريقة البديلة 1 بدلاً من ذلك.

الطريقة البديلة 3: موقع HTML ثابت/بسيط

إذا كان موقعك المبني على PayloadCMS يستخدم واجهة HTML بسيطة أو ثابتة تستهلك واجهة برمجة Payload، أضف كود التضمين مباشرة إلى HTML:

افتح ملف HTML الرئيسي (عادةً index.html)
أضف كود التضمين مباشرة قبل وسم الإغلاق </body>:

    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

الخطوة 3: النشر والتحقق

بعد إضافة الكود إلى تطبيقك الأمامي:

انشر تطبيقك الأمامي على مزود الاستضافة (Vercel أو Netlify أو غيره)
افتح موقعك المباشر في علامة تبويب جديدة
يجب أن ترى زر أداة الدردشة في الزاوية السفلية اليمنى
انقر عليه للتأكد من أنه يفتح ويعمل بشكل صحيح

لا ترى الأداة؟ تأكد من استبدال YOUR_WIDGET_ID بمعرف الأداة الفعلي من لوحة التحكم. تحقق من تحميل الكود في علامة تبويب الشبكة في متصفحك (F12 > Network). تحقق من إعادة نشر الواجهة الأمامية بعد إضافة الكود. بالنسبة لـ Next.js، تأكد من استخدام مكون Script من next/script وليس وسم <script> عادي. امسح ذاكرة التخزين المؤقت للمتصفح أو اختبر في وضع التصفح الخاص.

التوثيق