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

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

פלטפורמה:

מערכת ניהול תוכן ללא ממשק (Headless CMS): Strapi הוא CMS מסוג headless שמספק תוכן דרך API אבל לא כולל frontend מובנה. התקנת הצ'אטבוט תלויה באיזו מסגרת frontend אתם משתמשים כדי לרנדר את תוכן Strapi שלכם. בחרו את השיטה למטה שמתאימה להגדרה שלכם.

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

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

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

הערה: הקוד למעלה הוא רק דוגמה. עליך להעתיק את קוד ההטמעה הייחודי שלך מלוח הבקרה שלך כיוון שהוא מכיל את מזהה הווידג'ט האישי שלך.

שיטה 1: Next.js עם Strapi (מומלץ)

אם אתם משתמשים ב-Next.js כ-frontend של 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) הצורכות API של Strapi:

פתח את קובץ public/index.html שלך (CRA) או index.html (Vite)
הוסף את קוד ההטמעה לפני תגית הסגירה </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></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 async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
שמור את הקובץ

שיטה 6: אתר סטטי עם API של Strapi

אם אתם משתמשים ב-REST או GraphQL API של Strapi עם אתר HTML סטטי:

הוסף את קוד ההטמעה לקובץ HTML שלך לפני תגית הסגירה </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
שמור את הקובץ והעלה לאחסון שלך

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

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

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

משתני סביבה: לאבטחה וגמישות טובות יותר, שקול לאחסן את מזהה הווידג'ט שלך במשתנה סביבה (למשל, NEXT_PUBLIC_ASYNTAI_ID עבור Next.js או VITE_ASYNTAI_ID עבור Vite) במקום לכתוב אותו ישירות בקוד.

תיעוד