איך להוסיף צ'אטבוט AI של Asyntai ל-Docusaurus

מדריך צעד אחר צעד לאתרי תיעוד Docusaurus

פלטפורמה:

שלב 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: הוספת סקריפט ל-docusaurus.config.js (מומלץ)

הדרך הטובה ביותר להוסיף את הצ'אטבוט לכל עמודי אתר Docusaurus שלך היא דרך קובץ התצורה:

פתח את פרויקט Docusaurus שלך בעורך הקוד
אתר ופתח את קובץ docusaurus.config.js בתיקיית השורש של הפרויקט
מצא את האובייקט const config = { }
הוסף או עדכן את שדה scripts עם ווידג'ט Asyntai שלך:

const config = {
  // ... other config options

  scripts: [
    // Other scripts if any
    {
      src: 'https://asyntai.com/static/js/chat-widget.js',
      'data-asyntai-id': 'YOUR_WIDGET_ID',
      async: true,
    },
  ],

  // ... rest of config
};

שמור את קובץ docusaurus.config.js
בנה מחדש את האתר שלך על ידי הרצת npm run build או yarn build
הפעל מחדש את שרת הפיתוח אם הוא רץ מקומית

טיפ: שדה scripts מקבל מערך של מקורות JavaScript. תגית הסקריפט תוכנס באופן אוטומטי ל-HTML head של כל עמוד. זו השיטה הנקייה והקלה ביותר לתחזוקה עבור אתרי Docusaurus.

שיטה חלופית 1: פורמט מחרוזת (תחביר פשוט יותר)

אם אתה מעדיף גישה פשוטה יותר, ניתן להשתמש בפורמט מחרוזת במערך scripts:

const config = {
  scripts: [
    'https://asyntai.com/static/js/chat-widget.js',
  ],
};

הערה: בעת שימוש בפורמט מחרוזת, תצטרך לשנות את כתובת URL של הסקריפט כדי לכלול את מזהה הווידג'ט כפרמטר שאילתה, או להשתמש בפורמט האובייקט שמוצג בשלב 2 שמאפשר לך להגדיר את תכונת data-asyntai-id ישירות.

שיטה חלופית 2: תגיות Head מותאמות אישית

ניתן גם להוסיף את הסקריפט באמצעות שדה headTags ב-docusaurus.config.js:

const config = {
  headTags: [
    {
      tagName: 'script',
      attributes: {
        src: 'https://asyntai.com/static/js/chat-widget.js',
        'data-asyntai-id': 'YOUR_WIDGET_ID',
        async: true,
      },
    },
  ],
};

טיפ: שדה headTags מספק שליטה רבה יותר על תגיות HTML המדויקות שמוכנסות לחלק <head>. שיטה זו שוות ערך מבחינה פונקציונלית לשימוש בשדה scripts.

שיטה חלופית 3: תבנית HTML מותאמת אישית (מתקדם)

למשתמשים מתקדמים שצריכים שליטה מלאה על תבנית HTML:

צור תיקייה חדשה: src/theme (אם היא לא קיימת)
צור קובץ: src/theme/Root.js
הוסף את הקוד הבא כדי להזריק את הסקריפט באופן דינמי:

import React, { useEffect } from 'react';

export default function Root({children}) {
  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.head.appendChild(script);

    return () => {
      // Cleanup when component unmounts
      document.head.removeChild(script);
    };
  }, []);

  return <>{children}</>;
}

שמור את הקובץ ובנה מחדש את האתר שלך

חשוב: רכיב Root.js עוטף את כל האפליקציה שלך. שיטה מתקדמת זו צריכה לשמש רק אם אתה צריך לוגיקת JavaScript מותאמת אישית או שיש לך דרישות ספציפיות שלא ניתן לעמוד בהן עם גישת קובץ התצורה.

שיטה חלופית 4: התאמת רכיב Footer (Swizzle)

ניתן להתאים את ה-footer כדי לכלול את הסקריפט:

הרץ את פקודת swizzle: npm run swizzle @docusaurus/theme-classic Footer -- --eject
זה יוצר עותק של רכיב Footer ב-src/theme/Footer/
ערוך את רכיב Footer כדי לכלול את תגית הסקריפט שלך
הוסף את הסקריפט לפני תגית הסגירה של ה-footer
שמור ובנה מחדש את האתר שלך

הערה: Swizzling נותן לך שליטה מלאה על רכיבי Docusaurus, אבל זה אומר שתצטרך לתחזק את הרכיב הזה בעצמך. עדכונים ל-Docusaurus לא יעדכנו אוטומטית רכיבים שעברו swizzle.

שלב 3: בנייה ופריסה

לאחר הוספת הקוד, בנה ופרוס את אתר Docusaurus שלך:

# Build the site
npm run build

# Or with Yarn
yarn build

# Deploy to your hosting platform
# (Vercel, Netlify, GitHub Pages, etc.)

טיפ: במהלך הפיתוח, הרץ npm start או yarn start כדי לצפות בתצוגה מקדימה של השינויים שלך מקומית. הצ'אטבוט אמור להופיע בפינה הימנית התחתונה בכל העמודים.

שלב 4: אימות ההתקנה

לאחר פריסת השינויים שלך, פתח את אתר התיעוד שלך בכרטיסיית דפדפן חדשה. אתה אמור לראות את כפתור הצ'אט בפינה הימנית התחתונה. לחץ עליו כדי לוודא שהוא נפתח ופועל כראוי.

לא רואה את הווידג'ט? ודא שבנית מחדש את האתר שלך לאחר ביצוע שינויים. בדוק שהחלפת YOUR_WIDGET_ID במזהה הווידג'ט האמיתי שלך מלוח הבקרה. נקה את מטמון הדפדפן או צפה במצב גלישה פרטית. פתח את מסוף הדפדפן (F12) כדי לבדוק אם יש שגיאות JavaScript.