כיצד להוסיף צ'אטבוט AI של Asyntai ל-PayloadCMS

מדריך צעד אחר צעד לאתרים מבוססי PayloadCMS

פלטפורמה:

חשוב: PayloadCMS הוא CMS מסוג headless. יש להוסיף את קוד הצ'אטבוט לאפליקציית ה-frontend שלכם, לא ללוח הניהול של Payload.

שלב 1: קבל את קוד ההטמעה שלך

ראשית, עבור ללוח הבקרה של Asyntai וגלול למטה לחלק "קוד הטמעה". העתק את קוד ההטמעה הייחודי שלך שייראה כך:

<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 (הנפוץ ביותר)

PayloadCMS משתמש בדרך כלל ב-Next.js כמסגרת ה-frontend שלו. הוסיפו את הצ'אטבוט ל-layout הראשי:

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: Frontend React מותאם אישית

אם פרויקט ה-PayloadCMS שלכם משתמש ב-frontend React מותאם אישית במקום Next.js, ניתן לטעון את הצ'אטבוט באופן דינמי עם hook של 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 שלכם משתמש ב-frontend HTML רגיל או סטטי הצורך את ה-API של Payload, הוסיפו את קוד ההטמעה ישירות ל-HTML:

פתחו את קובץ ה-HTML הראשי (בדרך כלל index.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>
  </body>
</html>

שלב 3: פריסה ואימות

לאחר הוספת הקוד לאפליקציית ה-frontend שלכם:

פרסו את ה-frontend שלכם אצל ספק האירוח (Vercel, Netlify וכו')
פתחו את האתר החי שלכם בלשונית דפדפן חדשה
אתה אמור לראות את כפתור ווידג'ט הצ'אט בפינה הימנית התחתונה
לחצו עליו כדי לוודא שהוא נפתח ופועל כראוי

לא רואה את הווידג'ט? ודאו שהחלפתם YOUR_WIDGET_ID במזהה הווידג'ט האמיתי שלכם מלוח הבקרה. בדקו שהסקריפט נטען בלשונית Network של הדפדפן (F12 > Network). ודאו שה-frontend פורס מחדש לאחר הוספת הקוד. עבור Next.js, ודאו שאתם משתמשים ברכיב Script מ-next/script, ולא בתגית <script> רגילה. נקו את מטמון הדפדפן או בדקו במצב גלישה פרטית.

תיעוד