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

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

المنصة:

مهم: Sanity هو نظام إدارة محتوى بدون واجهة أمامية يقدم المحتوى عبر واجهات برمجة التطبيقات. يجب إضافة كود روبوت الدردشة إلى تطبيقك الأمامي (Next.js أو Gatsby أو Nuxt أو HTML بسيط، إلخ)، وليس إلى Sanity Studio نفسه.

الخطوة 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 الأمامية (الأكثر شيوعاً)

إذا كان موقعك المبني على Sanity يستخدم Next.js (الاقتران الأكثر شيوعاً)، أضف روبوت الدردشة إلى تخطيطك الجذري:

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 إذا كنت تريد بقاء الأداة أثناء التنقل من جانب العميل. بدلاً من ذلك، أضفه إلى مكون التخطيط الجذري.

الطريقة البديلة 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: واجهة HTML أمامية بسيطة

إذا كان موقعك المبني على Sanity يستخدم HTML بسيط أو مولد مواقع ثابتة يستهلك واجهة برمجة Sanity:

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

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

الطريقة البديلة 4: React (Vite أو Create React App)

إذا كانت واجهتك الأمامية تستخدم React مع Vite أو Create React App:

أضف الكود إلى index.html في دليل public/:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... existing head content ... -->
  </head>
  <body>
    <div id="root"></div>
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

أو استخدم خطاف 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: النشر والتحقق

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

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

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

التوثيق