العودة إلى لوحة التحكم

التوثيق

تعلّم كيفية استخدام Asyntai

البدء
التثبيت قاعدة المعرفة اختبر الذكاء الاصطناعي إدارة المواقع
التخصيص
ألوان الأداة اسم مساعد الذكاء الاصطناعي الرسالة الأولية موضع الأداة التشغيل التلقائي فقاعة الإشعار شارة الرسائل غير المقروءة وضع التعليمات طرح الأسئلة استخدام الرموز التعبيرية جمع البريد الإلكتروني جمع أرقام الهاتف التقاط العملاء المحتملين الذكي الترجمة والتوطين إخفاء العلامة التجارية رابط الخصوصية إشعار مخصص تنزيل النص الكامل محادثة جديدة سجل المحادثات الشعار ونقطة الحالة تحويل الكلام إلى نص أيقونة المحادثة شعار الشركة حد الأحرف درجة الإبداع
نصائح تعليمات الذكاء الاصطناعي مقارنة الخطط
الميزات
زحف الموقع فجوات المعرفة بطاقات المنتجات سياق المستخدم المراقبة المباشرة التحكم البشري التصعيد إشعارات الذكاء الاصطناعي التقرير اليومي تغذية البيانات في الوقت الفعلي تغذية البيانات في الوقت الفعلي - الحد الأقصى أعضاء الفريق تسجيل الدخول الموحد تضمين الصور رؤية الصور أداة الترجمة الترجمة والتوطين العملاء المحتملون التقاط العملاء المحتملين الذكي تذاكر الدعم الحجوزات استبعاد الصفحات عناوين IP المحظورة النموذج الأذكى تفعيل التفكير اقتراحات الردود رسائل المتابعة تحويل الكلام إلى نص تنزيل النص الكامل الدردشة المضمّنة
التحليلات
تحليلات المحادثات سجلات المحادثات
التكاملات
REST API Instagram Messenger WhatsApp Zapier Email تطبيقات الجوال
أخرى
إضافة إلى الشاشة الرئيسية زر فتح مخصص

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

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

الحصول على كود التضمين
المنصة:
HTML HTML/Custom WordPress WordPress Shopify Shopify WooCommerce WooCommerce BigCommerce BigCommerce Ecwid Ecwid Wix Wix Squarespace Squarespace Webflow Webflow Weebly Weebly HubSpot HubSpot Tilda Tilda Adobe Experience Manager Adobe Experience Manager Duda Duda Google Sites Google Sites Bludit Bludit Plesk Plesk Concrete CMS Concrete CMS Craft CMS Craft CMS Contentful Contentful Docusaurus Docusaurus Strapi Strapi Joomla Joomla Kentico Kentico Drupal Drupal Magento Magento Blogger Blogger Bitrix Bitrix TYPO3 TYPO3 PrestaShop PrestaShop OpenCart OpenCart Ghost Ghost Hugo Hugo Statamic Statamic Umbraco Umbraco Volusion Volusion Moodle Moodle SilverStripe SilverStripe Grav Grav October CMS October CMS ProcessWire ProcessWire Sanity Sanity ExpressionEngine ExpressionEngine Sylius Sylius Backdrop CMS Backdrop CMS MODX MODX Bagisto Bagisto PayloadCMS PayloadCMS e107 e107 CrafterCMS CrafterCMS Kirby Kirby MedusaCMS MedusaCMS DatoCMS DatoCMS GoDaddy GoDaddy Framer Framer Bubble Bubble Carrd Carrd Jimdo Jimdo Strikingly Strikingly Kajabi Kajabi Teachable Teachable Thinkific Thinkific ClickFunnels ClickFunnels Hostinger Hostinger Unbounce Unbounce Leadpages Leadpages Systeme.io Systeme.io Instapage Instapage

نظام إدارة محتوى بدون واجهة أمامية: Strapi هو نظام إدارة محتوى بدون واجهة أمامية يقدم المحتوى عبر واجهة برمجة التطبيقات لكنه لا يتضمن واجهة أمامية مدمجة. يعتمد تثبيت روبوت الدردشة على إطار العمل الأمامي الذي تستخدمه لعرض محتوى Strapi. اختر الطريقة أدناه التي تتوافق مع إعدادك.

