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

التوثيق

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

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

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

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

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

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

الخطوة 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 مع Contentful (موصى بها)

إذا كنت تستخدم Next.js لعرض محتوى Contentful، أضف روبوت الدردشة باستخدام مكون 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" يضمن تحميل روبوت الدردشة بعد أن تصبح الصفحة تفاعلية بالكامل، مما يوفر أفضل أداء.

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

لمواقع Gatsby التي تسحب المحتوى من Contentful:

  1. ثبّت gatsby-plugin-load-script (اختياري لكن موصى به):
    npm install gatsby-plugin-load-script
  2. أضف إلى gatsby-config.js الخاص بك:
    module.exports = {
      plugins: [
        {
          resolve: 'gatsby-plugin-load-script',
          options: {
            src: 'https://asyntai.com/static/js/chat-widget.js',
            attributes: {
              'data-asyntai-id': 'YOUR_WIDGET_ID',
              async: true
            }
          }
        }
      ]
    }
  3. بدلاً من ذلك، استخدم gatsby-ssr.js:
    // 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"
        />
      ])
    }
  4. أعد تشغيل خادم تطوير Gatsby

الطريقة 3: React مع Contentful

لتطبيقات React القياسية (Create React App وVite وغيرها) التي تستخدم Contentful:

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

أو استخدم مكون React مع useEffect:

// 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
}

الطريقة 4: Vue/Nuxt مع Contentful

لتطبيقات Vue أو Nuxt.js التي تستخدم Contentful:

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'
            }
          ]
        }
      }
    })

Vue 3:

  1. Add to your index.html before </body>:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

الطريقة 5: HTML ثابت مع واجهة برمجة تطبيقات Contentful

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

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

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

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

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

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