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

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

פלטפורמה:

חשוב: Sanity הוא CMS מסוג headless שמספק תוכן דרך APIs. יש להוסיף את קוד הצ'אטבוט לאפליקציית ה-frontend שלכם (Next.js, Gatsby, Nuxt, HTML רגיל וכו'), לא ל-Sanity Studio עצמו.

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

אם האתר מבוסס Sanity שלכם משתמש ב-Next.js (השילוב הנפוץ ביותר), הוסיפו את הצ'אטבוט ל-layout הראשי:

App Router (Next.js 13+)

פתחו את app/layout.js (או 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.js:

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: ממשק Gatsby

אם אתר ה-Sanity שלכם משתמש ב-Gatsby, הוסיפו את הסקריפט דרך gatsby-ssr.js:

// gatsby-ssr.js
import React from 'react'

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script
      key="asyntai"
      async
      src="https://asyntai.com/static/js/chat-widget.js"
      data-asyntai-id="YOUR_WIDGET_ID"
    />
  ]);
};

הערה: עליכם גם להוסיף את אותו קוד ל-gatsby-browser.js אם אתם רוצים שהווידג'ט יישאר במהלך ניווט בצד הלקוח. לחלופין, הוסיפו אותו לרכיב ה-layout הראשי.

שיטה חלופית 2: ממשק Nuxt.js

אם אתר ה-Sanity שלכם משתמש ב-Nuxt.js, הוסיפו את הסקריפט ב-nuxt.config.js (או nuxt.config.ts):

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://asyntai.com/static/js/chat-widget.js',
          'data-asyntai-id': 'YOUR_WIDGET_ID',
          async: true
        }
      ]
    }
  }
})

שיטה חלופית 3: Frontend HTML רגיל

אם האתר מבוסס Sanity שלכם משתמש ב-HTML רגיל או במחולל אתרים סטטיים הצורך את ה-API של Sanity:

פתחו את קובץ ה-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>

שיטה חלופית 4: React (Vite או Create React App)

אם ה-frontend שלכם משתמש ב-React עם Vite או Create React App:

הוסיפו את הסקריפט ל-index.html בספריית public/:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... existing head content ... -->
  </head>
  <body>
    <div id="root"></div>
    <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>

או השתמשו ב-hook של useEffect ברכיב הראשי שלכם:

// App.jsx or App.tsx
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
  );
}

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

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

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

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

תיעוד