الخطوة 1: احصل على كود التضمين

أولاً، انتقل إلى لوحة تحكم Asyntai وانتقل لأسفل إلى قسم "Embed Code". انسخ كود التضمين الفريد الذي سيبدو هكذا:

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

ملاحظة: الكود أعلاه مجرد مثال. يجب عليك نسخ كود التضمين الفريد الخاص بك من لوحة التحكم لأنه يحتوي على معرف الأداة الشخصي الخاص بك.

الطريقة 1: Next.js مع Strapi (موصى به)

إذا كنت تستخدم Next.js كواجهة أمامية لـ Strapi (الإعداد الأكثر شيوعاً)، أضف روبوت الدردشة باستخدام مكون Script:

  1. افتح ملف التخطيط الرئيسي: app/layout.tsx (App Router) أو pages/_app.tsx (Pages Router)
  2. استورد مكون 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>
      )
    }
  3. استبدل YOUR_WIDGET_ID بمعرف الأداة الفعلي الخاص بك
  4. احفظ الملف وأعد تشغيل خادم التطوير

نصيحة: استخدام strategy="lazyOnload" يضمن تحميل روبوت الدردشة بعد أن تصبح الصفحة تفاعلية بالكامل، مما يوفر أفضل أداء لموقعك المدعوم بـ Strapi.

الطريقة 2: Gatsby مع Strapi

لمواقع Gatsby التي تستخدم gatsby-source-strapi:

  1. أنشئ أو عدّل 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"
        />
      ])
    }
  2. استبدل YOUR_WIDGET_ID بمعرف الأداة الفعلي الخاص بك
  3. أعد تشغيل خادم تطوير Gatsby

الطريقة 3: Nuxt.js مع Strapi

لتطبيقات Nuxt.js التي تستخدم @nuxtjs/strapi:

Nuxt 3:

  1. أضف إلى 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:

  1. أضف إلى 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

For standard React apps (Create React App, Vite) consuming Strapi API:

  1. افتح ملف public/index.html (CRA) أو index.html (Vite)
  2. أضف كود التضمين قبل وسم الإغلاق </body>:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  3. احفظ الملف

أو أنشئ مكون 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:

  1. عدّل ملف src/app.html
  2. أضف كود التضمين قبل وسم الإغلاق </body>:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  3. احفظ الملف

الطريقة 6: موقع ثابت مع واجهة برمجة Strapi

If you're using Strapi's REST or GraphQL API with a static HTML site:

  1. أضف كود التضمين إلى ملف HTML الخاص بك قبل وسم الإغلاق </body>:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  2. احفظ الملف وارفعه إلى استضافتك

الخطوة 2: التحقق من التثبيت

بعد إضافة كود روبوت الدردشة إلى موقعك المبني على Strapi، انشر أو شغّل خادم التطوير. قم بزيارة موقعك في علامة تبويب جديدة أو نافذة تصفح خاص. يجب أن ترى زر أداة الدردشة في الزاوية السفلية اليمنى. انقر عليه للتأكد من أنه يفتح ويعمل بشكل صحيح.

لا ترى الأداة؟ تأكد من إضافة البرنامج النصي إلى الملف الصحيح لإطار عملك. تحقق من وحدة تحكم المطور في متصفحك بحثاً عن أي أخطاء. إذا كنت تستخدم العرض من جانب الخادم، تأكد من تشغيل البرنامج النصي على جانب العميل. جرب مسح ذاكرة التخزين المؤقت للمتصفح أو العرض في نافذة تصفح خاص.

متغيرات البيئة: لأمان ومرونة أفضل، فكّر في تخزين معرف الأداة في متغير بيئة (مثل NEXT_PUBLIC_ASYNTAI_ID لـ Next.js أو VITE_ASYNTAI_ID لـ Vite) بدلاً من ترميزه مباشرة في الكود.