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

التوثيق

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

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

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

دليل خطوة بخطوة للمواقع المدعومة بـ DatoCMS

الحصول على كود التضمين
المنصة:
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

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

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

Next.js هو إطار العمل الأمامي الأكثر شيوعاً المستخدم مع DatoCMS. أضف روبوت الدردشة باستخدام مكون Script:

App Router (app/layout.tsx):

  1. افتح ملف التخطيط الجذري: app/layout.tsx
  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="afterInteractive"
            />
          </body>
        </html>
      )
    }
  3. استبدل YOUR_WIDGET_ID بمعرف الأداة الفعلي الخاص بك
  4. احفظ الملف وأعد تشغيل خادم التطوير

Pages Router (pages/_app.tsx):

  1. افتح ملف pages/_app.tsx الخاص بك
  2. أضف مكون Script:
    import Script from 'next/script'
    import type { AppProps } from 'next/app'

    export default function App({ Component, pageProps }: AppProps) {
      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 الأمامية

لمواقع Gatsby التي تسحب المحتوى من DatoCMS عبر gatsby-source-datocms:

  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

الطريقة البديلة 2: واجهة Nuxt.js الأمامية

لتطبيقات Nuxt.js التي تستهلك محتوى DatoCMS:

  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'
            }
          ]
        }
      }
    })
  2. استبدل YOUR_WIDGET_ID بمعرف الأداة الفعلي الخاص بك
  3. أعد تشغيل خادم تطوير Nuxt

الطريقة البديلة 3: HTML عادي / موقع ثابت

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

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

الطريقة البديلة 4: React (Vite/CRA)

لتطبيقات React القياسية (Create React App وVite) التي تستهلك واجهة برمجة تطبيقات DatoCMS:

الخيار أ: الإضافة إلى public/index.html

  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. احفظ الملف

الخيار ب: useEffect في المكون الجذري

  1. أنشئ مكون روبوت الدردشة أو أضف إلى المكون الجذري:
    // 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
    }
  2. استورد وعرض المكون في App.jsx أو التخطيط الجذري

الخطوة 3: النشر والتحقق

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

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

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